I'll try to explain it as best as I can. I want to apply this principle to my own.
Tab Add Example
As you can see I'm adding 'tabs' to tab bar. When I add enough tabs to fill the whole tab bar, and I keep adding more, those tabs basically resize to fit the div. I don't want them to expand the div or to use the scroll bar to move among them. I want them to shrink within the div. You can see the exact example on the GIF I linked.
It should also behave the same on window resize.
Window Resize Example
Do you have any ideas on how to achieve this? I tried with JQuery but it was too much 'hard coding', it wouldn't work on resize, nor different screen resolutions.
HTML I want to apply:
<div class="l_tabs">
<div>
<ul id="myTab1" class="nav nav-tabs bordered">
<li class="tab-add"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
<li class="contentTab"></li>
</ul>
</div>
</div>
When I add new tab it adds this<li class="contentTab"></li>
JSFiddle
Any suggestions?
Answer: Use the CSS display Property You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
A div's height depends on its inner elements, in your example, the first input is having a height of 100px, so the div will have at least 100px height, ignoring spacing, boarder, padding. Setting max-height on the div will hint the rendering engine to limit the height, but doesn't necessarily work all the time.
The css rule: white-space: nowrap; will prevent your lines wrapping. Set a width of the error div to 100% and it will automatically fill the space available.
To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.
You can do this with Flexbox
, you just need to set flex-basis
$(".add").click(function() {
$(".tabs").append('<li class="tab">Lorem ipsum</li>');
})
$('.remove').click(function() {
$('.tab').last().remove();
})
.tabs {
display: flex;
list-style: none;
padding: 0;
}
.tab {
border: 1px solid black;
flex-basis: 200px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab">Lorem ipsum</li>
</ul>
<button class="add">Add Tab</button>
<button class="remove">Remove Tab</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With