1
I have several buttons inside my divs. I leave the css that I use to put the div side by side and the css to set the size of all buttons so that they are all the same. But then I have the problem when the text is a little bigger as shown in the images below surrounded in red.
.div {
width: calc(50% - 0px);
margin: 0%;
float: left;
}
.div.div1 {
float: right;
}
.botao{
width:70%
}
<button class="btn btn-info btn-sm botao" onclick="inserir_registo9();if(confirm('Pretende registar esta atividade?')) this.disabled=true;">Mudança de Fralda+Cama+Roupa</button>
but only shows the following text on the button on your phone:
but if it’s on the computer screen it already shows the full text:
The idea is to put all buttons with the same size as this, be Divs and responsive buttons, but on the phone also wanted to view the full content.
HTML:
<div class="table-responsive">
<?php
$user = (!empty($_GET['codigo'])) ? $_GET['codigo'] : '';
?>
<input type="hidden" id="codigo" name="codigo" value="<?php echo htmlentities( $user ) ; ?>" />
<div class="form-group">
<label for="IniciarTarefa" id="acao"></label>
<button type="button" class="btn btn-warning" onclick="myFunction()">Iniciar Tarefa</button>
<input type="hidden" id="IniciarTarefa" name="IniciarTarefa"/>
<input type="hidden" name="Colaborador" id="Colaborador" value="<?php echo $_SESSION['usuarioNome']; ?>">
</div>
<div class="form-group">
<input type="hidden" id="tarefa" name="tarefa" value="Lateral Direito">
<button type="button" class="btn btn-info btn-sm botao" onclick="inserir_registo();if(confirm('Pretende registar esta atividade?')) this.disabled=true;">Lateral Direito</button><button type="button" name="abrir"><span class="glyphicon glyphicon-comment"></span></button>
<div class="form-group" id="comentario" style="display:none">
<textarea id="Observacao" name="Observacao" style="color: black;"></textarea>
</div>
</div>
<div class="form-group">
<input type="hidden" id="tarefa1" name="tarefa" value="Lateral Esquerdo">
<button class="btn btn-info btn-sm botao" onclick="inserir_registo1();if(confirm('Pretende registar esta atividade?')) this.disabled=true;">Lateral Esquerdo</button><button type="button" name="abrir1"><span class="glyphicon glyphicon-comment"></span></button>
<div class="form-group" id="comentario1" style="display:none">
<textarea id="Observacao1" name="Observacao" style="color: black;"></textarea>
</div>
</div>
</div>
is its width: 70%, it limits the size of the button and what leaks it gets hidden. strip the width of the button and put only a max-width if necessary, to set a maximum size and the minimum undefined.
– ElvisP
@Eliseu B. But this way the buttons do not all stay the same size and intended to put the buttons all the same size to have a good presentation. How can I do it?
– Bruno
First put your HTML tb in the question, it seems that you use Bootstrap 3, but somehow you are using Grid Col-* the wrong way, if you are using... Another thing, what is your idea to show the whole text? Decrease the font? Put the text in the whole line? More details of what you really want to do
– hugocsl
In your case you leave a column per row is ideal, because so has many elements for little space, and will be even more pleasant to navigation, I left below a brief demonstration of use of fixed and fluid widths for the elements.
– ElvisP
@hugocsl added part of my html
– Bruno
Face but you also have to say what you want, as you want to put 10 words where only fit 5? What is your idea, hide part of the text, instead of 2 per line put 1 per line to have more space for text. You have to give detail so we don’t waste time answering something you don’t want
– hugocsl
@hugocsl my idea was to tone the button wider, as if it had two lines and appeared one part of the text above and another below. I forgot to mention that detail
– Bruno