Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia pessoal,
Seguinte, eu tenho uma lista de bloco no modelo linha de tempo mas eles estão ficando um a baixo de outro, o que eu precisaria é fazer com que eles fiquem lado a lado e não estou conseguindo fazer isto por css.
Segue a imagem
Segue a div(esta div é repetida dinamicamente, ou seja, cada bloco azul é uma div).
<div class="subevent" style="left: {left}; width: {width}; height: {height}; position: relative;"></div>
Css
>
.subevent { color:#fff; background:SteelBlue; overflow:hidden; font-size:10px; max-height: 15px; }
Agradeço desde já!
Se eu boto float: left, ele se perde nas posições já que eu uso o "left" para definir a posição do elemento, note que, também estou usando o "position: relative" para que o "left" funcione.
Não é necessário posicionamento relativo para a flutuação de elementos. E seu código parece estar recebendo um valor dinâmico para a esquerda do elemento, e caso a linha não tenha espaço suficiente, o elemento irá "cair":
left: {left}
Caso eu não utilize a posição relativa o elemento não obedece a propriedade left, eu utilizo left para posicionar o elemento na linha do tempo, qual seria uma solução para posiciona-los lado a lado e não "quebrando a linha"?
>
Não é necessário posicionamento relativo para a flutuação de elementos. E seu código parece estar recebendo um valor dinâmico para a esquerda do elemento, e caso a linha não tenha espaço suficiente, o elemento irá "cair":
left: {left}
Stone fiz um teste aqui. Sem utilizar relative e com float:left.
Não criei repetição dinâmica, mas pra teste deixei alguns divs em sequência, dá uma olhada se é isso que você precisa. Coloquei o border só pra conseguir diferenciar onde começa uma e termina a outra div.
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>.aaa {background:#ccc; width:200px; height:30px; float:left; border:1px solid #FFF;}
Thiago Souza Farias
O problema é que eu uso a propriedade "left" para posicionar e se eu usar a propriedade "float" junto a ela os elementos bagunçam de posição.
>
Thiago Souza Farias
O problema é que eu uso a propriedade "left" para posicionar e se eu usar a propriedade "float" junto a ela os elementos bagunçam de posição.
Se eles "bagunçam", aí sim tem algo errado em outras declarações. Eles estão pulando de linha justamente por ter esse "left". Se quiser manter o "left", o correto seria posição absoluta.
Somente com "float: left", os elementos devem sim ficar organizados em linha (havendo espaço, claro). :thumbsup:
Certo, entendi, vou fazer um exemplo com float left e postar aqui pra vocês.
Pessoal, fiz o seguinte.
<div class="subevent" style="background-color: {color}; width: {width}; height: {height}; float: left;">{name}</div>
Teóricamente funciona sem o left pois não tenho intervalos de tempo, mas ainda tenho que pensar se isso não causará problemas futuros, meu problema é que agora tenho registros a mais, isto ocasiona uma quebra de linha no final, existe alguma forma de ocultar esses registros maiores no elemento, tentei "overflow: hidden" mas não obtive sucesso.
Obrigado
Segue uma imagem para melhor entendimento.
Stone, aí entra em questão a largura dos elementos também. Veja que eles pulam pra próxima linha pois não há espaço para continuar flutuando a direita. E junto com o que caiu numa linha, os próximos dele (na marcação), também caem. Reveja o limite de largura do pai, ou algum ancestral limitado.
PS.: isto que você está tentando fazer, são dados tabulares?
André Campos,
Não são tabulares, porém devem obedecer a linha do tempo, como pode ver há uma marcação de tempo no topo, por isto eu estava usando a propriedade "left" eu faço um calculo para saber o valor do "left" para que posicione exatamente no horário, mas usando float teóricamente não preciso disto já que não tenho intervalos vazios de tempo sempre um registro vem após o outro, a solução que eu procuro é, em vez de quebrar linha, os próximos registros se "esconderem" atraz da div pai, existe uma solução para isto?
Valeu
Se o pai tiver uma largura declarada, aplicar overflow:hidden dele é bem provável de dar certo.
Você consegue postar o HTML final (não precisa dos dados), como é gerado?
>
Se o pai tiver uma largura declarada, aplicar overflow:hidden dele é bem provável de dar certo.
Você consegue postar o HTML final (não precisa dos dados), como é gerado?
Vou tentar resumir ao máximo,
eu uso um framework javascript(ExtJS) e um plugin para montar linhas do tempo, mas este plugin não oferece sub eventos, eu faço isto usando HTML, tenho vários eventos e dentro destes eventos tenho subeventos, eu preciso deixar estes sub eventos lado a lado para facilitar a visualização já que serão várias linhas, no firebug fui até a div pai destes subeventos e a mesma já está aplicado o "overflow: hidden", porém, o conteúdo(subeventos) continua quebrando linha, caso os subeventos se "escondecem" na div pai já resolveria o problema.
Segue uma screenshot da timeline completa.
Como pode ver, possuo várias divs pais com vários sub eventos, estes sub eventos deveram se "esconder" atraz das divs pai(que já possuem overflow: hidden).
Já que você diz estar usando o Firebug, cola aqui por favor os atributos da aba "Executado" deste elemento pai, e dos 2 "sub-eventos" que começam cada linha.
Aqui está o html gerado pelo Framework.
<div class="sch-event-inner " unselectable="on">
<div class="subevent" style="background-color: #CDE2F8; width: 0; height: 13; float: left;">Na Direção</div>
<div class="subevent" style="background-color: #AED0F3; width: 0.716666666666697; height: 13; float: left;">Na Direção</div>
<div class="subevent" style="background-color: #87B9ED; width: 0; height: 13; float: left;">Parada</div>
<div class="subevent" style="background-color: #68A7E8; width: 171.99999999999994; height: 13; float: left;">Na Direção</div>
<div class="subevent" style="background-color: #4592E2; width: 6.4500000000000455; height: 13; float: left;">Na Direção (Tempo Excedido)</div>
<div class="subevent" style="background-color: #2680DD; width: 42.2833333333333; height: 13; float: left;">Parada Prolongada</div>
<div class="subevent" style="background-color: #1D6CBD; width: 12.18333333333328; height: 13; float: left;">Na Direção</div>
<div class="subevent" style="background-color: #185A9F; width: 20.783333333333417; height: 13; float: left;">Parada</div>
<div class="subevent" style="background-color: #144D89; width: 131.14999999999998; height: 13; float: left;">Na Direção</div>
<div class="subevent" style="background-color: #104173; width: 70.94999999999993; height: 13; float: left;">Parada Prolongada</div>
<div class="subevent" style="background-color: ; width: 158.38333333333333; height: 13; float: left;">Na Direção</div>
</div>css
>
.sch-event-inner {
height: 100%;
margin-left: 3px;
margin-right: 5px;
margin-top: 2px;
overflow: hidden;
white-space: nowrap;
}>
Já que você diz estar usando o Firebug, cola aqui por favor os atributos da aba "Executado" deste elemento pai, e dos 2 "sub-eventos" que começam cada linha.
A classe .sch-event-inner recebe largura Stone? Se não, é possível aplicá-la (parece que ela também é dinâmica pelo tipo de aplicativo)?
Ela é dinâmica sim, ela é montada através de uma data inicial e final que eu devo passar dinamicamente, provavelmente o framework monta a largura através da data inicial e final
Tente um float: left;
[]'s