Inline-Block Tabs not displaying correctly - 5.0

[JasonBev]

After the 5.0 Update tabs with option:block are falling under each other instead of in a 2 column format.

max-width for xpress-window-rolequarter is set to 50% and they also have margins which causes an overflow.

.xpress-window-rolequarter
{
    width: 100%;
    max-width: 50%;
}

Temp fix - max-width reduced to 49%

Note: Other display issue is icons aren't mapped - unrelated to this issue

[JasonBev]

Additional: .xpress-window-block has the same issue.

[paulfisher53]

I've changed the flat skin so that the max-width for both xpress-window-rolequarter and xpress-window-block is max-width: calc(50% - 10px);

This should now take into account the margin. Let me know hoe it goes

[JasonBev]

xpress-window-rolequarter - Displays nicely xpress-window-block - Does have a minor alignment issue when a tab with 'factbox' is present on the page. I have looked at sites prior to liveapp 5.0 and they have the same issue though, it's just only become noticeable as I modified headers for .app-window-title-alt. Changing it to -5px still doesn't align perfectly for some reason but isn't a major issue.

Mod colour and -10px

Default colour and -5px

[paulfisher53]

The issue is that we are subtracting the wrong amount (we should only subtract the margin, which is 5px) and the .xpress-window-default (and other full width classes) also need to subtract the margin.

Try replacing the following classes:

.xpress-window-right
{
    width: 100%;
    max-width: calc(100% - 5px);        
}

.xpress-window-block
{
    width: 100%;
    max-width: calc(50% - 5px);
}

.xpress-window-rolehalf
{
    width: 100%;
    max-width: calc(100% - 5px); 
}

.xpress-window-rolequarter
{
    width: 100%;
    max-width: calc(50% - 5px);
}

.xpress-window-default
{
    width: 100%;
    max-width: calc(100% - 5px);   
}

[JasonBev]

All tabs appear to aligning correctly now

[paulfisher53]

Thanks