Html Question posted in
Some basic documentation can be found here.

Html – How to create horizontal scrolling div without overflow-y hiding elements?

This seems crazy but I cannot find an example of horizontal scrolling without overflow-y hiding content.

Is there a way to setup a horizontally scrolling div where elements such as dropdowns can be visible?

Working example: https://codepen.io/BRacicot/pen/WLQXXE

.chips {
    white-space: nowrap;
    overflow-x: auto;
}

It seems tailwind makes this happen but I don’t see what the difference is that their version allows overflow-y to be visible.
enter image description here

Tags:

4

Answers


  1. 0

    You can give height to the div so that your div does not scroll(vertically) along with horizontal scrolling.
    after giving height to your div, You need to add vertical-scroll to hidden.

    overflow-y: hidden;
height:20px;
overflow-x: auto;
    Login or Signup to reply.
  2. 0 
    .dropdown {
    display: none;
    position: absolute;
    top:30px;
    background: gray;
    position:fixed;
    index:1;
    &.active {
        display: block;
    }
}

    When you click on the button, you must manually set the top value for the drop-down list using js.
    I can give a more detailed answer if we continue to communicate through upwork, my name is Vasilii Andruscenco.

    Login or Signup to reply.
  3. 0

    You need to make parent element for .chips element and set the height of the scrollable section.
    And then you would set the height to the .chips element to make it visible for dropdowns.

    <div class="content-wrapper" style="height: 47px;>
            <div class="chips" style="height: 62px;>
                <div class="chip large">
                    <input type="text" placeholder="Search">
                </div>
                <div class="chip select">
                    <button type="button">click</button>
                    <div class="dropdown active">
                        a whole bunch of visible content
                    </div>
                </div>
                <a class="chip large">Blog</a>
                <a class="chip large">In the news</a>
                <a class="chip large">Press releases</a>
                <a class="chip large">Case studies</a>
                <a class="chip large">Video</a>
            </div>
        </div>

    And then you need to set z-index for .dropdown to make it visible.

    Here are the working example on my side

    Login or Signup to reply.
  4. 0

    make the parent element a flexbox and set flex-direction as row to make all content horizontal and then set overflow-x auto so that user can scroll through child elements when content overflow and if content overflow vertically it will not make overflow-y hidden

    #id{
  border: 1px solid red; 
  display:flex;
  flex-direction:row;
  gap: 10px;
  width: 110px; /* only for showing it works remove this */
  overflow-x: auto;
}
    <div id="id">
  <div>one</div>
  <div>two</div>  <div>three</div>
  <div>four</div>
</div>

    I hope it resolved your query

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search