Ir para conteúdo
FabianoSouza

After Content não aparece corretamente em DIV criada com JS

Recommended Posts

Pessoal, tenho o CSS abaixo que cria um pequeno triângulo ao redor da DIV (fica como um "bico" na DIV).

Esse CSS funciona.

 

Só não funciona corretamente quando eu crio a DIV com JS (vejam a imagem que ilustra)

.detEventoAgendaModal
{
  background-color:#FFFFFF;
  position:relative; float:left;
  min-height:150px; min-width:300px;
  margin-left:-20px; padding:10px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  border:solid 1px #4466A4;
  z-index:10;
}
.detEventoAgendaModal:after{

content: ''; /*AQUI QUE OCORRE O PROBLEMA */
 
position: absolute;
  border: 10px solid transparent;
  border-bottom-color: #4466A4;
  left: -20px;

/* Rotaciona div */
  -ms-transform: rotate(270deg); /* IE 9 */
  -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
  transform: rotate(270deg);
}

Trecho  JS que cria a DIV (isso está funcionando)

 

	var $idTab = 'tabCalendario'
	var $cell = e.target.parentNode.cellIndex ; 
	var $row = e.target.parentNode.parentNode.rowIndex; 

	//cria DIV wrap
	var $dvDetalhe = document.createElement('div')
	var $addDv = document.getElementById($idTab).rows[$row].cells[$cell].appendChild($dvDetalhe);
	$dvDetalhe.setAttribute('class', 'detEventoAgendaModal')

 

 

 

bico-css.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Fabiano Souza

 

Somente com os códigos fornecidos não consegui visualizar o problema, pois tanto para HTML quando para JS o comportamento é o mesmo no firefox,  chrome e IE11.
Ver: https://jsfiddle.net/maujor/u529fn2n/

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Maujor! Agradeço pela atenção.

Vou revisar meu código completo, pois essa DIV que crio com JS é construída dentro de uma TD (não sei se isso está correto quanto a questões semânticas).

Mas desconfio que a estilização da TD esteja impactando nisso.

 

Vou analisar.

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Assim como o @Maujor, eu também não consegui simular o seu código, mas vou sugerir uma outra forma de fazer esse box e pode ser que isso resolva seu problema:

<div class="box"></div>

No css:

.box{
  border: 2px solid #52B3D9;
  width: 200px;
  height: 150px;
  position: relative;
  margin: 20px;
}

.box:before {
  content: "";
  position: absolute;
  top: 10px;
  left: -15px;
  border-top: 10px solid transparent;
  border-right: 15px solid #52B3D9;
  border-bottom: 10px solid transparent;
}

Aí quando você tiver criando a div via js, é só cria-la com essa class ".box". Isso irá garantir que o estilo funcione como desejado! (eu espero rs) :tounge_wink:

 

Abraços, Doug.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Utaori
      Olá! Gostaria de uma pequena ajuda.

      Instalei o After Effects, e baixei um pack de transições com o formato projeto, dele mesmo, abri e editei conforme desejei, porém, na hora de renderizar, ocorre o seguinte erro: Imagem ampliada: http://i.imgur.com/lC9u1qu.jpg

      Tem como resolver? Sem saber o que fazer, eu peguei o projeto do AE e exportei para o Premiere Pro, mas na hora de abrir o projeto no Pr, ocorre o seguinte erro: Imagem ampliada: http://i.imgur.com/4KkLSfy.jpg

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.