jqueryhtmlcsstabssharepoint-2010
Move text to bottom of tabs without changing HTML
I need to move single lines of text to the bottom of the tabs. When the tab has a single line of text, the text is at the top now. I need to move it down to the bottom and am having trouble, based on the HTML hierarchy, finding CSS that works. The CSS for this can completely change, but this HTML code cannot change. We want the tab to be the width they are now, 122px, and a min-height of 40px. All tabs need to be at least 40px high, but can go higher.
I am using IE9 and SharePoint 2010, so it is dynamic and the IE9 limits the code I can use. Because the tabs aren’t static, I have to treat each tab as if it is going to be one line of text or multiple lines of text. The code needs to work on all the tabs no matter if it is one line, two lines, three lines, etc.
I tried to do this in jQuery, but it doesn't work: http://jsfiddle.net/Lance_Bitner/d7a2st79/
.ui-tabs{
background: none;
margin-top:25px;
padding:0px;
border:0px transparent none;
}
.ui-tabs .ui-tabs-nav {
background:rgb(106, 134, 156);
padding:10px 0px 0px 13px;
/*border-top:1px #b5c3cc solid;*/
}
.ui-tabs .ui-tabs-nav li{
border-radius: 0px;
margin-bottom: -2px;
}
.ui-tabs .ui-tabs-nav li a{
font-family:"Cabin", Arial;
font-size:13px;
font-weight:bold;
background:rgb(95, 120, 140);
color:#ffffff;
width:120px;
text-align:center;
padding:1px 0px 7px 0px;
/*border:1px #a0aeb9 solid;*/
white-space:normal;
-ms-word-wrap: break-word;
}
.ui-tabs .ui-tabs-nav li a:hover{
text-decoration:underline;
}
.ui-tabs .ui-tabs-nav li a:active{
background:#ffffff;
color:#1e3069;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a{
background:#ffffff;
color:#1e3069;
}
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a{
}
.ui-tabs .ui-tabs-panel{
background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
overflow:hidden;
padding:20px 20px 20px 20px;
clear:both;
border:0px transparent none;
border-top:2px #cccccc solid;
/*border-left:1px #a0aeb9 solid;
border-right:1px #a0aeb9 solid;*/
}
.ui-tabs-nav
{
border-radius: 0px;
}
.ui-tabs ul.ui-widget-header
{
border-bottom: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active
{
border-bottom-color: #ffffff;
}
.ui-tabs .ui-tabs-nav li
{
border: 0;
display: table-cell;
height: 100%;
float: none;
background-color: rgb(106, 134, 156);
padding: 0px;
margin: 0px 0px -2px 0px;
}
.ui-tabs .ui-tabs-nav li a
{
padding: 7px 0 9px 0;
border: 1px solid #cccccc;
border-bottom-width: 2px;
margin-bottom: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a
{
border-bottom: 2px solid #ffffff;
}
.ui-tabs .ui-tabs-nav
{
margin-bottom: -2px;
/* display:table;*/
border-spacing: 5px 0px;
padding-left: 0px;
padding-top: 5px;
/* width: 100%;*/
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active
{
padding: 0px;
margin: 0px 0px -2px 0px;
}
/*tabs*/
.tabs .tab-nav .active a {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255,255,255);
background-image: none;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat: repeat;
background-size:auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #ccc;
border-left-style:solid;
border-left-width: 0px;
border-right-color:#ccc;
border-right-style:solid;
border-right-width: 0px;
border-top-color: #ccc;
border-top-style:solid;
border-top-width:0px;
color:#1e3069;
margin-bottom:-2px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 7px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 9px;
}
ol ul
{
list-style-image:none;
list-style-position:outside;
list-style-type: none;
}
.tabs tab-nav a{
width:120px;
text-align: center;
position:relative;
}
a{
text-decoration:none;
}
.tabs ul
{
margin-top:-25px;
background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
overflow:hidden;
clear:both;
border:0px transparent none;
border-top:2px #cccccc solid;
/*border-left:1px #a0aeb9 solid;
border-right:1px #a0aeb9 solid;*/
background:rgb(106, 134, 156);
padding:10px 0px 0px 13px;
}
.tabs ul li
{
display: inline;
margin: 0px;
margin-right: 2px;/*distance between tabs*/
font: normal 12px Verdana;
}
.tabs ul li a
{
font-family:"Cabin", Arial;
font-size:13px;
font-weight:bold;
background:rgb(95, 120, 140);
color:#ffffff;
width:120px;
text-align:center;
padding:1px 0px 7px 0px;
border:1px #a0aeb9 solid;
white-space:normal;
-ms-word-wrap: break-word;
}
.tabs ul li a:hover
{
text-decoration: underline;
color: rgb(95, 120, 140);
background:white;
}
.tabs ul li.selected a
{
position: relative;
top: 0px;
font-weight:bold;
background: #FFF;
border: 1px solid #AAA;
border-bottom: 1px solid #FFF;
color: #000;
}
.tabs ul li.selected a:hover, .tabs ul li.selected a:hover
{
text-decoration: none;
}
div.tabs
{
border: 0px solid #CCC; padding: 0px;
border-top-color:#AAA;
background-color:#FFF;
border-radius: 0 0 0px 0px;
}
.tabs .tabs li a:active{
background:#ffffff;
color:#1e3069;
}
.home .tabs .tab-container{
background-attachment:scroll;
background-clip: border-box;
background-color:transparent;
background-image: url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat:no-repeat;
background-size:auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: currentColor;
border-left-style:none;
border-left-width: 0px;
border-right-color: currentColor;
border-right-style:none;
border-right-width: 0px;
border-top-color: #cccccc;
border-top-style:solid;
border-top-width: 2px;
clear: both;
color:#333;
font-family:"Arial";
font-size:100%;
line-height: 17px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color:invert;
outline-style: none;
outline-width: 0px;
overflow: hidden;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
vertical-align: baseline;
}
.tabs, .ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all
{
border:0px;
padding:0px;
margin:0px;
}
/*tabs*/
.tabs .tab-nav .active a {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255,255,255);
background-image: none;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat: repeat;
background-size:auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #ccc;
border-left-style:solid;
border-left-width: 0px;
border-right-color:#ccc;
border-right-style:solid;
border-right-width: 0px;
border-top-color: #ccc;
border-top-style:solid;
border-top-width:0px;
color:#1e3069;
margin-bottom:-2px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 7px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 9px;
}
ol ul
{
list-style-image:none;
list-style-position:outside;
list-style-type: none;
}
.tabs tab-nav a{
width:120px;
text-align: center;
position:relative;
}
a{
text-decoration:none;
}
.tabs ul
{
margin-top:-25px;
background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
overflow:hidden;
clear:both;
border:0px transparent none;
border-top:2px #cccccc solid;
/*border-left:1px #a0aeb9 solid;
border-right:1px #a0aeb9 solid;*/
background:rgb(106, 134, 156);
padding:10px 0px 0px 13px;
}
.tabs ul li
{
display: inline;
margin: 0px;
margin-right: 2px;/*distance between tabs*/
font: normal 12px Verdana;
}
.tabs ul li a
{
font-family:"Cabin", Arial;
font-size:13px;
font-weight:bold;
background:rgb(95, 120, 140);
color:#ffffff;
width:120px;
text-align:center;
padding:1px 0px 7px 0px;
border:1px #a0aeb9 solid;
white-space:normal;
-ms-word-wrap: break-word;
}
.tabs ul li a:hover
{
text-decoration: underline;
color: rgb(95, 120, 140);
background:white;
}
.tabs ul li.selected a
{
position: relative;
top: 0px;
font-weight:bold;
background: #FFF;
border: 1px solid #AAA;
border-bottom: 1px solid #FFF;
color: #000;
}
.tabs ul li.selected a:hover, .tabs ul li.selected a:hover
{
text-decoration: none;
}
div.tabs
{
border: 0px solid #CCC; padding: 0px;
border-top-color:#AAA;
background-color:#FFF;
border-radius: 0 0 0px 0px;
}
.tabs .tabs li a:active{
background:#ffffff;
color:#1e3069;
}
.home .tabs .tab-container{
background-attachment:scroll;
background-clip: border-box;
background-color:transparent;
background-image: url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat:no-repeat;
background-size:auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: currentColor;
border-left-style:none;
border-left-width: 0px;
border-right-color: currentColor;
border-right-style:none;
border-right-width: 0px;
border-top-color: #cccccc;
border-top-style:solid;
border-top-width: 2px;
clear: both;
color:#333;
font-family:"Arial";
font-size:100%;
line-height: 17px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color:invert;
outline-style: none;
outline-width: 0px;
overflow: hidden;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
vertical-align: baseline;
}
.tabs, .ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all
{
border:0px;
padding:0px;
margin:0px;
}
div.tabs {
margin-left:-26px;
/*margin-left:-45px;*/
width:110%;
/*width:115%;*/
}
/* UL for TABS*/
div.ui-tabs ul > li {
padding-left:0px;
list-style-position:outside;
list-style-type:disc;
list-style:disc;
line-height:28px;
padding:0px;
border:0px 0px 0px 0px;
margin:0px 0px 0px 15px;
display:list-item;
vertical-align:text-bottom;
}
div.ui-tabs ul ul {
padding-left:0px;
list-style-position:outside;
list-style:disc;
list-style-type:disc;
line-height:28px;
letter-spacing:0px;
padding:0px;
border:0px;
margin:0px 0px 0px 0px;
text-indent:30px;
display:list-item;
}
/*Tabs*/
div.ui-tabs .ui-tabs-nav li a {
text-align:center;
width:122px;
border-left:0px;
padding-left:0px;
margin-left:5px;
/*margin-left:0px;*/
text-indent:0px;
line-height:20px;
border-left-color:silver;
border-left-width:1px;
border-left-style:solid;
}
div.ui-tabs-panel table{
margin-left:15px;
border-right-width:0px;
border-color:transparent;
border-right:0px;
}
div.ui-tabs-panel table td{
padding:0 15px 0 0;
}
.ui-tabs .ui-tabs-panel{
border:0px 0px 0px 0px;
margin-right:75px;
padding-left:40px;
}
.ui-tabs .ui-tabs-nav{
margin-left:15px;
}
.ui-tabs {
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
float: left;
padding: .5em 1em;
text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
}
div.ui-tabs .ui-tabs-nav li a{
min-height:40px !important;<div class="tabs contentTabs ui-tabs ui-widget ui-widget-content ui-corner-all"><ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"><li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabIndex="0" aria-labelledby="ui-id-1" aria-selected="true" aria-controls="tabs-1"><a id="ui-id-1" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-1">Initiatives and Services</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-2" aria-selected="false" aria-controls="tabs-2"><a id="ui-id-2" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-2">12345678912345678</a></li>
<li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-3" aria-selected="false" aria-controls="tabs-3"><a id="ui-id-3" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-3">Latest Reports</a></li></ul>
<div aria-hidden="false" aria-expanded="true" id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-labelledby="ui-id-1">
Solution
$(function(){
$('.ui-tabs-anchor').each(function(){
$(this).html('<div>' + $(this).text() + '</div>');
});
}).ui-tabs{
background: none;
margin-top:25px;
padding:0px;
border:0px transparent none;
}
.ui-tabs .ui-tabs-nav {
background:rgb(106, 134, 156);
padding:10px 0px 0px 13px;
/*border-top:1px #b5c3cc solid;*/
}
.ui-tabs .ui-tabs-nav li{
border-radius: 0px;
margin-bottom: -2px;
}
.ui-tabs .ui-tabs-nav li a{
font-family:"Cabin", Arial;
font-size:13px;
font-weight:bold;
background:rgb(95, 120, 140);
color:#ffffff;
width:120px;
text-align:center;
padding:1px 0px 7px 0px;
/*border:1px #a0aeb9 solid;*/
white-space:normal;
-ms-word-wrap: break-word;
}
.ui-tabs .ui-tabs-nav li a:hover{
text-decoration:underline;
}
.ui-tabs .ui-tabs-nav li a:active{
background:#ffffff;
color:#1e3069;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a{
background:#ffffff;
color:#1e3069;
}
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a{
}
.ui-tabs .ui-tabs-panel{
background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
overflow:hidden;
padding:20px 20px 20px 20px;
clear:both;
border:0px transparent none;
border-top:2px #cccccc solid;
/*border-left:1px #a0aeb9 solid;
border-right:1px #a0aeb9 solid;*/
}
.ui-tabs-nav
{
border-radius: 0px;
}
.ui-tabs ul.ui-widget-header
{
border-bottom: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active
{
border-bottom-color: #ffffff;
}
.ui-tabs .ui-tabs-nav li
{
border: 0;
display: table-cell;
height: 100%;
float: none;
background-color: rgb(106, 134, 156);
padding: 0px;
margin: 0px 0px -2px 0px;
}
.ui-tabs .ui-tabs-nav li a
{
padding: 7px 0 9px 0;
border: 1px solid #cccccc;
border-bottom-width: 2px;
margin-bottom: 0px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a
{
border-bottom: 2px solid #ffffff;
}
.ui-tabs .ui-tabs-nav
{
margin-bottom: -2px;
/* display:table;*/
border-spacing: 5px 0px;
padding-left: 0px;
padding-top: 5px;
/* width: 100%;*/
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active
{
padding: 0px;
margin: 0px 0px -2px 0px;
}
/*tabs*/
.tabs .tab-nav .active a {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255,255,255);
background-image: none;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat: repeat;
background-size:auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #ccc;
border-left-style:solid;
border-left-width: 0px;
border-right-color:#ccc;
border-right-style:solid;
border-right-width: 0px;
border-top-color: #ccc;
border-top-style:solid;
border-top-width:0px;
color:#1e3069;
margin-bottom:-2px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 7px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 9px;
}
ol ul
{
list-style-image:none;
list-style-position:outside;
list-style-type: none;
}
.tabs tab-nav a{
width:120px;
text-align: center;
position:relative;
}
a{
text-decoration:none;
}
.tabs ul
{
margin-top:-25px;
background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
overflow:hidden;
clear:both;
border:0px transparent none;
border-top:2px #cccccc solid;
/*border-left:1px #a0aeb9 solid;
border-right:1px #a0aeb9 solid;*/
background:rgb(106, 134, 156);
padding:10px 0px 0px 13px;
}
.tabs ul li
{
display: inline;
margin: 0px;
margin-right: 2px;/*distance between tabs*/
font: normal 12px Verdana;
}
.tabs ul li a
{
font-family:"Cabin", Arial;
font-size:13px;
font-weight:bold;
background:rgb(95, 120, 140);
color:#ffffff;
width:120px;
text-align:center;
padding:1px 0px 7px 0px;
border:1px #a0aeb9 solid;
white-space:normal;
-ms-word-wrap: break-word;
}
.tabs ul li a:hover
{
text-decoration: underline;
color: rgb(95, 120, 140);
background:white;
}
.tabs ul li.selected a
{
position: relative;
top: 0px;
font-weight:bold;
background: #FFF;
border: 1px solid #AAA;
border-bottom: 1px solid #FFF;
color: #000;
}
.tabs ul li.selected a:hover, .tabs ul li.selected a:hover
{
text-decoration: none;
}
div.tabs
{
border: 0px solid #CCC; padding: 0px;
border-top-color:#AAA;
background-color:#FFF;
border-radius: 0 0 0px 0px;
}
.tabs .tabs li a:active{
background:#ffffff;
color:#1e3069;
}
.home .tabs .tab-container{
background-attachment:scroll;
background-clip: border-box;
background-color:transparent;
background-image: url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat:no-repeat;
background-size:auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: currentColor;
border-left-style:none;
border-left-width: 0px;
border-right-color: currentColor;
border-right-style:none;
border-right-width: 0px;
border-top-color: #cccccc;
border-top-style:solid;
border-top-width: 2px;
clear: both;
color:#333;
font-family:"Arial";
font-size:100%;
line-height: 17px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color:invert;
outline-style: none;
outline-width: 0px;
overflow: hidden;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
vertical-align: baseline;
}
.tabs, .ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all
{
border:0px;
padding:0px;
margin:0px;
}
/*tabs*/
.tabs .tab-nav .active a {
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255,255,255);
background-image: none;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat: repeat;
background-size:auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #ccc;
border-left-style:solid;
border-left-width: 0px;
border-right-color:#ccc;
border-right-style:solid;
border-right-width: 0px;
border-top-color: #ccc;
border-top-style:solid;
border-top-width:0px;
color:#1e3069;
margin-bottom:-2px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 7px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 9px;
}
ol ul
{
list-style-image:none;
list-style-position:outside;
list-style-type: none;
}
.tabs tab-nav a{
width:120px;
text-align: center;
position:relative;
}
a{
text-decoration:none;
}
.tabs ul
{
margin-top:-25px;
background:transparent url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
overflow:hidden;
clear:both;
border:0px transparent none;
border-top:2px #cccccc solid;
/*border-left:1px #a0aeb9 solid;
border-right:1px #a0aeb9 solid;*/
background:rgb(106, 134, 156);
padding:10px 0px 0px 13px;
}
.tabs ul li
{
display: inline;
margin: 0px;
margin-right: 2px;/*distance between tabs*/
font: normal 12px Verdana;
}
.tabs ul li a
{
font-family:"Cabin", Arial;
font-size:13px;
font-weight:bold;
background:rgb(95, 120, 140);
color:#ffffff;
width:120px;
text-align:center;
padding:1px 0px 7px 0px;
border:1px #a0aeb9 solid;
white-space:normal;
-ms-word-wrap: break-word;
}
.tabs ul li a:hover
{
text-decoration: underline;
color: rgb(95, 120, 140);
background:white;
}
.tabs ul li.selected a
{
position: relative;
top: 0px;
font-weight:bold;
background: #FFF;
border: 1px solid #AAA;
border-bottom: 1px solid #FFF;
color: #000;
}
.tabs ul li.selected a:hover, .tabs ul li.selected a:hover
{
text-decoration: none;
}
div.tabs
{
border: 0px solid #CCC; padding: 0px;
border-top-color:#AAA;
background-color:#FFF;
border-radius: 0 0 0px 0px;
}
.tabs .tabs li a:active{
background:#ffffff;
color:#1e3069;
}
.home .tabs .tab-container{
background-attachment:scroll;
background-clip: border-box;
background-color:transparent;
background-image: url('/Style%20Library/Images/branding/gradient-background-white.png') no-repeat scroll 0 0;
background-origin: padding-box;
background-position-x: 0px;
background-position-y: 0px;
background-repeat:no-repeat;
background-size:auto;
border-bottom-color: currentColor;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: currentColor;
border-left-style:none;
border-left-width: 0px;
border-right-color: currentColor;
border-right-style:none;
border-right-width: 0px;
border-top-color: #cccccc;
border-top-style:solid;
border-top-width: 2px;
clear: both;
color:#333;
font-family:"Arial";
font-size:100%;
line-height: 17px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color:invert;
outline-style: none;
outline-width: 0px;
overflow: hidden;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
vertical-align: baseline;
}
.tabs, .ui-tabs, .ui-widget, .ui-widget-content, .ui-corner-all
{
border:0px;
padding:0px;
margin:0px;
}
div.tabs {
margin-left:-26px;
/*margin-left:-45px;*/
width:110%;
/*width:115%;*/
}
/* UL for TABS*/
div.ui-tabs ul > li {
padding-left:0px;
list-style-position:outside;
list-style-type:disc;
list-style:disc;
line-height:28px;
padding:0px;
border:0px 0px 0px 0px;
margin:0px 0px 0px 15px;
display:list-item;
vertical-align:text-bottom;
}
div.ui-tabs ul ul {
padding-left:0px;
list-style-position:outside;
list-style:disc;
list-style-type:disc;
line-height:28px;
letter-spacing:0px;
padding:0px;
border:0px;
margin:0px 0px 0px 0px;
text-indent:30px;
display:list-item;
}
/*Tabs*/
div.ui-tabs .ui-tabs-nav li a {
text-align:center;
width:122px;
border-left:0px;
padding-left:0px;
margin-left:5px;
/*margin-left:0px;*/
text-indent:0px;
line-height:20px;
border-left-color:silver;
border-left-width:1px;
border-left-style:solid;
}
div.ui-tabs-panel table{
margin-left:15px;
border-right-width:0px;
border-color:transparent;
border-right:0px;
}
div.ui-tabs-panel table td{
padding:0 15px 0 0;
}
.ui-tabs .ui-tabs-panel{
border:0px 0px 0px 0px;
margin-right:75px;
padding-left:40px;
}
.ui-tabs .ui-tabs-nav{
margin-left:15px;
}
.ui-tabs {
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
padding: .2em;
}
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
list-style: none;
float: left;
position: relative;
top: 0;
margin: 1px .2em 0 0;
border-bottom-width: 0;
padding: 0;
white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
float: left;
padding: .5em 1em;
text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: -1px;
padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
}
div.ui-tabs .ui-tabs-nav li a{
min-height:40px !important;
position: relative;
}
div.ui-tabs .ui-tabs-nav li a > div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs contentTabs ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabIndex="0" aria-labelledby="ui-id-1" aria-selected="true" aria-controls="tabs-1">
<a id="ui-id-1" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-1">Initiatives and Services</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-2" aria-selected="false" aria-controls="tabs-2">
<a id="ui-id-2" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-2">Don't input too long text here</a>
</li>
<li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-3" aria-selected="false" aria-controls="tabs-3">
<a id="ui-id-3" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tabs-3">Latest Reports</a>
</li>
</ul>
</div>You can wrap text inside a by a div tag. Then use position: absolute;
div.ui-tabs .ui-tabs-nav li a {
position: relateive;
}
div.ui-tabs .ui-tabs-nav li a > div{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
You can use Jquery to update your HTML:
$(function(){
$('.ui-tabs-anchor').each(function(){
$(this).html('<div>' + $(this).text() + '</div>');
});
})
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices