Chrome update Crashou Css

Asked

Viewed 43 times

0

I have a problem with the css of my web application. I started working at this company a few weeks ago as an intern and I’m having to solve some bugs that have appeared, mainly related to google Chrome. It turns out that after the update of day 10/12 approximately, our application began to show some bugs.

We work with a table and within this table, there are frames with tasks. Follow images of how it works and how it should work.

https://imgur.com/a/DXthL inserir a descrição da imagem aqui

After doing a little research, we ended up discovering that in one part of the code, more specifically the tr td who takes care of others divs is bugle. The height:100% is working, but this is zeroing out the others heights inside of it. If we take this height:100% tasks appear again and Buga is the jquery:droppable, that you can see in the images mentioned above.

One solution to the problem was to put height:-webkit-calc(1px), Since this problem is only for Chrome. Did it work? Yes, it’s the ideal solution? Most likely not. I’d like your help to help me, as I said, I’m an intern and I’m a little lost because I’ve never had previous experiences.

Follow a snippet of the code, the rest can be found in the fiddle link.

    <tr data-bind="attr:{id: sequencial}" id="2093" class ="selectable">
    <td class ="historia" style="height:1px">
      <div class="colapsada" style="display:none;">
      </div>
      <div class="expandida">
        <div class="historiaLayout">
          <span id=""></span>
        </div>
      </div> 
     </td>
      <!-- ko foreach: {data: $root.fases, as : 'fase'} -->      
   <td data-bind="css : 'fase-' + id" class="fase-7">
     <div class="colapsada"></div>
     <div class="expandida tarefaExpandida">
       <div class="nomeFase fase">
                        <span class="tamanhoVariavel sh-tooltip" data-bind="text: titulo, attr: {'aria-label': titulo}" aria-label="A Fazer">A Fazer</span>
            }
    .tabelaQT tbody tr td {
    border-right: 1px #ccc solid;
    height: 100%;
}
.tarefaExpandida {
    margin: 5px;
    overflow: auto;
    height: 100%;

https://jsfiddle.net/rychardgoltara/bvw1hkxg/

  • Set an example we can execute.

  • so it turns out I don’t quite know how to make an executable example of the problem, I’m new in the area yet.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.