Source: dist/css/library_boot.css, line 6212
9.4.1 UI Tabs Overflow
The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.
Source: dist/css/library_boot.css, line 6212
The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.
<div class="br_solid br_1 br_black-3">
<nav class="flex flex_row font_ui relative" id="tabOverflow" role="tablist">
<a class="disabled flex_row flex text_center bg_disabled bg_white br-r_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
<i class="flex_auto self_center far fa-chevron-left"></i>
</a>
<ul class="flex flex_auto flex_nowrap flex_row:md nav overflow_hidden font-size_up ul_none">
<li class="active nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a
id="ActiveLinkUI-tab"
data-bs-toggle="tab"
data-bs-target="#ActiveLinkUI"
role="tab"
aria-controls="ActiveLinkUI"
aria-selected="true"
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#">Active</a>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li id="LinkUI-tab" data-bs-toggle="tab" data-bs-target="#LinkUI" role="tab" aria-controls="LinkUI" aria-selected="true" class=" nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<span
class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
>Link</span>
</li> <li class="disabled nav-item relative p_3 p-x_4:md h:bg_black-3 br-l_1 br_black-3 br_solid flex_grow text_center bg_disabled opacity_disabled a:bg_accent-n1">
<a class="c_disabled h:undecorated expanded-click-area c_black-8 a:c_white-9 h:c_black "
href="#"
tabindex="-1"
aria-disabled="true">
Disabled</a>
</li> </ul>
<a class="disabled flex_row flex text_center bg_disabled bg_white br-l_1 br_black-3 br_solid c_black-8 c_disabled flex_auto flex_none h:bg_black-3 h:c_black h:undecorated nav-item opacity_disabled p-x_4:md p_3 relative text_center z_3">
<i class="flex_auto self_center far fa-chevron-right"></i>
</a>
</nav>
<div class="p_4 reading-typography tab-content br-t_1 br_solid br_black-3" id="nav-tabContent">
<div class="tab-pane fade show active" id="ActiveLinkUI" role="tabpanel" aria-labelledby="ActiveLinkUI">
<div class="">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
</div> </div>
<div class="tab-pane fade" id="LinkUI" role="tabpanel" aria-labelledby="LinkUI">
<div class="">
<h1>Lorem Ipsum</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<button class="btn btn-primary">Button</button>
</div> </div>
</div>
</div>