CODEWITHSUNDEEP
htmlcss
Udit
Udit

Reputation: 393

How to add Right side padding to Horizontal scroll?

I am trying to add the right side padding to the horizontal scroll to make sure the last item in the scroll comes in the center of the screen.

Following is what I am trying! although the left padding work perfectly, I don't understand why right padding is not being applied

.option-widget {
 display: flex !important;
 overflow: auto;
  padding-left: 40% !important;
  padding-right: 40% !important;
}

HTML : 

<div className="option-widget">
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
<IconButton id={selected} className="icon-font" ><img style={{ width: '70px' }} src={image.selected} alt="name" /> </IconButton>
</div>

Any kind of help would be appreciated.

Upvotes: 3

Views: 256

Answers (1)

Sameer
Sameer

Reputation: 5188

TL;DR
Add padding-right to last child element using element:last-child (Example below)

.option-widget {
  display: flex !important;
  overflow: auto;
}

.icon-font {
   margin: 0 1rem; 
}

.icon-font:last-child {
  padding-right: 50%;
}
<div class="option-widget">
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
  <div class="icon-font">
    <img style="width: 70px" src="https://via.placeholder.com/150" alt="name" />
  </div>
</div>

I think you are using some framework to dynamically add images, So I created a simple example with plain html.

I have added padding-right as 50% because 50% is a half/center of full width which is in total 100%.

Upvotes: 1

Related Questions