Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    TabSet height behaves differently in different browsers

    Hi,

    We observe that TabSet height behaves differently in different browsers.

    This behavior can be reproduced with the attached code on SmartClient_v91p_2015-02-17_PowerEdition and SmartClient_v91p_2016-01-08_PowerEdition.

    Steps: Click Tab "Green" then click back to Tab "Blue".

    In firefox, when click back to Tab "Blue", the previously expanded TabSet height adjusts back to fit its content.

    In Chrome and IE11, when click back to Tab "Blue", the previously expanded TabSet height remains the same as Tab "Green" with scroll bar, and leaves lots of space on the bottom of the page while scrolling down.

    We are wondering if it is an issue in Chrome and IE11. If not, how can we achieve the firefox behavior in Chrome and IE11.

    Thanks,
    Robin

    Code:
    <!DOCTYPE HTML>

<HTML><HEAD><TITLE>TabSet Height</TITLE>
    <SCRIPT>var isomorphicDir = "isomorphic/"</SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
    <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
    <SCRIPT SRC=isomorphic/skins/Enterprise/load_skin.js></SCRIPT>
</HEAD><BODY CLASS="pageBackground">


<SCRIPT>
isc.TabSet.create({
    ID: "topTabSet",
    tabBarPosition: "top",
    width: "100%",
    height:"100%",
    paneContainerOverflow:"visible",
    overflow:"visible",
    tabs: [
        {title: "Blue", pane: isc.VStack.create({margin:3,overflow:"visible",members:[isc.DynamicForm.create({height: 500,width: 500,showEdges: true,fields:[{title: "TF", width: 100}]})]})},
        {title: "Green", pane: isc.VStack.create({margin:3,overflow:"visible",members:[isc.DynamicForm.create({height: 1500,width: 500,showEdges: true,fields: [{title: "TF2", width: 100}]})]})}
    ]
});
</SCRIPT></BODY></HTML>
    Tags: None
    #2
    First of all, we wouldn't recommend this overall approach. It relies on page-level scrolling in the browser, which is badly broken in WebKit (doesn't recognize the case where both scrollbars can be hidden because content has shrunk) among other issues. You could instead just have the TabSet fill the screen and place the content inside it in a layout with overflow:"auto".

    Second, this looks to only be a problem in 9.1, probablybecause IE11 came out after 9.1 was released, so it doesn't officially support that browser. So if you are building a new screen here, you can keep going with your current approach if you update. And you need to update anyway for new browser support.

    Finally, the underlying problem here is that the content of the Green tab is still inside the paneContainer and still contributing to its measured height. You could use hideUsingDisplayNone on Green's VStack to avoid this problem. Just note that older IE, including possibly IE8, is known to crash intermittently in some unpredictable circumstances involving certain CSS rules, form controls and display:none.

    Comment

    Previous template Next
    Working...
    X