Problem with overflow-x and overflow-y in css

Asked

Viewed 966 times

0

Good afternoon, all right?

I need a table to scroll on the x-axis if the table width is larger than the container width. If I do this, it will work:

overflow-x: auto;
overflow-y: hidden;

But I need the overflow-y to be Visible, because at the end of the table there is a select, and when I open select it appears cut.

If I put:

overflow-y: visible;

It puts a scroll vertically too.

If anyone has any light, I’d appreciate it.

css
  • 1

    Hello! I tested on Jsfiddle what you want to do, and it worked. In case I’m wrong, please clarify your question further.

  • Hello, all right? Sorry, I forgot to clarify some things... I’m using the Chosen select. The default select works normally even, since Chosen does not work.

  • Here’s an example of my doubt Jsfiddle

  • That’s the closest I’ve come so far, take a look Jsfiddle @Lioo

  • Okay, I’ve seen your code and you’re doing exactly what you want, right? You’re not cutting the select. If it’s not that, what do you want to do?

  • That’s right, but then he doesn’t respect the side scroll, that I needed :/

  • Ah, so you want the select do not accompany the side scroll, is that it? That disappear from the screen after scroll?

Show 2 more comments

1 answer

0

If that’s what I understand, you wish select do not follow the side scroll.

In your case, you can do this by removing the position: absolute; of the style of select.

$('#select1').chosen();
.wrapper {
  /* colocar tudo dentro de um wrapper*/
  position: relative; /* com posicionamento relativo */
}
#container1{
  position: static; /* Adicionar position static no container com overflow */
  border:1px solid black;
  height:100px;
  overflow-x:auto;
  overflow-y:visible;
}

table {
  width: 2000px; /* adicionar uma largura para mostrar o scroll no eixo x */
}

#select1_chosen {
  /* o chosen cria um #id-do-elemento_chosen */
  
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>

<div class="wrapper">
  <div id="container1">
    <table>
    <thead>
       <tr>
          <th>Teste</th>
          <th>Teste2</th>
       </tr> 
       </thead>
      <tbody>
        <tr>
          <td>Info</td>
          <td>info</td>
          <td>Info</td>
          <td>info</td>
          <td>Info</td>
          <td>info</td>
        </tr>

        <tr>
          <td>Info</td>
          <td>info</td>
        </tr>

      </tbody>
      </table>
      <select name="" id="select1">
          <option value="option 1">Op 1</option>
          <option value="option 2">Op 2</option>
      </select>
  </div>
</div>

Jsfiddle: Example here

  • But then it causes the scroll vertically, and that was the initial problem.

Browser other questions tagged css

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