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

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

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

  • 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

    • This topic was modified 3 years, 10 months ago by  George S. Reason: Further explanation

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.