1

Tenho vários botões dentro das minhas divs. Deixo o css que uso para colocar as div lado a lado e o css para definir o tamanho de todos os botões de forma a serem todos iguais. Mas depois tenho o problema quando o texto é um bocadinho maior como mostro nas imagens abaixo rodeado a vermelho.

.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>

mas só mostra o seguinte texto no botão no telemóvel: inserir a descrição da imagem aqui

mas se for no ecrã do computador já mostra o texto completo: inserir a descrição da imagem aqui

A ideia é colocar todos os botões com o mesmo tamanho como está, serem divs e botões responsivos, mas no telemóvel também queria visualizar o conteúdo completo.

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>
7
  • é o seu width: 70%, ele limita o tamanho do botão e o que vaza ele fica ocultado. tira o width do botão e coloque apenas um max-width se necessário, para definir um tamanho máximo e o mínimo não definido.
    – ElvisP
    17/05/2019 às 14:33
  • @Eliseu B. Mas dessa forma os botões não ficam todos do mesmo tamanho e pretendia colocar os botões todos dos mesmo tamanho para ficar com uma boa apresentação. Como o posso fazer?
    – Bruno
    17/05/2019 às 14:37
  • Primeiro coloque seu HTML tb na pergunta, parece que vc usa Bootstrap 3, mas de alguma forma está usando o Grid Col-* da forma errada, se é que esta usando... Outra coisa, qual a sua ideia para mostrar o texto todo? Diminuir a fonte? Colocar o texto na linha inteira? De mais detalhes do que realmente quer fazer
    – hugocsl
    17/05/2019 às 14:39
  • 1
    No seu caso você deixar uma coluna por linha é o ideal, pois assim tem muitos elementos para pouco espaço, e ficará até mais agradável a navegação, deixei abaixo uma breve demonstração de uso de larguras fixas e fluídas para os elementos.
    – ElvisP
    17/05/2019 às 14:43
  • @hugocsl adicionei uma parte do meu html
    – Bruno
    17/05/2019 às 15:07

2 Respostas 2

4

O principal problema é que a classe btn do Bootstrap 3 coloca o atributo white-space: nowrap; e isso não deixa o texto quebrar linha dentro do botão.

inserir a descrição da imagem aqui

Então já que vc colocou a classe .botao adicione lá a propriedade white-space: normal;, pois assim o texto vai passar a quebrar a linha.

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

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen"
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <style>
    .div {
      width: calc(50% - 0px);
      margin: 0%;
      float: left;
    }

    .div.div1 {
      float: right;
    }

    .botao {
      width: 70%;
      white-space: normal;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="row">
      <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;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem possimus recusandae optio totam quasi ipsa aperiam neque saepe porro pariatur. Impedit non commodi accusamus totam! Architecto veritatis est molestias deserunt.
          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>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>

2
  • era mesmo isso que procurava
    – Bruno
    17/05/2019 às 15:32
  • @Bruno legal que bom que deu certo ai!
    – hugocsl
    17/05/2019 às 15:35
3

Deixei alguns exemplos sobre o uso de width no CSS, confere o comportamento deles fora do seu layout, no caso abaixo não ocultei o conteúdo vazado (o título), e sim quebrou de linha, mas no caso do seu código ele oculta, e para ficar com um tamanha igual para todos, faça uso do min-width como demonstro abaixo:

.container {
  width: 200px;
  background-color: aqua;
}
.a1, .a2, .a3, .a4{
  background-color: #FDBB40;
  padding: 8px 6px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
.a2{
  width: 50%;
}
.a3{
  max-width: 90%;
}
.a4{
  min-width: 90%;
}
<div class='container'>
  <div class='a1'>Botão sem width definido</div>
  <div class='a2'>Botão com width definido</div>
  <div class='a3'>Botão com max-width definido</div>
  <div class='a3'>Botão com min-width definido</div>
</div>

1
  • ok, essa era a forma inicial que eu tinha. Vou colocar dessa forma
    – Bruno
    17/05/2019 às 15:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .