Modal & componente "Lista"

[carlosbrunoro]

Olá pessoal, gostaria de saber o que estou fazendo de errado.
Ao utilizar a listra dentro de um modal com os "campos" em col-xs-12 col-sm-12 col-md-12 , os mesmos ficam assim.

Porém quando está em modo smartphone, a apresentação das informaçoes ficam corretas.

Segue código utilizado.

`

×

Detalhes da Reserva

	<div class="ls-modal-body">
		<div class="ls-list">
			<header class="ls-list-header">
				<div class="ls-list-title col-md-9">
					<a id="ambiente" href="#"></a>
				</div>
			</header>

			<div class="ls-list-content">
				<div class="col-xs-12 col-sm-12 col-md-12">
					<span class="ls-list-label">Nome</span>
					<strong id="morador"></strong>
				</div>

				<div class="col-xs-12 col-sm-12 col-md-12 ">
					<span class="ls-list-label">Unidade</span>
					<strong id="unidade"></strong>
				</div>

				<div class="col-xs-12 col-sm-12 col-md-12">
					<span class="ls-list-label">Data do Evento</span>
					<strong id="data_previsao"></strong>
				</div>

				<div class="col-xs-12 col-sm-12 col-md-12">
					<span class="ls-list-label">Telefone</span>
					<strong href="tel:62993334050" id="contato"></strong>
				</div>

				<div class="col-xs-12 col-sm-12 col-md-12">
					<span class="ls-list-label">E-mail</span>
					<strong id="email"></strong>
				</div>
			</div>
		</div>
	</div>

	<div class="ls-modal-footer">
		<button class="ls-btn ls-float-right" data-dismiss="modal">Fechar</button>
		<a id="url_evento" class="ls-btn-primary">Abrir Evento</a>
	</div>
</div>

`

[deividmarques]

fala @carlosbrunoro tudo bom?

Esse comportamento é da própria listagem que foi definida que no mobile será sempre centralizada, independentemente se estiver dentro ou fora de um modal.

Vou lhe dar uma solução prática pra resolver ai do seu lado.

Nas divs que estão com as classes de grids voce precisa adicionar a classe ls-txt-left-xs (é uma classe funcional faz com que o texto fique centralizado a esquerda apenas no mobile).

Se quiser conhecer mais classes funcionais segue o link http://localhost:4567/documentacao/css/classes-funcionais/

Copiei seu markup e adicionei a solução entao ele ficaria conforme abaixo:

<div class="ls-modal-body">
	<div class="ls-list">
		<header class="ls-list-header">
			<div class="ls-list-title col-md-9">
				<a id="ambiente" href="#"></a>
			</div>
		</header>

		<div class="ls-list-content">
			<div class="col-xs-12 col-sm-12 col-md-12 ls-txt-left-xs">
				<span class="ls-list-label">Nome</span>
				<strong id="morador"></strong>
			</div>

			<div class="col-xs-12 col-sm-12 col-md-12 ls-txt-left-xs ">
				<span class="ls-list-label">Unidade</span>
				<strong id="unidade"></strong>
			</div>

			<div class="col-xs-12 col-sm-12 col-md-12 ls-txt-left-xs">
				<span class="ls-list-label">Data do Evento</span>
				<strong id="data_previsao"></strong>
			</div>

			<div class="col-xs-12 col-sm-12 col-md-12 ls-txt-left-xs">
				<span class="ls-list-label">Telefone</span>
				<strong href="tel:62993334050" id="contato"></strong>
			</div>

			<div class="col-xs-12 col-sm-12 col-md-12 ls-txt-left-xs">
				<span class="ls-list-label">E-mail</span>
				<strong id="email"></strong>
			</div>
		</div>
	</div>
</div>

[carlosbrunoro]

Grande @deividmarques, como sempre salvando a pátria em, graças a Deus você está aqui para responder.

Seguinte, não funcionou, as informações continuam aparecendo quebradas como no primeiro print.

O segundo seria ficar como no segundo print, se comportar naquele formato, tanto em desktop quanto em mobile.

[carlosbrunoro]

@deividmarques talvez tenha me expressado errado, o fato é que a separação das informações, as linhas, não estão conforme no segundo print. porém o alinhamento ficou correto.
Na segunda foto as linhas estão corretas.

[deividmarques]

Ah eu que nao havia entendido direito, ja achei que fosse a questao do texto hahaha

Então esse cenário não foi pensado no desenvolvimento, mas consegui uma solução aqui, só que as classes de grid estão ali apenas pra dar padding, nao funcionarao mais como grid ok? Mas no fim ficará igual ao que voce necessita, abaixo o código:

<div class="ls-modal-body">
      <div class="ls-list">
        <header class="ls-list-header">
          <div class="ls-list-title col-md-9">
            <a id="ambiente" href="#"></a>
          </div>
        </header>

        <div class="ls-list-content">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <span class="ls-list-label">Nome</span>
            <strong id="morador">valor</strong>
          </div>
        </div>

        <div class="ls-list-content">
          <div class="col-xs-12 col-sm-12 col-md-12 ">
            <span class="ls-list-label">Unidade</span>
            <strong id="unidade">valor</strong>
          </div>
        </div>

        <div class="ls-list-content">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <span class="ls-list-label">Data do Evento</span>
            <strong id="data_previsao">valor</strong>
          </div>
        </div>

        <div class="ls-list-content">

          <div class="col-xs-12 col-sm-12 col-md-12">
            <span class="ls-list-label">Telefone</span>
            <strong href="tel:62993334050" id="contato">valor</strong>
          </div>

        </div>

        <div class="ls-list-content">

          <div class="col-xs-12 col-sm-12 col-md-12">
            <span class="ls-list-label">E-mail</span>
            <strong id="email">valor</strong>
          </div>
        </div>
      </div>
    </div>

Eu criei e fechei o ls-list-content pra cada bloco, o resultado é o mesmo tanto no desktop quanto mobile

Resultado:

[carlosbrunoro]

@deividmarques perfeito mano, é isso aí agora sim, preciso definitivamente aprender a trabalhar com essas classes funcionais hehe, show de bola, você é o cara.

Espero que avancem com a versão do projeto e não deixem morrer, tenho um sistema quase que completo na área de gestão condominial, e utilizo este framework e espero continuar utilizando por muitos anos, grato.

[deividmarques]

Eu sai da empresa, mas as vezes sobra um tempo pra ajudar aqui no projeto open source.
Abraços

[carlosbrunoro]

Nossa, fala isso não, ta doido, preciso deste framework.
Espero que a galera continue trabalhando nele.

[deividmarques]

Eu tbm espero!!