Jimi Wikman

Not sure If it is a mistake on my side or if it is related to widgets. I have added a block that have tabs using the standard code for tabs and for some reason it jumps down to the next widget block when selecting a tab and on mobile it does not switch over to the scroller and instead the tabs are crushed. The code for the tabs work well in templates, but seem to behave differently in widgets? <!-- Tabs --> <section class="jwseAtlassian-tabs" style="margin: 20px;"> <div class="ipsTabs ipsTabs--sticky ipsTabs--atlassian ipsTabs--stretch" id="elAtlassianTabs" data-ipstabbar="" data-ipstabbar-contentarea="#elAtlassianTabs_content"> <ul role="tablist"> <li> <a href="#p" id="elAtlassianTab_products" class="ipsTabs__tab ipsTabs__tab--active" role="tab" aria-selected="true">Atlassian products</a> </li> <li> <a href="#" id="elAtlassianTab_teamwork" class="ipsTabs__tab" role="tab" aria-selected="false">Teamwork</a> </li> <li> <a href="#" id="elAtlassianTab_leadership" class="ipsTabs__tab" role="tab" aria-selected="false">Leadership</a> </li> <li> <a href="#" id="elAtlassianTab_service" class="ipsTabs__tab" role="tab" aria-selected="false">Service</a> </li> <li> <a href="#" id="elAtlassianTab_software" class="ipsTabs__tab" role="tab" aria-selected="false">Software</a> </li> <li> <a href="#" id="elAtlassianTab_product" class="ipsTabs__tab" role="tab" aria-selected="false">Product</a> </li> </ul> </div> <!-- Scrollers --> <div class="ipsTabs__scrollers" data-role="tabScrollers"> <button data-direction="prev" type="button" aria-hidden="true" tabindex="-1" hidden=""><i class="fa-solid fa-angle-left" aria-hidden="true"></i></button> <button data-direction="next" type="button" aria-hidden="true" tabindex="-1" hidden=""><i class="fa-solid fa-angle-right" aria-hidden="true"></i></button> </div> <!-- Content --> <div id="elAtlassianTabs_content" class="ipsTabs__panels ipsTabs__panels--atlassian"> <div id="elAtlassianTab_products_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_products"> {block="atlassian-products-products-intro"} </div> <div id="elAtlassianTab_teamwork_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_teamwork"> {block="atlassian-products-teamwork"} </div> <div id="elAtlassianTab_leadership_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_leadership"> {block="atlassian-products-leadership"} </div> <div id="elAtlassianTab_service_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_service"> {block="atlassian-products-service"} </div> <div id="elAtlassianTab_software_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_software"> {block="atlassian-products-software"} </div> <div id="elAtlassianTab_product_panel" class="ipsTabs__panel" role="tabpanel" aria-labelledby="elAtlassianTab_product"> {block="atlassian-products-product"} </div> </div> </section>

If I want to use the Folder structure to show a navigation tree using the Folder Tree widget, I can't actually show a tree that looks good because folder names are automatically turned into lower caps and gaps have a dash. So I want to display Atlassian Sections ...but the output is atlassian-sections