Issue
I have tabs and I want them to have equal width, however make it fit the tab with the longest text.
What I do right now is, since I know the longest text tab, I manually set the width with rem
. But this is what happens if a new text is added with longer than designed text (watch in Full page):
.nav-link {
width: 12rem;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Tabs</title>
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active text-center"" href="#">Some Very Very Long Text</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"" href="#">Some Link</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"" href="#">Another Link</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"">Link</a>
</li>
</ul>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>
In this example, the long text makes the tab break a line because the width is fixed. Also in this case, the tab heights of the other tabs does not go down to fill the height, the just hang with spacing at the bottom. How can I take care of both these situations? (The equal width, and fit to height if no space for all the tabs and their text break line)
Solution
Not sure how this would be done with a pure css solution. I'm interested in seeing the grid approach that tacoshy mentioned.
But here's an approach that uses a bit of JS.
So what you can do is create a CSS variable called --link-width: max-content
. Basically each link will be wide enough to for it's content to fit in one line.
Then you can calculate the link that has the max width and set that value to the CSS variable. Since the variable is used on the nav-link
class, the new width gets applied to all the links.
Note: We're using offsetWidth
to calculate the width of the elements instead of clientWidth
because offsetWidth also accounts for the borders
function adjustLinkWidth() {
const navLinks = document.querySelectorAll('.nav-link')
let maxWidth = navLinks[0].offsetWidth
navLinks.forEach((link) => {
if (maxWidth < link.offsetWidth) {
maxWidth = link.offsetWidth
}
})
document.documentElement.style.setProperty('--link-width', maxWidth + 'px')
}
adjustLinkWidth()
:root {
--link-width: max-content;
}
.nav-link {
width: var(--link-width);
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Tabs</title>
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active text-center"" href="#">Some Very Very Long Text</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"" href="#">Some Link that is longer than the first link</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"" href="#">Another Link</a>
</li>
<li class="nav-item">
<a class="nav-link text-center"">Link</a>
</li>
</ul>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</body>
</html>
Although, as you can see in this example, if your tabs end up being too wide, they'll look really weird, so its probably better not to have all of them be the same width
Answered By - Omar Siddiqui
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.