Creating a tab resizing effect similar to Chrome using only CSS

I am attempting to design tabs that can dynamically resize similar to how Chrome tabs behave. However, I am uncertain if achieving this functionality is possible without relying on JavaScript.

Browser compatibility is not a concern for me; my main goal is to determine if it can be accomplished using only HTML and CSS/CSS3.

Here are the requirements:

  • The tabs should never expand wider than the text they contain
  • When the rightmost tab reaches the edge of the window during resizing, the tabs should begin to shrink (ideally starting with the widest tab)
  • The active tab must maintain its size and not shrink
  • As the tabs decrease in width, the text should be truncated with an ellipsis
  • The tabs should stop shrinking once they reach a minimum width that I specify (preventing them from disappearing entirely)

Is it feasible to achieve this using properties like display: box; and box-flex: 1;? I have been unable to implement it successfully thus far. While I have managed to accomplish this with JavaScript, the performance isn't as optimal as desired for our large web application.

So, any CSS experts out there willing to take on the challenge? If there's a way to achieve this with minimal reliance on JavaScript, I am also open to exploring those options.

Thank you everyone!

css

Answer №1

If you want to closely mimic Chrome's behavior, consider using flexbox...

body {
  font: 14px/140% 'Arial', sans-serif;
}

ul {
  background-color: #f0f0f0;
  display: -webkit-flex;
  padding: 15px 10px 0 10px;
}

ul li {
  -webkit-flex: 1;
  background: #ccc;
  padding: 12px 18px 8px 18px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 170px;
  min-width: 60px;
  border: solid #999 1px;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  text-overflow: ellipsis;  
}

http://jsfiddle.net/b23lp/

​​However, achieving your specific requirements with CSS alone may not be feasible. Additionally, maintaining the 'active' tab in an expanded state may lead to a non-standard user experience as the tab positions will change upon each click.

Answer №2

By adding an extra <span> element and utilizing the CSS property display: table-cell, I enhanced Duopixels' answer. This approach ensures better cross-browser support and fallback options. Check out the demo at http://jsfiddle.net/w34nm/ (Compatible with IE8+, Firefox 10, Chrome 17)

Additionally, it is advisable to employ JavaScript for dynamically setting the appropriate width values for the list items.

Answer №3

Initially, it's important to understand that tabs in Chrome do not adjust size individually but rather uniformly based on available space. (As per MDN, achieving your desired layout can be done by:

To ensure XUL elements within a box are of equal size, set the equalsize attribute of the container to always. This attribute does not have a CSS equivalent.

It would be beneficial to provide a visual representation of your requirements as some aspects were unclear to me.

In any case, I've put together a demonstration here. Please let me know if it meets your needs.

ul {
    display: -webkit-box; 
    width: 500px; 
    background: lightgray; 
    text-align: left;
}
li {
    background: gray; 
    text-align: center; 
    height: 24px; 
    -webkit-box-flex: 1; 
    min-width: 30px; 
    max-width: 100px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

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 "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

I am currently working on an e-commerce website with a shopping cart feature. The cart displays the number of items added to it, which increases by one when 'Add to Cart' is clicked and decreases by one when 'Remove' is clicked. However ...

javascripthtmlcss

Displaying information collected from a submission form

I am in the process of designing a cheerful birthday card and I need to transfer data from a form to the birthday card page. How can I take information from the first div (which contains the form) and display that data in the second div? <!DOCTYPE ...

javascripthtmlcss

Eliminate styling from text within an HTML document

I'm currently working on removing text decorations from my text. I managed to remove the underline, but when I hover over the text, the color still appears. How can I get rid of this color as well? Take a look at the code below: messbox { backgr ...

htmlcss

Tracking the progress of reading position using Jquery within an article

Here is an example of a reading progress indicator where the width increases as you scroll down the page: http://jsfiddle.net/SnJXQ/61/ We want the progress bar width to start increasing when the article content div reaches the end of the article c ...

javascriptjqueryhtmlcssscroll

A guide on layering .ogg video with .png image using HTML5 and CSS3

I am having difficulty achieving the desired effect, even when using z-index and position:absolute. My goal is to overlay a .png image on top of a video, while still allowing the transparent parts of the .png file to reveal the video playing in the backg ...

htmlcssogg

All elements on my webpage are enhanced with a CSS filter

I have a button centered on my page, but the CSS filter I applied to the HTML tag is also affecting the button. How can I prevent this from happening? HTML <body> <div class="button"> <a href="#">START EXPERIENCE</a> ...

htmlcss

As the number of lines increases by x%, CSS gradients gradually fade away during the generation process

Is there a way to create a gradient that displays a red line every x% without the colors fading into white? As I add more lines, the red stripes seem to lose their intensity and blend into a white background. The .four-stripes selector creates a good resu ...

htmlcssgradientlinear-gradients

I attempted to craft a toggle button by applying and removing an active class that I had previously designed, but unfortunately, it did not function as intended

Every time I click on a button, I keep encountering this error message. I am certain that my selector is correct, but I can't seem to figure out why I'm getting the Uncaught TypeError: Cannot read property 'classList' of undefined at HT ...

javascripthtmlcss

Missing Overlay in jQuery UI Dialog

I have integrated the jquery ui dialogue into my asp.net mvc application. I customized the styles related to ui dialogues by copying and modifying them. For the overlay, I used the following style: .ui-widget-overlay { background: #666666 url(im ...

jquerycssjquery-ui

Resizing an image within a div with automatic adjustment, centered and aligned to the bottom position

I'm really struggling to understand this concept and not making much progress. I have a background image that automatically scales to fit the window size. In front of it, I want to center an image fixed to the bottom of the page, while still being sca ...

csshtmlpositionmarginautoscaling

Webpack fails to handle CSS background images

I'm having trouble with my Webpack configuration as it's not processing CSS images set in the background property: background: url('./hero.jpg') no-repeat right; This is resulting in an error message that reads: ERROR in ./src/app/comp ...

javascriptcssnode.jsreactjswebpack

What is the best method for creating a vertical line separator with a hover effect in CSS?

Facing an issue with creating a vertical line separator in the navigation menu. While trying to add a vertical line separator to my navigation, I noticed that it does not get covered by the hover effect when hovering over the menu items. Please refer to t ...

csslineseparator

Steps for placing an image within the boundary of a rectangular div

My div has a width of approximately 730px and a height of 50px. I am looking to place an image at the bottom of the div, exactly where its height ends - after 50px. I have been considering a query to append the image at the bottom. One solution could be ...

csshtml

What could be causing Typed.js to not function properly in my situation?

Having an issue with typed.js not functioning properly. Here is the code snippet: <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.11.3.min.js"></script> <!-- Include all compiled plugins ...

javascriptjqueryhtmlcss

Is there a way to efficiently access checkboxes by their IDs and toggle classes without the need for redundant classes and functions?

In my current project, I have set up functionality to toggle classes on a table for hiding specific columns. This is determined by checkboxes selected by the user above the table, each checkbox having its own unique ID like "product_1", "product_2", and so ...

javascripthtmlcsscheckboxtoggle

What could be the reason for the child elements not being centered in a bootstrap navbar in this basic code example

Take a look at the display output by clicking here -> http://www.bootply.com/VtPTgKeCLO Below is the code snippet: <nav class="navbar navbar-fixed-bottom top-main-navbar"> <div class="container"> < ...

htmlcsstwitter-bootstrap

Is it possible to locate both the child and parent elements by their class names simultaneously using WebDriver?

When conducting a search on eBay that returns more than 50 listings, such as this example, the site displays the results in either grid or list format. Using the WebDriver tool, I am extracting prices by their class name: https://i.stack.imgur.com/dGNzw. ...

pythonhtmlcssseleniumselenium-webdriver

Container that can be scrolled under varying heights

Trying to structure some CSS in order to create a website that resembles the layout of a typical desktop application: Almost there, but struggling to make the scrollable panel stick to the bottom of the viewport and show a scrollbar instead of overflowing ...

htmlcss

Can the current website navigation be integrated into the blog script?

People might see me as a spoil sport for not using Wordpress, but I prefer a flatfile blog system for my small site. Currently, I am using the ozjournals-3.2 blog system. I need assistance in installing a header and site navigation on top of the blog page ...

cssheadernavigationblogs

Ways to create a back-and-forth transition across a sequence

Is it possible to create an animation that changes the width of an element once, then reverts back after a pause? I want this transition to occur over a three-second interval followed by a two-second delay. How can I achieve this? Below is the code I have ...

javascriptjquerycsstransition