CODEWITHSUNDEEP
htmlcssbutton
KeenUser
KeenUser

Reputation: 5525

Dynamically change the size of the button based on the text?

ButtonI am new to HTML. I am using the button style is css as given below

    .button_style_enabled {
    background  : url("images/button_down.png") ;
    color       : #FFFFFF;
    height      : 21px;
    line-height : 21px;
    text-align  : center;
    width       : 112px;
    border      : 0px;

}

How do I adjust my button size based on the text?

Thanks.

Upvotes: 4

Views: 36454

Answers (4)

fernandomatiasdv
fernandomatiasdv

Reputation: 81

You can use

min-width: yyypx; /* optionally */
width: fit-content;

Upvotes: 1

Brent Bradburn
Brent Bradburn

Reputation: 54859

This was in the comments, but not the existing answers. The answer to the stated question ("How do I adjust my button size based on the text") would be use the auto value for width and/or height.

<button style='width:auto; height:auto;'>my<br>button</button>

Upvotes: 0

Curtis
Curtis

Reputation: 103348

Use padding instead of width to set your input styles. This way you can still set the "thickness" of the control, without constraining it to a fixed width.

Regarding a background-image being cut off short, you can add a min-width to fix this:

input {
   color       : #FFFFFF;
   height      : 21px;
   line-height : 21px;
   text-align  : center;
   width       : auto;
   border      : 0px;
   padding-left:10px;
   padding-right:10px;
   min-width:100px;
}

http://jsfiddle.net/kBxz2/1/

Upvotes: 6

huMpty duMpty
huMpty duMpty

Reputation: 14460

try this

input{overflow: visible;padding: 2px 5px 2px 5px;}

Upvotes: 0

Related Questions