Radio buttons change size instead of cutting off and showing overflow-x scroll bar

I’m attempting to only allow 5 radio buttons to view instead of all, and if you want to see more you should be able to scroll to the right.

Image 1 css code has width: 300px;

Image 2 css code has width: 160px; (cutting it at 5 items)

As you can see when I make the width smaller the element height changes and the other buttons go down. What I attempt to do is cut at the five element and have an horizontal scroll bar. I played a lot with css properties but couldn’t get it.

(my current code in angular)

<div class="page_selector">
    <span class="ps_item" *ngFor="let page of page_selector_items">
        <input type="radio" id="{{page.number}}" name="page_number" (click)="changePage(page.number)">
        <label for="{{page.number}}">{{page.number}}</label>
    </span>
</div>

(code in normal html)

<div class="page_selector">
    <span class="ps_item">
        <input type="radio" id="1" name="page_number">
        <label for="1">1</label>
    </span>
    <span class="ps_item">
        <input type="radio" id="2" name="page_number">
        <label for="2">2</label>
    </span>
    <span class="ps_item">
        <input type="radio" id="3" name="page_number">
        <label for="3">3</label>
    </span>
    [...same 5 more times]
</div>

(my current code in scss)

.page_selector {
    background-color: red;
    position: absolute;
    bottom: -10px;
    overflow: visible hidden;
    margin-left: 60%;
    width: 160px;

    .ps_item {
        margin-left: 15px;
        display: inline-block;
        
        label {
            display: block;
        }
    }
}

(code in normal css)

.page_selector {
    background-color: red;
    position: absolute;
    bottom: -10px;
    overflow: visible hidden;
    margin-left: 60%;
    width: 160px;
}
.ps_item {
    margin-left: 15px;
    display: inline-block;
}
.ps_item label {
    display: block;
}

>Solution :

To achieve a horizontal scrollable list of radio buttons with only 5 visible at a time, you can make use of CSS flexbox and overflow-x properties.

Here’s an example code snippet that should work:

HTML:

<div class="page_selector">
  <div class="ps_items">
    <span class="ps_item" *ngFor="let page of page_selector_items">
      <input type="radio" id="{{page.number}}" name="page_number" (click)="changePage(page.number)">
      <label for="{{page.number}}">{{page.number}}</label>
    </span>
  </div>
</div>

CSS:

.page_selector {
  background-color: red;
  position: absolute;
  bottom: -10px;
  margin-left: 60%;
  width: 300px; /* Change to desired width */
  overflow-x: scroll;
  white-space: nowrap; /* Prevents items from wrapping to next line */
}

.ps_items {
  display: flex;
}

.ps_item {
  margin-left: 15px;
  flex: 0 0 auto; /* Prevents items from shrinking or growing */
}

.ps_item label {
  display: block;
}

In this code, we’re using flexbox to create a horizontal layout of items, and setting the overflow-x property of the container to scroll to enable horizontal scrolling. We also set white-space to nowrap to prevent the items from wrapping to the next line.

The flex property on .ps_item prevents the items from shrinking or growing, and the label is set to display block to create a new line for each label.

You can adjust the width of the container and the margin of the items to fit your needs.