Weird CSS behaviour

Flow
1

Hello,

I have created my own theme for a tabsheet but I am having weird results when first logging into my application. It cuts off the text for a few of the tabs. Once you click on the tabs, it repaints the tabs properly. Perhaps the problem is with my style.css settings. Wondering if anybody would be able to easily point me to what could be causing it.

Before clicking:

After clicking:

My styles.css is defined as follow:

.i-tabsheet,
.i-tabsheet-content,
.i-tabsheet-deco {
outline: none; /* Prevent selection outline which might break layouts or cause scrollbars /
text-align: left / Force default alignment */
}

.i-tabsheet-tabs {
empty-cells: hide;
border-collapse: collapse;
margin:0;
padding:0;
border:0;
height: 24px;
width: 100%;
overflow:hidden;
}

.i-tabsheet-tabs td {
margin:0;
padding:0;
}

.i-tabsheet-spacertd {
width: 100%;
}
.i-tabsheet-spacertd div {
height: 24px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #b6bbbc;
background: transparent;
}

.i-tabsheet-hidetabs .i-tabsheet-tabcontainer {
display: none;
}

.i-tabsheet-tabs .i-caption {
white-space: nowrap;
}

/* for IE (does not inherit) */
.i-tabsheet-tabs .i-caption span {
white-space: nowrap;
}

.i-tabsheet-tabitem {
border: none;
background: transparent url(img/tab-unselected.gif) no-repeat;
margin: 0;
padding: 0;
width: 124px;
height: 24px;
color: #000000;
font-size: 11px;
font-weight: bolder;
cursor: pointer;
}

.i-tabsheet-tabitem .i-caption {
margin-left: 10px;
margin-top: 5px;
width: 124px;
padding: 0;
overflow: visible;
}

.i-tabsheet-tabitem-selected {
border: none;
background: transparent url(img/tab.gif) no-repeat;
margin: 0;
padding: 0;
width: 124px;
height: 24px;
cursor: default;
color: #ee5311;
}

.i-tabsheet-tabitem:hover {
color: #4b5257;
}

.i-tabsheet-tabitem-selected:hover {
color: #ee5311;
}

.i-tabsheet-tabitem-selected .i-caption {
margin-left: 10px;
margin-top: 5px;
width: 124px;
padding: 0;
overflow: visible;
}

.i-tabsheet-content {
border: 1px solid #b6bbbc;
background-color: #fff;
border-bottom: 1px solid #b6bbbc;
border-top: none;
position: relative;
}

.i-tabsheet-hidetabs .i-tabsheet-content {
border-top: 1px solid #b5babb;
}

.i-tabsheet-deco {
border-bottom: 1px solid #b6bbbc;
}

/* Progress indication */

.i-tabsheet-loading .i-tabsheet-tabitem-selected .i-captiontext {
background: transparent;
margin-left: 0;
padding-left: 0;
}

/* IE specific styles */

  • html .i-tabsheet-tabs {
    height: 24px;
    }
    *+html .i-tabsheet-tabs {
    height: 24px;
    }

  • html .i-tabsheet-tabitem-selected {
    border: none;
    background: transparent url(img/tab.gif) no-repeat;
    margin: 0;
    padding: 0;
    width: 124px;
    height: 24px;
    cursor: default;
    color: #000000;
    }
    *+html .i-tabsheet-tabitem-selected {
    border: none;
    background: transparent url(img/tab.gif) no-repeat;
    margin: 0;
    padding: 0;
    width: 124px;
    height: 24px;
    cursor: default;
    color: #000000;
    }

  • html .i-tabsheet-tabitem-selected .i-caption {
    background: transparent;
    margin-left: 10px;
    margin-top: 5px;
    width: 124px;
    padding: 0;
    overflow: visible;
    }
    *+html .i-tabsheet-tabitem-selected .i-caption {
    background: transparent;
    margin-left: 10px;
    margin-top: 5px;
    width: 124px;
    padding: 0;
    overflow: visible;
    }

  • html .i-tabsheet-tabitem .i-caption {
    background: transparent;
    margin-left: 10px;
    margin-top: 5px;
    width: 124px;
    padding: 0;
    overflow: visible;
    }
    *+html .i-tabsheet-tabitem .i-caption {
    background: transparent;
    margin-left: 10px;
    margin-top: 5px;
    width: 124px;
    padding: 0;
    overflow: visible;
    }

  • html .i-tabsheet-tabitem:hover {
    color: #4b5257;
    }

  • html .i-tabsheet-tabitem-selected:hover {
    color: #ee5311;
    }

*+html .i-tabsheet-tabitem:hover {
color: #4b5257;
}

*+html .i-tabsheet-tabitem-selected:hover {
color: #ee5311;
}

  • html .i-tabsheet-content {
    border-bottom: 1px solid #b6bbbc;
    }
    *+html .i-tabsheet-content {
    border-bottom: 1px solid #b6bbbc;
    }

  • html .i-tabsheet-deco {
    height: 0;
    }

*+html .i-tabsheet-deco {
height: 0;
}

Thanks for your help,
Ajay

2

When I do not pass in an icon during the creation of the tabs, I don’t seem to have this problem.

Changing these lines:
tabsheet.addTab(monitorsVL1, “Monitoring”, new ThemeResource (“img/monitoring.gif”));
tabsheet.addTab(reportsHL2, “Reports”, new ThemeResource (“img/reports.gif”));
tabsheet.addTab(databaseVL1, “Database”, new ThemeResource (“img/database.gif”));
tabsheet.addTab(adminVL1, “Administration”, new ThemeResource (“img/admin.gif”));

To:
tabsheet.addTab(monitorsVL1, “Monitoring”, null);
tabsheet.addTab(reportsHL2, “Reports”, null);
tabsheet.addTab(databaseVL1, “Database”, null);
tabsheet.addTab(adminVL1, “Administration”, null);

However, I would really like to incorporate the icons and still have a polished application, is there any way around this?

Thanks,
Ajay

3

Hi,

Sanity check: does this occur when you don’t use your own theme?
There is a recalculation of sizes once images have been loaded, which might be causing this in some way - but then it should occur in the default theme as well. But we’ll have to investigate…

I can try to reproduce, but it would be better if you can try with the default theme first (empty the browser cache before trying), and tell us what you got?

Best Regards,
Marc

4

Hello Marc,

I tried using the default theme and the issue still persists. Also, the icons do not show up.

Here is a screenshot:

One difference I’ve noticed with the default theme is that even after clicking the tabs, the text for all the unselected tabs text remains cut off. Only the selected tab’s text shows its text without being cut off.

Thanks,
Ajay

5

Hi,

There is definitely something broken with the TabSheet icons in 5.3.0RC8. The size of the tab container is not updated properly which causes wrapping or clipping in the tab. Please create a ticket at http://dev.itmill.com about the issue.

Cheers,
Artur

6

Before creating a bug ticket for this, I realized a newer version of the IT Mill Toolkit has been released RC8 (I am using RC7). After upgrading, it appears that my issue has been resolved.

Thanks for helping out :slight_smile:

Ajay

7

Nice! Actually I just noticed that my own test case triggered another bug in Firefox, causing the same visual result even though it is completely unrelated :slight_smile: