CODEWITHSUNDEEP
jquerycss
Jitendra Vyas
Jitendra Vyas

Reputation: 152767

How to get same height for all buttons?

These button made by span I want same height for all

enter image description here

How to get that? play with jsfiddle example here http://jsfiddle.net/jitendravyas/Apz9e/16/

/* setting the width and height of the SELECT element to match the replacing graphics */
span.select, select.select {

width:auto ;
        height:auto ;
    font:3.2em Arial, Helvetica, sans-serif;
    font-weight:bold;
   padding:7% 7%
}


select.select{
        position:relative;
        z-index:10;

        line-height:1;

}

select option {padding-top:3px; border-bottom:1px solid red}

/* dynamically created SPAN, placed below the SELECT */
span.select{
    position:absolute;
    bottom:0;
    float:left;
    left:2px;
    line-height:1;
    text-indent:10px
     background: #ffffff;
background: url('images/color-arrow.png') no-repeat, -moz-linear-gradient(top,  #ffffff 0%, #a9a9a9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#a9a9a9));
background: -webkit-linear-gradient(top,  #ffffff 0%,#a9a9a9 100%);
background: linear-gradient(top,  #ffffff 0%,#a9a9a9 100%);
    cursor:default;
    z-index:1; 
    border:#dadada 1px solid; 
    border-radius:6px;    
    background-position: 100% center; 
    text-shadow:0px 1px 1px #fff; white-space:nowrap;
        diaplay:block
    }

Upvotes: 1

Views: 599

Answers (1)

Savas Vedova
Savas Vedova

Reputation: 5692

Apparently it's because you provided a percentage width for the padding in select. Basically, when you do so the padding will be set according to the width of the content. Say your width is 100px then the padding will be 7px in your case. Or when it is 1000px it will be 70px. Try to give a fixed padding to the select.select element instead of using percentage. That will solve your question.

Similarly, if you really going to use a percentage padding, then set a fixed width. It would work as well.

** EDIT **

The following is a simple workaround for your problem.

// on window resize
$(window).resize(function() { 
    var max = 0;
    // get the height of the longest select.select
    $("select.select").each(function() { 
       var h = $(this).height();
       if (h > max) 
          max = h;
    });
    // set the height of all select.select to max height
    $("select.select").height(h);
});

Upvotes: 3

Related Questions