jquery UI tabs width 100%

Question

I have a need to use only 2 tabs in my application. So I want them to cover 100% of the w

Answer 1

With Flexbox it's flexible and easier:

.ui-tabs .ui-tabs-nav {
    display: flex;
}

.ui-tabs .ui-tabs-nav li {
    flex: 1;
    display: flex;
    /* If placed in a small width sidebar or something like that disabling nowrap will fix the overflow issue */
    white-space: normal;
}

.ui-tabs .ui-tabs-nav li a {
    flex: 1;
    /* If you want to align tab titles center */
    text-align: center;
}

Answer 2

Via CSS set:

.ui-tabs .ui-tabs-nav li {
    width:50%;
}

Note due to padding, margins, and borders you may need to reduce it to less than 50%.

Update: If you want to center the text in the tabs, you need to make two CSS changes (keeping the 50% change from above).

.ui-tabs .ui-tabs-nav li {
    width:50%;
    text-align: center;
}
.ui-tabs .ui-tabs-nav li a {
    display: inline-block;
    float: none;
    padding: 5px;
    text-decoration: none;
    width: 100%;
}

Note that you can tweak the padding as needed.