Can't change button width.

Posts: 12

Reputation: 0

Message # 1 | 3:47 AM 2016-11-22

Hi.

I have several buttons on a page with different text on each button and I want to assign all buttons same width. I've already tried

<button width="300px" class="button" type="button">text length</button>

and adding this to css

.button {width: 300px !important;}

but their width remains the same, it's shaped in accordance with text length. For some reason it's possible to change their height but not width. Very weird. Please help.

Ken_D

Posts: 60

Reputation: 1

Message # 2 | 3:09 PM 2016-11-23

zawr, remove dot . before "button" in css.

Code

button {width: 300px }

zawr

Posts: 12

Reputation: 0

Message # 3 | 10:02 PM 2016-11-23

Nope. Any more ideas?

Here's my .css
https://paste.ee/r/iGao7

Kasach

Posts: 31

Reputation: 6

Message # 4 | 7:40 AM 2016-11-24

@Zawr,
at this code

Code

<button class="button">text length</button>

try to remove

Code

width="300px" type="button"

and add this at the bottom of your css.

Code

button.button {width: 300px }

And change the width here trough the css...

PS. Maybe give the button an other class name...

You can find me on the unofficial uCoz Discord :)

Post edited by Kasach - Thursday, 2016-11-24, 7:42 AM

zawr

Posts: 12

Reputation: 0

Message # 5 | 12:04 PM 2016-11-24

.css
button.stretcher {width: 300px;} or .stretcher {width: 300px;}
html
<button class="stretcher">text length</button>

no dice.

_
UPD.
Found the problem in .css
#casing input[type='submit'],#casing input[type='reset'],#casing input[type='button'],#casing button {width:auto!important;cursor <img src="/.s/sm/1/tongue.gif" border="0" align="absmiddle" alt="tongue" /> ointer;border:none;margin:0 0 1px 1px;text-transform:uppercase;padding:0 15px;font-weight:normal!important;background:#046da3 url(/.s/t/1231/title.png) repeat-x;height:31px;line-height:31px;font-size:11px;color:#fff;text-shadow:0 1px 1px #111;text-transform:uppercase;-moz-box-shadow:0 0 3px #222;-webkit-box-shadow:0 0 3px #222;box-shadow:0 0 3px #222;-webkit-appearance:none;}

This line works now (as well as changing width via .css)
<button style="width:300px">text length</button>

Thanks, everybody.
/thread

Post edited by zawr - Thursday, 2016-11-24, 12:24 PM

Page 1 of 1 1
Forum moderator: bigblog