jQuery Vertical Tabs with content inside tabs longer than the tab width is displayed

After finding inspiration from this tutorial on Stack Overflow about creating vertical tabs using jQuery (Vertical Tabs (stackoverflow), I successfully implemented vertical tabs.

HTML

<div id="ProductTabs" style="height:685px;overflow:scroll;">
    <ul>
        <li><a href="#tabs-1">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-0"></span></a></li>
        <li><a href="#tabs-2">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-1"></span></a></li>
        <li><a href="#tabs-3">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-2"></span></a></li>
        <li><a href="#tabs-4">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-3"></span></a></li>
        <li><a href="#tabs-5">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-4"></span></a></li>
        <li><a href="#tabs-6">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-5"></span></a></li>
        <li><a href="#tabs-7">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-6"></span></a></li>
        <li><a href="#tabs-8">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-7"></span></a></li>
        <li><a href="#tabs-9">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-8"></span></a></li>
        <li><a href="#tabs-10">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-9"></span></a></li>
        <li><a href="#tabs-11">Quick long description extending beyond tab width<span title ="" class="glyphicon glyphicon-pushpin color-for-10"></span></a></li>
    </ul>
    <<div id="tabs-1">...</div>
    <<div id="tabs-2">...</div>
    <<div id="tabs-3">...</div>
    <<div id="tabs-4">...</div>
    <<div id="tabs-5">...</div>
    <<div id="tabs-6">...</div>
    <<div id="tabs-7">...</div>
    <<div id="tabs-8">...</div>
    <<div id="tabs-9">...</div>
    <<div id="tabs-10">...</div>
    <<div id="tabs-11">...</div>
</div>

CSS

.ui-tabs-vertical {
    width: 65em;
    display: flex;
}

    .ui-tabs-vertical .ui-tabs-nav {
        padding: .2em .1em .2em .2em;
        float: left;
        width: 12em;
        overflow:hidden;

    }

        .ui-tabs-vertical .ui-tabs-nav li {
            clear: left;
            width: 100%;
            border-bottom-width: 1px !important;
            border-right-width: 0 !important;
            margin: 0 -1px .2em 0;
        }

            .ui-tabs-vertical .ui-tabs-nav li a {
                clear:both;
                display:block;
            }

            .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
                padding-bottom: 0;
                padding-right: .1em;
                border-right-width: 1px;
            }

    .ui-tabs-vertical .ui-tabs-panel {
        padding: 1em;
        float: right;
        width: 51em;
    }

Script

    $(function () {
        $("#ProductTabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#ProductTabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });

I am currently facing an issue with wrapping long text inside individual tabs. So far, I have tried various styles like overflow: hidden in CSS along with others such as display: flex and text-wrap: normal without success.

htmlcssjquery-ui-tabs

Answer №1

Implemented the following modification (white-space:normal;) :

CSS

.ui-tabs-vertical .ui-tabs-nav li {
    white-space:normal;
    clear: left;
    width: 100%;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px .2em 0;
}

also

.ui-tabs-vertical .ui-tabs-nav li a {
    max-width: 12em;
    display: block;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to adjust table, row, and cell heights in Outlook template due to HTML/CSS formatting issues

I'm struggling to make the height of the leftmost (commented) nested table adjust automatically based on the content in the right section. It displays correctly in Chrome, but does not stretch in Word/Outlook. Any ideas on how to fix this for Word/Ou ...

htmlcssoutlook

Can we access an element within the document using its context?

One common method to access an element is by using its id: <div id="myId"></div> <script type="text/javascript"> $(document).ready(function(){ $('#myId').something(); }); </script> However, there are inst ...

javascriptjqueryhtml

Material-UI: Eliminating linkOperator functionality in data-grid

Is there a way to completely eliminate the linkOperator UI from the filter panel? I managed to move pagination to the top of the table using Material-UI, but can I achieve the same for the "Operators" menu programmatically? ".MuiDataGridFilterForm-linkOpe ...

cssreactjsmaterial-ui

The primary section does not occupy any vertical area

I am currently working on a new design that includes a header, side menu, and footer within the main section. My goal is to have the main section fill the remaining space with a minimum height, pushing the footer to the bottom of the page. I want the mai ...

csstwitter-bootstraplayoutflexboxbootstrap-5

Creating a visual list in a React JS component with images and text

Hey there, I'm new to react js and I'm looking to create a list with images and text using html, css, and bootstrap. The list should include song images and have options for download and liking them after the user clicks on three dots. I've ...

htmlcssreactjs

Dragging a hyperlink onto the web browser using jQuery's drag functionality

Seeking a solution for my small script that allows users to drag a link and also drop it onto the browser bar for bookmarking or sharing. How can I achieve this functionality? Check out an example of one of the drag functions I currently utilize: http:/ ...

javascriptjquerycssjquery-uigoogle-chrome

Challenges faced when integrating Angular with Bootstrap elements

I am currently in the process of developing a website using Angular 12, and although it may not be relevant, I am also incorporating SCSS into my project. One issue that I have encountered pertains to the bootstrap module, specifically with components such ...

htmlangularbootstrap-5

CSS: Implement pause functionality for animations with a timer

I'm working on a timer implementation that allows users to start the timer and pause or continue it whenever they want. I faced a challenge when trying to pause the SVG animation. I tried following this article, but it didn't work as expected. ...

javascripthtmlcsssvgcss-animations

Using jQuery to load content into a jQuery UI dialog box

I am looking to implement a pop-up that displays content from another asp page. To achieve this, I am using jquery.load to load the page into a div and jquery-ui.dialog. This is my code: <div id="dialog"></div> Inside the document ready fun ...

jqueryhtmlasp.netajaxjquery-ui

`The universal functionality of body background blur is inconsistent and needs improvement.`

I've developed a modal that blurs the background when the modal window is opened. It's functioning flawlessly with one set of HTML codes, but encountering issues with another set of HTML codes (which seems odd considering the identical CSS and Ja ...

javascripthtmlcssarraysbootstrap-4

While testing my Bootstrap 3 website, I noticed that the hamburger menu was functioning correctly with the local file. However, once I hosted the site on GitHub Pages, the navbar stopped working

I recently created a test site using Bootstrap 3 (). Strangely, the hamburger menu doesn't seem to be working on this site. However, when I open the local file, the hamburger menu functions properly. Can anyone provide any insights or solutions regard ...

javascripthtmljquerycsstwitter-bootstrap

Is there a way to replace the standard Apache login/password popup box with a customized one using a combination of JavaScript, HTML

Is there a way to customize the default Apache login box with a custom design using JavaScript, HTML, and PHP? Thank you! ...

phpjavascripthtmlapache

multifunctioning javascript

Initially, I assumed that both the if and else blocks were executed. However, after adding a debugger to the code, I was puzzled as to why my code was running more than once. function Submit(form) { var timer_starttime = document.getElementById("timer ...

javascripthtmlajax

Arranging DIV elements into rows and columns within a table

After working all night to fix a problem, my goal is to create this timetable: https://i.sstatic.net/dAt1J.png Specifically, I'm struggling to find a solution for rows 5, 6, and 7 in the first column. The image is from a program that only runs in IE ...

phphtmlcssbootstrap-4

Text input field that adjusts its width based on content and remains

I am attempting to design a div that contains a fluid-width textarea. The div should have a width of at least 3em, maximum of 12em, and adjust accordingly to the width of the textarea. I have successfully implemented this. Check out the fiddle. However, w ...

javascripthtmlcss

Enable Element Blocks Content Below When Toggled

Is there a way to make a toggle element completely block out all content below it? I attempted to set the width and height to 100%, but it ended up cutting off the content inside the toggle element. ...

htmljquerycsstoggle

What could be causing the bootstrap dropdown-menu to malfunction?

I can't seem to find the minor mistake in this code I'm working on. I've been following the instructions provided in an edureka guide, which can be found here: https://youtu.be/jeZ-URjZM_M?t=978 Here is the code snippet: <div class=" ...

htmlbootstrap-4

Tips for toggling the radio button value to either checked or unchecked state

<input type="radio" name="imgsel" value="" checked /> I am looking to have a radio button that is initially checked with a value of 'present'. When the button is unchecked, I want the value to change to &apos ...

javascripthtml

The behavior of flex with overflow and bootstrap navbar varies across Firefox, Chrome, and Safari

When I view the snippet below in Firefox, I notice that the div with the class h-100 is taking up the entire page height (100vh), resulting in an unnecessary second scroll bar due to the added height of the nav. What I really want is for only the div with ...

htmlcssfirefoxflexboxbootstrap-4

Using jQuery to add or remove multiple classes at once

My navigation tabs use jQuery to add and remove classes for the active tab. However, I'm facing an issue where the active class is not removed when a new tab is clicked or when the user scrolls to a new section. Please refer to the following gist for ...

jqueryhtmlcss