jQuery UI Widgets › Forums › Navigation › Tabs › Vertical alignment of tab titles (with different font sizes)
Tagged: jQuery Tabs, Tabs
This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 6 months, 2 weeks ago.
I’m updating a site from jqWidgets 3.5 to 6.1, and noticed a weird change in vertical alignment of jqxTabs titles.
My first tab has a larger font-size than the rest. Tabs 2+ all seem to align with the top of the title in Tab 1 now, where they used to align with the bottom.
Aligning their vertical middles would be ideal, but aligning the bottom of all titles would work too.
You’re manually applying Inline CSS to your tabs. That’s why the vertical alignment is different. If you manually change a CSS setting, then I would suggest you to put additional CSS settings in your code for the rest of the tabs.
The goal is to have the font in the first tab larger than the font in the rest of the tabs. Are you saying that they all have to be the same font size?
In the old version of jqWidgets I was using (v3.5), a margin appeared above the text in tabs 2 and 3, which moved the tab title so that it was aligned with the larger text in tab 1.
You can achieve similar behavior adding CSS to the other tabs with margins, paddings, top CSS properties. If you’re targeting newer web browsers, you can also use Flex-Box layout.
You must be logged in to reply to this topic.