简体   繁体   中英

Changing the height of SELECT with Uniform / jquery

I have this problem where I want to change the height of some select-dropdown listboxes.

At the moment this is how they look like http://i46.tinypic.com/2qstseo.gif

And I would like them to be taller and also close together. I don't know if this is possible wih Uniform, but here is my code nevertheless:

#uniform-resize span
{
    width:120px;
    height:60px;

}

This is one of the selects (they are quite large):

<select id="resize">
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>April</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>August</option>
    <option>September</option>
    <option>October</option>
    <option>November</option>
    <option>December</option>
</select>

Any ideas? Obviously the height:60px; does not work.

Thank you very much for the support guys, let me know if you need any more info.

You can go in uniform.default.css and change some parts, for example, this part:

div.selector select {
  min-width: 190px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  border: solid 1px #fff;
}

or you can try adding !important

#resize
{
    width:120px !important;
    height:60px !important;
}

EDIT : Uniform.js is using this sprite: http://uniformjs.com/images/sprite.png so I doubt you can really change the height of the select element.

EDIT : To change the width:

.selector span{width:auto !important}
.selector select{width:auto !important}
.selector{width:auto !important}

You need to edit the sprite image or use another one altogether (using the same layout) and then you need to overwrite all related CSS parts of Uniform, namely those with positions for this sprite image and font declarations. Check out Uniform's other themes - it's all there.

Btw: To save you future headache do not use !important, but overwrite existing CSS rules cleanly. Do so in a CSS file loaded AFTER uniform.default.css and don't mess with Uniform's files directly!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM