Creating a tab resizing effect similar to Chrome using only CSS

Question

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

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

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 3

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 4

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 5

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; 
}

Answer 6

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; 
}

Creating a tab resizing effect similar to Chrome using only CSS

Answer №1

Answer №2

Answer №3

Similar questions

The appearance of the drop-down menu in IE is not the same as in other

Ways to remove the line under a logo in HTML using CSS and Bootstrap

A guide on expanding an HTML table dynamically with MVC razor syntax

Modifying SASS variable values based on the presence of specific text in the page URL

Color-matching cells must be positioned in the same column within the gridbox consecutively

What are the steps to switch multiple CSS styles for creating a dark mode?

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

How to eliminate a hyperlink from an HTML element with the help of JQuery

Using percentages for CSS alignment and adjusting element widths

Is there a way to adjust the label size for a material ui TextField component?

Overflow on flex layout causes line breaks

"Implementing a search bar feature using HTML, CSS, and

When you zoom in or out, HTML5 elements styled with CSS will dynamically adjust

How can I customize the color of a date range in the jQuery date picker?

Ways to conceal a grid item in Material UI framework

Equal dimensions for all cards in the TailwindCSS gallery display

When text is added to div elements, they are mysteriously pushed downward. This strange phenomenon occurs with inline-block elements

Eliminating the final space in CSS flexbox layout

Difficulty encountered with changing font color on CSS

The Microsoft Booking feature is not being shown in the iframe