2

Tenho um modal funcionando:

<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel"      aria-hidden="true">
<div class="modal-dialog">
    <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false"    UpdateMode="Conditional">
        <ContentTemplate>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-  hidden="true">&times;</button>
                    <h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
                </div>
                <div class="modal-body">
                    <asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

Quero mexer no body. Quero que tenha 4 botões abaixo do outro, e colocar um texto ao lado, sendo que tudo que coloco lá vai para baixo um do outro, como colocar algo do lado? E como colocar uma barra de rolagem? Pois estou preparando o mesmo para uma lista de dados.

6
  • Este aria- hidden="true" é proposital com estes dois espaços no meio? 16/03/2015 às 2:34
  • na verdade isso é so uma propriedade do botão, nao importa o componente, se eu colocar um label, ou button do asp.net sempre vai pra baixo um do outro, quero saber como colocar um do lado.
    – War Lock
    16/03/2015 às 2:38
  • Basta usar display:inline-block nesses botões internos. 16/03/2015 às 3:32
  • coloco isso aonde?
    – War Lock
    16/03/2015 às 13:56
  • @renan como faço??
    – War Lock
    16/03/2015 às 18:19

1 Resposta 1

2

Faça o seguinte:

  • Utilize float: left para fazer o menu ir para a esquerda.
  • Faça os botões ficarem com display: block e coloque-os dentro do menu, assim vão aparecer um debaixo do outro.
  • Crie um contêiner para o texto, que ficara após o menu no HTML, e coloque nesse contêiner o estilo overflow: hidden. Isso fará com que seu texto não interaja com o menu floated.

  • resultado

    Resultado

.menu {
  float: left;
}
.menu > button {
  display: block;
}
.conteudo {
  overflow: hidden;
  padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
  $(function() {
    $('#btn').click(function() {
      $('#myModal').modal();
    });
  });
</script>
<button id="btn">Mostrar modal</button>


<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
      <ContentTemplate>
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria- hidden="true">&times;</button>
            <h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
          </div>
          <div class="modal-body">
            <div>
              <div class="menu">
                <button>Botão 1</button>
                <button>Botão 2</button>
                <button>Botão 3</button>
              </div>
              <div class="conteudo">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis neque, maximus in justo eu, dictum semper augue. Etiam viverra mollis dui facilisis iaculis. Nullam rutrum lectus eget dolor blandit accumsan. Vestibulum accumsan ligula tortor, at facilisis
                neque bibendum et.
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
          </div>
        </div>
      </ContentTemplate>
    </asp:UpdatePanel>
  </div>

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 .