11

inserir a descrição da imagem aqui

Quando clicamos no calendário que está no perfil, ele fica igual a imagem acima ai. Sei que no Firefox, IE, Edge e Chrome está assim.


Alguns usuários falaram que o calendário deles está mais louco ainda.

inserir a descrição da imagem aqui

1

2 Respostas 2

5

It's now fixed and will be live after our next production build.

1
  • 1
    I want to accept this answer but i don't have the accept button ;)
    – Jorge B.
    Commented 27/11/2015 às 9:21
8

Primeiro problema:

O calendário é na verdade se trata do jquery-ui, existem dois problemas, o primeiro é que por causa deste estilo:

.user-show-new .user-header .data th, .user-show-new .user-header .data td {
    padding: 3px 20px 3px 0;
    white-space: nowrap;
    vertical-align: top;
}

Que está no arquivo:

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/br/all.css?v=1e6f41aabda2">

A cada letra adicionada é necessário aumentar a largura, pois existe white-space: nowrap que impede as quebras e o padding: 3px 20px 3px 0; que faz o que está a direita ter 20px.

No caso os elementos <th> no site em inglês usam 2 letras pra cada dia da semana e no site em Português usa 3 letras.

Vou ser sincero, tenho algum conhecimento em CSS, e do meu ponto de vista é um absurdo usar padding-left e padding-right diretamente dentro de <th> e <td> (é apenas a minha opinião).

Não é o jQuery-ui que está afetando o layout, mas sim o all.css, pra corrigir o problema, basta editar este seletor em all.css:

.user-show-new .user-header .data .days-visited tr:last-child th, .user-show-new .user-header .data .days-visited tr:last-child td {
    padding-bottom: 0;
}

Para (eu testei e funcionou)

.user-show-new .user-header .data .days-visited tr:last-child th, .user-show-new .user-header .data .days-visited tr:last-child td {
    padding-bottom: 0;
    padding-right: 0;
}

Segundo problema:

Provavelmente foi algum erro ao carregar o documento CSS do jquery-ui ou outro estilo.

#Terceiro problema (não mencionado)

Nos outros sites da SE (como SOen) o site carrega apenas um jQuery-ui (ele é carregado automaticamente nos sites da SE), já no SOpt ele carrega duas vezes, veja:

inserir a descrição da imagem aqui

Como eu disse ele é carregado/inserido dinamicamente (com javascript), pode ser que isto afete o layout dos elementos jquery-ui, pois existem regras do css ou comando do javascript que podem afetar o funcionamento (é teórico).


First problem:

<img src="https://i.sstatic.net/5mPX6.png">

The calendar is actually it is jquery-ui, there are two problems, the first is that because of this style:

.user-show-new .user-header .data th, .user-show-new .user-header .data td {
    padding: 3px 20px 3px 0;
    white-space: nowrap;
    vertical-align: top;
}

That is in the file:

<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/br/all.css?v=1e6f41aabda2">

Every added "character/letter" is necessary to increase the width because there white-space: nowrap that prevents the breaks and the padding: 3px 3px 20px 0, making the right of the element have 20px.

If the elements <th> on the StackOverflow.com using two letters to each weekday and on the pt.stackoverflow.com uses 3 letters in <th>.

I'll be honest, I have some knowledge of CSS, and from my point of view is nosense to use padding-left and padding-right directly into <th> and <td> (I hope that does not sound like offense, it is just my opinion).

It is not jquery-ui that is affecting the layout, but the all.css to fix edit this selector in all.css:

.user-show-new .user-header .data .days-visited tr:last-child th, .user-show-new .user-header .data .days-visited tr:last-child td {
    padding-bottom: 0;
}

To (I tested it and it worked):

.user-show-new .user-header .data .days-visited tr:last-child th, .user-show-new .user-header .data .days-visited tr:last-child td {
    padding-bottom: 0;
    padding-right: 0;
}

Second problem:

It was probably some error loading the jquery-ui.css document (or other).

#Third problem (not mentioned)

In other sites of SE (eg. stackoverflow.com) the site carries only a jquery-ui (it is automatically loaded on the website of SE), as in sopt it loads twice, see:

jquery-ui

As I said it is loaded/inserted in document dynamically (with javascript), it may be that this affects the layout of jquery-ui elements because there are rules of css or javascript command that may affect operation (is theoretical).

8
  • Notou alguma falha na tradução, pode editar :)
    – Syzoth Mod
    Commented 9/08/2015 às 16:22
  • Na verdade, o segundo problema foi constatado no Firefox do Jorge B. e do Ricardo. kkkk
    – emanuelsn
    Commented 9/08/2015 às 20:06
  • @emanuelsn No meu Firefox (Windows) está normal, deve ter sido algum arquivo css ou outra coisa que não carregou.
    – Syzoth Mod
    Commented 9/08/2015 às 20:29
  • 2
    Aqui o jquery-ui.css carrega só uma vez. Mas, excelente resposta!
    – Gabe Staff
    Commented 10/08/2015 às 15:42
  • Aqui continua igual o calendário. Começo a achar que o site não me curte :P
    – Jorge B.
    Commented 10/08/2015 às 16:24
  • @Gabe Pode ter sido um BUG. Hoje não apresentou mais.
    – Syzoth Mod
    Commented 10/08/2015 às 18:01
  • 1
    @JorgeB. Você disse que continua, seria o segundo? É Firefox com Ubuntu?
    – Syzoth Mod
    Commented 12/08/2015 às 20:34
  • É sim Ubuntu com Firefox
    – Jorge B.
    Commented 12/08/2015 às 20:52

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 .