thiru arasu thiru arasu - 1 month ago 6
CSS Question

If width of tabs exceeds the page hide extra tabs

My project is google module tab application. I added the tab control with drag and drop event within a limited area but the next requirement is that I have to limit the number of tabs viewed in page. The count of tabs does not matter. If it exceeds the page size I have to hide the extra tabs. How do I solve this?

Here I attached my snapshot for my project output but the tabs 8 and 9 are separated from first line and moved to the next line. I have to keep them all in the same line. How can I solve this issue? Can anyone show me a suggestions.

Here is a snapshot of the wrong output:

enter image description here

I have to keep all tabs in same line. If it exceeds the window size is small, the extra tabs need to be hidden. If the window size is large all tabs need to be visible to the user.

I wrote the tabs as buttons in a HTML file:

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


I am setting the CSS property for parent container and button elements as

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

Answer

Try with this:

See the jsfiddle drag the output.It's work's like your need

.limit {
 overflow:hidden;
  height:75px;
}
.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);
}
<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>

Comments