how to add same width on bootstrap dropdown menu item as parent item


Tags: jquery,html5,css3,twitter-bootstrap,drop-down-menu

Problem :

how to add same width on bootstrap dropdown menu item as parent item?

I have this menu

the html is

<header class="navbar navbar-purple navbar-static-top bs-docs-nav" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://pos.shalvasoft.tk/"><span class="first">ShalvaSoft</span> <span class="second">POS</span></a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown langs">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                        <span class="caret"></span>
                        <span id="selectedlang"> ქართული  <i class='flag-icon flag-icon-ge'></i></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li class="hidden"><a href="#" class="lang" data-link="ge">ქართული <i class='flag-icon flag-icon-ge'></i></a></li>
                        <li><a href="#" class="lang" data-link="ru">русский <i class='flag-icon flag-icon-ru'></i></a></li>
                        <li><a href="#" class="lang" data-link="en">English <i class='flag-icon flag-icon-us'></i></a></li>    
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>

and in css I tryed this code

.navbar-purple .dropdown-menu { background-color: rgba(155, 89, 182,0.8); min-width:118px;padding-top: 0; padding-bottom: 0;}
.navbar-purple .dropdown-menu > li > a { color: #FFFFFF; text-align: right !important; padding: 3px 5px 3px 0;}

but nothing happened becouse when the text of parent drop down is in Georgian the text size is larger than in English or in Russian so I tryed use jquery to check the size of the parent dropdown

var langwidth = $('.langs > a').width();
    if(langwidth > 70) {
        $('.navbar-purple .tmenu .dropdown-menu>li>a').css({
            'padding-left': (100 - langwidth + 2) + 'px',
            'padding-right': (100 - langwidth + 2) + 'px'
        });
    }

I cannot use if else statement every time becouse this bar is dinamicaly and may be in the future I need to add new item so the size will not be as I need

please help me

this is jsfiddle link

https://jsfiddle.net/giasoft/f0zsroaj/

and this is the page where is only this menu and 1 form only so you can change languages and check how it is displaying the drop down content.

http://pos.shalvasoft.tk/login/en

Thank you for future help.



Solution :

update toggle menu li tags with this html.

<li style="width:130px;" class="dropdown langs open">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                        <span class="caret"></span>
                        <span id="selectedlang"> English  <i class="flag-icon flag-icon-us"></i></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li style="width:130px;"><a href="#" class="lang" data-link="ge">ქართული <i class="flag-icon flag-icon-ge"></i></a></li><li style="width:130px;"><a href="#" class="lang" data-link="ru">русский <i class="flag-icon flag-icon-ru"></i></a></li><li class="hidden"><a href="#" class="lang" data-link="en">English <i class="flag-icon flag-icon-us"></i></a></li>                    </ul>
                </li>

    CSS Howto..

    How to make bootstrap 3 dropdown menu working for no JS user

    How to make this in html and css?

    How to apply CSS class to a split string

    How style selected option with CSS without styling all the other options?

    How to stop my css declaration from being overridden

    How to create angled double border effect CSS

    how to select margin for a background image in CSS/CSS3?

    How to get a div positioned at the bottom of a table

    How do I do the CSS for this?

    How to make beatiful select lists?

    How to Make CSS Property Apply to Everything Within Bootstrap Navbar?

    How to float Dojo DropDownMenu over a table cell

    Show a sharing icon on hover on image

    How to apply CSS using User Scripts

    how to select all list items except for the first and last using CSS only?

    How to select elements using CSS selector who's attribute can have multiple values

    How to center a DIV with CSS?

    How to remove outline dotted border with using css

    How can I place three block of contents in one line in a way that the middle block is always full width?

    How align div to a form field?

    How to add a tooltip for just the background image of an input field with HTML and CSS

    How to hide text without ID?

    How can I control when my css transitions happen and when they don't?

    How to properly preload images, js and css files?

    How to override a templates default option with javascript and css

    CSS how to transition(with transform) a parent and child both, differently

    How to tell what is the right css line to apply in nested classes

    How to remove vertical scrollbar from iframe inside the page

    How can I extend the width of a child div to go beyond the parent div's width?

    How to make image clipping in css