uikit - tips for efficiently handling a large number of tabs by using overflow instead of displaying them all

Currently, when I have a long list of tabs, they are stacked on top of each other instead of overflowing and creating a scrollbar. I find this design unappealing and I'm looking for a way to make them overflow.

for (let i = 0; i < 20; i++)
{
  $("#tabs").append(`
    <li><a href="">test</a></li>
  `);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/css/uikit.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id='tabs' class="uk-tab" data-uk-tab="{connect:'#content'}" style="overflow-x: scroll; ">
</ul>

Answer №1

Apply the flex-wrap: nowrap and max-width properties to the #tabs element, as shown below:

#tabs {
  flex-wrap: nowrap;
  max-width: 10000px;
}

Check out the example snippet provided:

for (let i = 0; i < 20; i++)
{
  $("#tabs").append(`
    <li><a href="">test</a></li>
  `);
}
#tabs {
  flex-wrap: nowrap;
  max-width: 10000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/css/uikit.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id='tabs' class="uk-tab" data-uk-tab="{connect:'#content'}" style="overflow-x: scroll; ">
</ul>

Hopefully, this solution is useful for you!

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

The search filter on the bootstrap card failed to display the intended image

When I am searching for a specific image by name, the rest of the row's name keeps showing up. However, I only want to display the data relevant to my search. See the image below: Display: Select all data from the database. <?php $checkQuery = &qu ...

Deleting a li element within an AJAX response function can be accomplished by targeting the specific

I am attempting to remove the li element that is the parent of the clicked a element. Here is the code I am using: function vanish(id_arg){ $.ajax({ url: "/vanish/", type: "POST", data: {id_to_delete: id_arg}, ...

Strip all href links from the page using basic HTML DOM manipulation

When using a simple HTML parser or simple_html_dom.php to fetch a page, I am encountering an issue where I am only able to extract images, h1, h2, h3, and p elements from the page. My goal is to remove the href attributes from anchor tags, but I keep runni ...

The HTML marquee element allows text to scroll sideways or

Has the html marquee tag been phased out? If so, what are the current alternatives available for achieving a similar effect on modern browsers? I am looking to implement a basic marquee effect on my Joomla page. ...

Guide on retrieving a file through an HTTP request with restricted cross-origin access restrictions

Having some issues with downloading files from specific links, such as . My goal is to automate the download process for these redirected files. The challenge I'm facing is that trying to access the link directly through a web browser just gives me a ...

Challenges with the adjacent sibling combinator (+) in Internet Explorer

I've encountered an issue with the adjacent sibling combinator (+) in my CSS. It seems to function properly in Firefox but not in Internet Explorer. Here is the problematic code snippet: .mycheckbox:checked + label { // Implement a change on the la ...

Nested divs with overlapping background images

How can I incorporate background images in nested divs? <div id="templatemo_content" style="padding: 30px 30px 0 0; background: #fff url(images/foot_bg.png) no-repeat 0 bottom; z-index:10"> This particular div displays a grey-colored background imag ...

Retrieve data from the database using the information provided earlier

In my salary adding form, I am faced with the task of manually entering the rates for morning and night shifts for each company. Since every company has different rates, I would like to streamline this process by automatically retrieving the rates from t ...

By default, the select option in AngularJS will have a value of either an object or null

This block of code is located in the js file: $scope.ListOption = []; $scope.ListOption.push({ Value: "0", Name: Car }); $scope.ListOption.push({ Value: "1", Name: House }); Below is the corresponding HTML code: <select class="form-control" id="Categ ...

What is the way to create a "Table" that has horizontally wrapping rows in HTML5 and CSS3?

Presently, I am working with a table in HTML using tr and td tags. https://i.sstatic.net/MLDC0.jpg However, as the number of rows increase vertically, I face limitations due to lack of space. My goal is for the content to overflow horizontally like this: ...

Adjust the dimensions of the react-dropdown-tree-select element to better fit your needs

Hey there, I'm a beginner web developer currently working on a tree-based dropdown menu. Check out the documentation here To see it live in action, visit the example here I'm trying to adjust the height and width of the "Search/DropDown bar" in ...

Is there a way to configure this footer ad in my blogger so that it only displays for visitors who are unique?

I am seeking a solution to customize this "footer ad code" so that it only appears for unique visitors to my blog and does not reappear if the visitor has previously closed it. In essence, once a visitor closes this footer ad on one page of my website, ...

What are some ways to utilize JavaScript for expanding an HTML form?

I am in the process of developing a basic web application that allows users to create messages with attached files. multiple html file inputs using this javascript link: http://img38.imageshack.us/img38/4474/attachments.gif The functionality to "attach a ...

Saving a PHP form with multiple entries automatically and storing it in a mysqli database using Ajax

My form includes multiple tabs, each containing various items such as textboxes, radio buttons, and drop-down boxes. I need to save the content either after 15 seconds of idle time or when the user clicks on the submit button. All tab content will be saved ...

Retrieve the value of data from the dataset

I'm facing an issue assigning a string value to a variable depending on a boolean variable. After trying the following code: [Vue warn]: Error in data(): "TypeError: Cannot read property 'check' of undefined" TypeError: Cannot read proper ...

What are the steps to create custom pagination for tables?

Can you help me style a mui component in a similar way? https://i.sstatic.net/fxdvu.png I'm thinking of using the Pagination component and Select, but do you have any other suggestions? ...

Ways to automatically scroll through an associated HTML table

Managing two related tables that display the same information in different languages can be a tricky task. In my case, when I use the Key down or Key up functions, only one table scrolls while the other remains stationary. How can I synchronize their scrol ...

No visible changes from the CSS code

As I create a small HTML game for school, I'm facing an issue with styling using CSS. Despite my efforts to code while using a screen reader due to being blind, the styling of an element isn't being read out as expected. The content seems to be c ...

The issue persists with the customized Bootstrap carousel featuring thumbnails

By combining http://codepen.io/srkimir/pen/mGbrf and http://codepen.io/transportedman/pen/NPWRGq , I successfully created a fading carousel with thumbnails similar to the one in http://codepen.io/kikibres/pen/gpZoXz . However, when trying to implement ...

Ways to add a javascript file without the ability to access the head tag

In the web framework I'm currently working with, I can insert JavaScript into the page but don't have access to add content to the head tag. Is it possible for me to dynamically include a new JavaScript file in this scenario? What specific JavaSc ...