Log in to AnswerLog in to Follow
Neil Coleman
11Views
3Comments
Solved
Handling Tabs wrapping - RichWidgets\Tabs_ClientSide
Question
UI
RichWidgets
Traditional Web
Application Type
Traditional Web

Hi, 

  We have a screen where we have a number of Tabs appearing across the page, and I was hoping someone may be able to help with a behaviour when the Tab Header does fit on the visible screen.

 We are using the RichWidgets\Tabs_ClientSide web block, and have been for a number of years and we occasionally add a new Tab. The issue I am seeing is that if a User causes the Tabs to 'Wrap' (e.g. a smaller screen, or larger resolution) then the second row of tabs are very narrow, and the Tab Body is behind the Tab Header.

e.g.

to

 I have managed to resolve the Tab Header sizing by changing the 'height' in the css 'Tabs_Header' class to 'auto'

 e.g.

but I am struggling to work out how I can dynamically sit the Tabs_TabBody underneath the resized header.

The Tabs_TabBody css is fixed at 31px, so ideally this needs to automatically change to suit the size of the header

e.g.


Please can anyone advise if there is a way to do this. It's not a major issue for us, more of a challenge for myself but It would be good to have a workaround, before any other patterns or UI/UX is considered in the future.

It's easy to recreate, but I have attached an OAP file 


Many Thanks

Neil

TabsWrapping.oap

0
0
on 11th Mar
Benjith Sam
mvp_badge
MVP
Solution

You're welcome, Neil.

Glad to help you :)

Thank you for sharing the final implementation with us :)


Kind regards,

Benjith Sam

See solution in context
0
0
on 11th Mar
Benjith Sam
mvp_badge
MVP
Solution

Hi Neil,

For the mentioned case, you will have to override the default CSS style defintion for the Tabs_ClientSide widget. Add the below mentioned CSS rules in the screen stylesheet section.

CSS Snippet:

ul.Tabs_Header {
    height: auto;
    position: unset;
}

.Tabs_TabBody, .Tabs_TabBody.OSAutoMarginTop {
    margin: 0px;
}


See this sample screen - TabWrap_Test


Hope this helps you!


Kind regards,

Benjith Sam

0
0
on 11th Mar

Hi, thanks for your quick response.

The solution works well and does what I need, but i have changed the ‘unset’ to ‘relative’ to enable it to work in IE11


many thanks

Neil

0
0
on 11th Mar
Benjith Sam
mvp_badge
MVP
Solution

You're welcome, Neil.

Glad to help you :)

Thank you for sharing the final implementation with us :)


Kind regards,

Benjith Sam

0
0
on 11th Mar
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.