[Dúvida] CSS triangle css border

[pedropcruz]

Boas pessoal, tenho aqui uma dúvida de front-end, e talvez possam ajudar:

O meu problema é este:

Tenho uma lista de items, e naquela que quero "selecionar", como o caso:

Selecciono então 1 item na minha lista, o problema é que se tiver uma lista grande de items, tenho a necessidade de fazer scroll. Mas este triângulo que fiz em CSS, não acompanha, e não sei o que me falta.

Como podem ver o meu problema:

Obrigado

Cumprimentos,

Pedro Cruz

 

[nfk]

Se pusesses o código que estás a usar e em que elementos está a ser aplicado era capaz de ser mais fácil alguém ajudar.

 

[Nada]

Em teoria terias de usar a posição relativa.. mas poe algum código para entender mos onde estar a falhar

Já agora, o design está agradável, bom trabalho

 

[mags]

à partida esse triângulo tem de estar dentro da "li". caso tenha um position absolute, metes a "li" como relativa. assim em principio tens o triângulo sempre atrás do conteúdo selecionado.
estando dentro dessa "li" é só colocar o triângulo hidden, com a seleção é atribuída uma class à "li" que torna visível o triângulo.
penso eu de que

 

[pedropcruz]

Se pusesses o código que estás a usar e em que elementos está a ser aplicado era capaz de ser mais fácil alguém ajudar.

Boas @nfk , desculpa a resposta tardia, e sim vou partilhar a nivel de css, para perceberem bem. Eu queria até por no fiddle, mas não estoua obter os resultados pretendidos and don't know why...

mas o que eu tenho, é no li, quando tiver a class activo, adiciono-lhe o :before, como podes ver abaixo

&:before{
      content: '';
      position: absolute;
      right: -1px;
      margin-top: 10px;
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-right: 15px solid $base-white;
      z-index: 10;
      @include transition(all .2s linear);
}

Já agora, tá em scss, mas o que não perceberes, posso exclarecer.

Em teoria terias de usar a posição relativa.. mas poe algum código para entender mos onde estar a falhar

Já agora, o design está agradável, bom trabalho

Sim usar relative no UL, e nos LI usar a position absolute. É o que estou a fazer, ou então criar realmente uma div de propósito para a criação da arrow. Mas pretendo não ir por esse lado, questões de perfomance

Obrigado @Nada

à partida esse triângulo tem de estar dentro da "li". caso tenha um position absolute, metes a "li" como relativa. assim em principio tens o triângulo sempre atrás do conteúdo selecionado.
estando dentro dessa "li" é só colocar o triângulo hidden, com a seleção é atribuída uma class à "li" que torna visível o triângulo.
penso eu de que

@mags , testei essa maneira, mas o problema, é que como dá para perceber, alterei a scrollbar também, e então a arrow não fica por fora da div onde está a scrollbar. É dificil explicar, mas alguma dúvida, questiona!

 

[pedropcruz]

bump!

Peço desculpa pelo incómodo

 

[Nada]

Quando puderes poe no fiddle.. é que assim não consigo entender, sem ver o problema :|

 

[pedropcruz]

Quando puderes poe no fiddle.. é que assim não consigo entender, sem ver o problema :|

https://jsfiddle.net/pedropcruz/9omfzg93/3/

Não está a mostrar como devia, não estou a conseguir por a trabalhar, mas vou tentar perceber o que se passa.

Obrigado!

 

[Nada]

Não dá para simular, visto que o resultado aparece vazio.. Mas vou tentar entender o que fizeste..

 

[pedropcruz]

Não dá para simular, visto que o resultado aparece vazio.. Mas vou tentar entender o que fizeste..

@Nada Enviei-te PM

 

[pedropcruz]

Quem puder ajudar, tem aqui o fiddle, já ando a volta disto há uns bons dias lol

http://jsbin.com/limepu/1/edit?output

Obrigado

 

[nfk]

Hoje por acaso vi uma página que faz o que queres:

http://www.lyx.org/Features

 

[pmpv]

Não é mais fácil tentares ver uma SVG ou um transform em forma de triângulo?

Forças a rotação e orientação à direita, com margin-right negativo ( -25px por exemplo ).

Eu por exemplo, faria assim u.u

Cria no :after e :before.

O que tu procuras está na NET, com tutoriais ou free stuff.

 

[pedropcruz]

Exat

Hoje por acaso vi uma página que faz o que queres:

http://www.lyx.org/Features

É exatamente isso, mas sem o uso de imagens! @nfk

Não crio o "triangulo" em SVG ou PNG, porque preciso que o triângulo vá mudando de cor conforme eu preciso. Uso o SCSS por essa razão e também usar mixins.

Estás a perceber onde quero chegar? @pmpv

Se me pudesses indicar os tuts para esta funcionalidade, agradecia... É que já percorri umas quantas vezes, ou então não estou a saber procurar o que pretendo!

Obrigado!

Pedro Cruz

 

[Nada]

Eu fiz alguns teste mas da forma que estas a fazer, não consegui ter o resultado que queres..
A maneira mais fácil seria por js ou por um elemento hide em cada um e assim sabias onde este devia estar.. da forma que estas a fazer a dificuldade é saber os limites do elemento..

Tenho de tentar novamente, fiquei curioso de como resolver isso agora

 

[pedropcruz]

Eu fiz alguns teste mas da forma que estas a fazer, não consegui ter o resultado que queres..
A maneira mais fácil seria por js ou por um elemento hide em cada um e assim sabias onde este devia estar.. da forma que estas a fazer a dificuldade é saber os limites do elemento..

Tenho de tentar novamente, fiquei curioso de como resolver isso agora

Eu ando com a curiosidade há já uns dias e ainda ando a investigar o caso...

Em JS, obtive resultados, mas estar a criar arrays daqueles que estão activos ou não activos e fazer com que o overflow-y tenha scroll e acompanhe o scroll... É uma porrada de código. E quero fazer o mais simplista possível.

Onde posso discutir mais esta questão? Fui banido do stackoverflow lol

Obrigado!

Pedro Cruz

 

[pmpv]

Como SVG ou PNG podes selecionar a cor...

 

[pedropcruz]

Como SVG ou PNG podes selecionar a cor...

Sim mas mesmo assim, preferia por meio de CSS, questão de perfomance, e tar a ir buscar uma imagem, enquanto que posso fazer em CSS, prefiro mais fazer em CSS... Por questões de perfomance.

Mas se não chegar a conclusão nenhuma, lá terá de ser.. :'\

 

[nfk]

Foste banido do Stack Overflow? Nem sabia que isso era possível. Até fazia lá a pergunta por ti, mas só se a preparasses muito bem, com um exemplo mínimo:

http://stackoverflow.com/help/mcve

O Fiddle é um começo, mas tem demasiado HTML e CSS, podias reduzir isso ao mínimo indispensável para ilustrar o problema.

Olhando para o Fiddle também me ocorreu que podia ser mais fácil se a scrollbar estivesse à esquerda e as setas brancas ficassem ancoradas ao elemento da tabela a que correspondem. Mas lá está, se o Fiddle tivesse menos HTML e CSS era muito mais fácil mexer para fazer experiências (embora, diga-se de passagem, eu não tenho muita experiência disso). Estou a pensar numa coisa deste género:

http://jsfiddle.net/j95f8met/3/

Mas com a scrollbar ficava um bocado esquisito.

 

[pmpv]

Sim mas mesmo assim, preferia por meio de CSS, questão de perfomance, e tar a ir buscar uma imagem, enquanto que posso fazer em CSS, prefiro mais fazer em CSS... Por questões de perfomance.

Mas se não chegar a conclusão nenhuma, lá terá de ser.. :'\

Aconselho reveres a utilização do SVG, se estás preocupado com a performance ou tamanho.

Não posso dar mais nenhum conselho, das poucas alternativas que estão online, acho que dei as mais acessíveis lol.

Anyway, boa sorte.