Search jQuery

jQuery Forum

Reducing space at top of jQuery UI button

in Using jQuery UI • 8 years ago

I have set a fixed height on a jQuery UI button, and would like to reduce the padding at the top of the button so that the text is centered vertically. I have tried setting padding-top but it seems like that property is ignored. How do I cause the "Open" text in the following example shift up?

http://jsfiddle.net/dlwhiteman/we12my7t/3/

Replies(3)

jakecigar

Re: Reducing space at top of jQuery UI button

8 years ago

I didn’t have a good answer when I first read this question. But it bothered me. Probably as much as you. I came up with this . Does it help you out?

JΛ̊KE

dlwhiteman

Re: Reducing space at top of jQuery UI button

8 years ago

Thanks, Jake! It bothers me too that this is not so straightforward. Is there a hidden span created when you create a jQuery button? I am wondering why you are setting the line height of a span that was not explicitly defined in the HTML. Also wondered why you have to precede the .ui-button selector with the button id. I would think that if I just used

.ui-button span {
padding-top: 4px;
}

instead of

#openform.ui-button span {
padding-top: 4px;
}

it would work the same, but it doesn't.

jakecigar

Re: Reducing space at top of jQuery UI button

8 years ago

I used my handy-dandy web inspector to play with the values before I wrote the CSS code. There is a span.

The rules of specificity in CSS are better than using !important. I you should learn about css specificity ,

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Reducing space at top of jQuery UI button

Replies(3)

Re: Reducing space at top of jQuery UI button

Re: Reducing space at top of jQuery UI button

Re: Reducing space at top of jQuery UI button

Statistics

Tags

Actions