jQuery UI Widgets › Forums › Navigation › Tabs › Problems aligning text in tab with splitter

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 8 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Problems aligning text in tab with splitter Posts
  • June 7, 2016 at 8:00 pm Problems aligning text in tab with splitter #84968

    George S
    Participant

    I have a tab widget with 6 pages. I am dynamically adding text to the tab pages via “document.getElementById(“analysisTabViewpoint”).innerHTML” . This functionality is working fine. The text in the body of tab #1 (called OVERVIEW in my example) should be wrapped normally. The text in the body of tab #2 (Hierarchy) should be centered. If the tab widget is the ONLY thing on the page, the text displays properly on all pages. The problem is that this web page ALSO has a splitter. It appears that the text (specifically the DIV) on tab#1 and tab#2 is looking at the MAXIMUM size of the tab width, not the current size. As such, text on tab#1 is wrapping at 850 pixels instead of 300, and I don’t see all my text. Centering on tab#2 is centering at 850 pixels instead of 300 (as an example), and I don’t see any of my text. I have created a JSEDitor example. URL is
    https://www.jseditor.io/?key=tabtest2

    Thanks

    June 8, 2016 at 6:34 am Problems aligning text in tab with splitter #84976

    Peter Stoev
    Keymaster

    Hi George,

    The problem is that the HTML Structure of your sample is incorrect. You missed 1 DIV tag for the Splitter’s Panel. It should be:

    <!DOCTYPE html>
<HTML>

<HEAD>
</HEAD>

<body class='default'>
    <div id="splitContainer">
        <div>
            Top Panel
        </div>
        <div>
            <div id="splitter">
                <div id='AnalysisBodyLeft'></div>
<div>
                <div id='AnalysisBodyRight'>
                    <ul style='margin-left: 10px;'>
                        <li>Overview</li>
                        <li>Hierarchy</li>
                        <li>Financials</li>
                        <li>Industry</li>
                        <li>3rd Party</li>
                        <li>Additional Assets</li>
                    </ul>
                    <div id="analysisTabOver">
                        <div id="analysisTabOverLeft"></div>
                        <div id="analysisTabOverRight"></div>
                        <div id="analysisTabOverBottom"></div>
                    </div>

                    <div id="analysisTabViewpoint" style="text-align: center;"></div>

                    <div id="analysisTabFin">
                        <div id="analysisTabFinLeft"></div>
                        <div id="analysisTabFinRight"></div>
                    </div>

                    <div id="analysisTabInd"></div>
                    <div id="analysisTabComp"> </div>

                    <div id="analysisTabWeb" style="text-align: center;"> </div>

                </div>
</div>
            </div>
        </div>
    </div>
</body>

</HTML>

    Not:

    <!DOCTYPE html>
<HTML>

<HEAD>
</HEAD>

<body class='default'>
    <div id="splitContainer">
        <div>
            Top Panel
        </div>
        <div>
            <div id="splitter">
                <div id='AnalysisBodyLeft'></div>

                <div id='AnalysisBodyRight'>
                    <ul style='margin-left: 10px;'>
                        <li>Overview</li>
                        <li>Hierarchy</li>
                        <li>Financials</li>
                        <li>Industry</li>
                        <li>3rd Party</li>
                        <li>Additional Assets</li>
                    </ul>
                    <div id="analysisTabOver">
                        <div id="analysisTabOverLeft"></div>
                        <div id="analysisTabOverRight"></div>
                        <div id="analysisTabOverBottom"></div>
                    </div>

                    <div id="analysisTabViewpoint" style="text-align: center;"></div>

                    <div id="analysisTabFin">
                        <div id="analysisTabFinLeft"></div>
                        <div id="analysisTabFinRight"></div>
                    </div>

                    <div id="analysisTabInd"></div>
                    <div id="analysisTabComp"> </div>

                    <div id="analysisTabWeb" style="text-align: center;"> </div>

                </div>

            </div>
        </div>
    </div>
</body>

</HTML>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.