I cannot set a fixed size for buttons

Asked

Viewed 726 times

-1

When adding a letter in value, the button increases to fit and defaces the entire alignment. I know who with tables would be easier and better, but I want to make it work with buttons 

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>GAM</title>
    <style type="text/css" >
    .modif{
        margin: 2px;
        padding: 5%;
        font-size: 10px;





        text-align: center;
        color: black;
        border: 3px solid #4F4F4F;
        border-radius: 6%;
    }
    .modif:hover {
        background-color:   #4F4F4F; 
        color: white;
}
    .velha{
        margin-left: 40.6%;
        margin-top: 1%;
    }
    .novoj{
        padding: 1%;
        font-family: verdana;
        font-size: 100%;
        margin-left: 7%;
        border-radius: 5px;
        border-color: #4F4F4F;
        font-family: 'Press Start 2P', cursive;
    }
    .novoj:hover {
        background-color:   #CD950C; 
        color: white;
}
    h3{
        margin-left: 1.5%;
        font-family: 'Press Start 2P', cursive;
    }

    </style>
</head>
<body>
 <div class="velha">  

    <input class="modif" type="button" value="x" /><input class="modif" type="button" value=""/><input class="modif" type="button" value=""/><br/>
    <input class="modif" type="button" value=""/><input class="modif" type="button" value=""/><input class="modif" type="button" value=""/><br/>
    <input class="modif" type="button" value=""/><input class="modif" type="button" value=""/><input class="modif" type="button" value=""/><br/>

    <br><input type="button" class="novoj" value="New" onclick="RELOAD();" />
</div>

<script>
</script>
</body>
</html>
html css

  • You zeroed margin and padding before you start styling?

  • By adding 1 letter to the button, it expands and defaces all http://prntscr.com/pk87pg . Even with padding and zeroed margin that is not the case with print ...

2 answers

1

You are not setting the size of anything there in your code, because you need to set the width to have the width and/or height to height. Suppose you want to set the width of all buttons based on their class would look something like this:

.modif{
    margin: 2px;
    padding: 5%;
    font-size: 10px;
    width: //aqui vc define a largura que quer (px, %, etc.);
    height: //aqui vc define a altura que quer (px, %, etc.);
    text-align: center;
    color: black;
    border: 3px solid #4F4F4F;
    border-radius: 6%;
}

Keep in mind that the change will be to ALL buttons that have modif class. If you want for any specific create an ID for each one and set in the own tag with style.

  • I have tried to set size and reset margin and padding or set size and keep both, however, when I add a letter inside the button it increases and messes up the layout. I need the button to stay fixed even when I add letters inside, NOTE: I’ve tried using "max-width", COD: http://prntscr.com/pk89wb Img: http://prntscr.com/pk8btb

  • Is this all your code or is there something else you think could impact the CSS change? Try to place the widht directly in the tag and check what

  • That’s all Cod: https://www.dropbox.com/s/id7hqn3825no1au/forum.html?dl=0

  • I managed to solve your problem with javascript. You need to use float:left where you have value set on the button. For example, in this line I did the following: <input class="modif" type="button" value="x" style="float: left;" id="btn-1"/> You can do via JS the following: if($('#btn-1').val() != null || $('#btn-1').val() != "){ $('#btn-1'). css('float','left'); } It worked for me!

  • Complex solution, but it works very well ! Obg, you’re the guy !!!

0


That’s a typographical problem, the elements inline has a specific type of alignment and for an element without text and with text to align itself like you need to define a vertical-aligment

inserir a descrição da imagem aqui

But as you can see in the picture, the X takes up a space, for it is a text character. 

.modif {
    margin: 2px;
    padding: 5%;
    font-size: 10px;

/* isso vai fazer todos os btns ficarem alinhados pelo base-line da altura x*/
vertical-align: bottom;


    text-align: center;
    color: black;
    border: 3px solid #4F4F4F;
    border-radius: 6%;
}

.modif:hover {
    background-color: #4F4F4F;
    color: white;
}

.velha {
    margin-left: 40.6%;
    margin-top: 1%;
}

.novoj {
    padding: 1%;
    font-family: verdana;
    font-size: 100%;
    margin-left: 7%;
    border-radius: 5px;
    border-color: #4F4F4F;
    font-family: 'Press Start 2P', cursive;
}

.novoj:hover {
    background-color: #CD950C;
    color: white;
}

h3 {
    margin-left: 1.5%;
    font-family: 'Press Start 2P', cursive;
}
<div class="velha">

    <input class="modif" type="button" value="x" /><input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><br />
    <input class="modif" type="button" value=" " /><input class="modif" type="button" value="" /><input class="modif" type="button" value="" /><br />
    <input class="modif" type="button" value="" /><input class="modif" type="button" value="" /><input class="modif" type="button" value="" /><br />

    <br><input type="button" class="novoj" value="New" onclick="RELOAD();" />
</div>

Correcting the empty value

So if you want them all lined up, you have to leave value empty, not like this value="", but you have to leave it like this value=" " even an empty space renders on the screen and it is enough to keep everything aligned. Even so it does not get totally perfect pq the width of a X is different from the width of a (empty space)

inserir a descrição da imagem aqui

.modif {
    margin: 2px;
    padding: 5%;
    font-size: 10px;

/* isso vai fazer todos os btns ficarem alinhados pelo base-line da altura x*/
vertical-align: bottom;


    text-align: center;
    color: black;
    border: 3px solid #4F4F4F;
    border-radius: 6%;
}

.modif:hover {
    background-color: #4F4F4F;
    color: white;
}

.velha {
    margin-left: 40.6%;
    margin-top: 1%;
}

.novoj {
    padding: 1%;
    font-family: verdana;
    font-size: 100%;
    margin-left: 7%;
    border-radius: 5px;
    border-color: #4F4F4F;
    font-family: 'Press Start 2P', cursive;
}

.novoj:hover {
    background-color: #CD950C;
    color: white;
}

h3 {
    margin-left: 1.5%;
    font-family: 'Press Start 2P', cursive;
}
<div class="velha">

    <input class="modif" type="button" value="x" /><input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><br />
    <input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><br />
    <input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><br />

    <br><input type="button" class="novoj" value="New" onclick="RELOAD();" />
</div>

  • I was very lost thinking that it was display problem and several other things ... It helped me mto, obg by the explanation.

  • @The cool rtxléo that helped ai, was simpler than it seemed right, the value is a "text" that renders inside the element, this text has width, height and other basic property, different from an element without text inside, then you have to manually set a default value for who has or has no text inside, basically this. Even if you change vertical-align: bottom; for vertical-align: top; will also work well rss :D, because you declared an alignment for everyone, whether or not you have text inside.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.