I am currently working on a Google module tab application. I have successfully added the tab control with drag and drop functionality within a specific area. However, I now need to limit the number of tabs displayed on the page. Regardless of the total count of tabs, if they exceed the size of the page, I want the extra tabs to be hidden. How can I implement this feature?
Attached below is a snapshot of my project output where tabs 8 and 9 are appearing on a separate line instead of staying in line with the rest of the tabs. I am looking for solutions to ensure that all tabs remain on the same line. Any suggestions or advice would be greatly appreciated.
To provide more context, here is a visual representation of the issue:
https://i.sstatic.net/hNzcw.jpg
The goal is to keep all tabs on the same line regardless of the window size. If the window is too small to accommodate all tabs, the additional tabs should be hidden. Conversely, if the window is large enough, all tabs should be visible to the user.
The HTML code for the buttons representing each tab is as follows:
<div class="limit">
<button data-tab="tab-1" class="button current">Car 1</button>
<button data-tab="tab-2" class="button">Car 2</button>
<button data-tab="tab-3" class="button">Car 3</button>
<button data-tab="tab-4" class="button">Car 4</button>
<button data-tab="tab-5" class="button">Car 5</button>
<button data-tab="tab-6" class="button">Computer</button>
<button data-tab="tab-7" class="button">Message</button>
<button data-tab="tab-8" class="button">Nature</button>
<button data-tab="tab-9" class="button">Power</button>
</div>
In terms of styling, I have defined CSS properties for both the parent container and button elements:
.parent {
position: relative;
margin: 20px;
width: 800px;
height: 40px;
}
.button {
position: relative;
left: 0;
display: inline;
width: 200px;
height: 75px;
background-color: lightgray;
font-size: large;
border-radius: 4px;
border: 1px solid #ccc;
margin: 0 10px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-o-transform: rotateX(30deg);
-ms-transform: rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}