2
 Followers
9
 Likes

Improvement on Navigation/Tabs in SilkUI

On our radar
Good morning,

I am using the SilkUI Navigation/Tabs and I think that there is a need for improvement in the CSS.
The tabs are not in the same size and their size also changes when they become active and inactive.

I think that it would be much better if all tabs had the same size and the size would not change when the tabs changes from active to inactive and vice versa.

See picture for better understanding.





Yours sincerely,
Daníel Benediktsson.
Created on 17 Sep 2015
Comments (5)

Hey

Exactly how to make them equal! I think there has to be a solution otherwise it is not very useful. 

Ashish



Merged this idea with 'Navigation Tabs in Silk UI Framework should be flexible to allow the width of the tabs' (created on 2016-08-24 21:49:22 by Ravi V)

Most of the times our clients are not liking the navigation tabs which take the full width of the available space. Instead they want to see only fixed width of the tab names.

For example if there are only three tabs labeled as SD, HD, 3D movie formats, current navigation tabs take full width of the available space and does not look very good in UI.



Instead if there is easy way to fix the widths of the navigation tabs, it would look nice like this



Merged from 'Navigation Tabs in Silk UI Framework should be flexible to allow the width of the tabs' (idea created on 2016-08-24 21:49:22 by Ravi V), on 2018-04-23 14:09:16 by Dinis Carvalho

Hi Ravi,

I am not sure if this is answered already, but it should be possible to change the CSS of the tab to a percentage of the screen width; something like;

SyntaxEditor Code Snippet

.Tabs__tab {
    float: left;
    vertical-align: middle;
    padding-bottom: 5px;
    padding-left: 10px;
    border-right-width: 0px;
    border-right-style: initial;
    border-right-color: initial;
    display: table-cell;
    padding-top: 5px;
    padding-right: 10px;
    text-align: center;
    width: 20%;
}

For smaller screens you would however need to use media queries to ensure the width.



Merged from 'Navigation Tabs in Silk UI Framework should be flexible to allow the width of the tabs' (idea created on 2016-08-24 21:49:22 by Ravi V), on 2018-04-23 14:09:16 by Dinis Carvalho

Hi Ravi,

I am not sure if this is answered already, but it should be possible to change the CSS of the tab to a percentage of the screen width; something like;

SyntaxEditor Code Snippet

.Tabs__tab {
    float: left;
    vertical-align: middle;
    padding-bottom: 5px;
    padding-left: 10px;
    border-right-width: 0px;
    border-right-style: initial;
    border-right-color: initial;
    display: table-cell;
    padding-top: 5px;
    padding-right: 10px;
    text-align: center;
    width: 20%;
}

For smaller screens you would however need to use media queries to ensure the width.



Merged from 'Navigation Tabs in Silk UI Framework should be flexible to allow the width of the tabs' (idea created on 2016-08-24 21:49:22 by Ravi V), on 2018-04-23 14:09:16 by Dinis Carvalho
views
256
Followers
2