What is the best way to incorporate right side padding into a horizontal scroll?

I'm attempting to include padding on the right side of a horizontal scroll so that the last item in the scroll appears in the center of the screen.

Here's what I have tried so far. While the left padding works perfectly, I'm puzzled as to why the right padding isn't 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 assistance would be greatly appreciated.

htmlcss

Answer №1

Summary:
Insert padding-right to the last child element using element:last-child (Check out the 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>

It seems that you are utilizing a framework to dynamically add images. Therefore, I have presented a basic demonstration using simple html.

The padding-right value is set at 50% as it represents the midpoint or center of the full width, which totals 100%.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for displaying or hiding a large image when clicking on thumbnail images?

How can I toggle the display of a large image by clicking on thumbnails? This is what I am looking for: Check out this JSFiddle version http://jsfiddle.net/jitendravyas/Qhdaz/ If not possible with just CSS, then a jQuery solution is acceptable. Is it o ...

javascriptjquerycssmobile-safari

Performing height calculations in JavaScript is necessary to recalculate them whenever there is a

A JavaScript function is used to calculate the height of an iframe element and the document height, then determine if the iframe is on or off based on its height and display properties. The issue arises when changing pages— if the height is less than the ...

javascriptjqueryhtmlcss

Leveraging reframe.js to enhance the functionality of HTML5 video playback

I'm struggling with using the reframe.js plugin on a page that includes HTML5 embedded video. When I try to use my own video file from the same folder, it doesn't work as expected. While everything seems to be working in terms of the page loadin ...

javascriptjqueryhtml

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

Is there a way to make the next video play automatically using the loadPlaylist option? I've tried implementing this code but unfortunately, it doesn't work and the video won't play: <div id="player"></div> <script> var ...

javascriptcssyoutubeyoutube-api

What is the process for adding tailwind CSS via npm?

Before, I was including Tailwind using a CDN. Now, I have installed it with npm and all three .css files are included, but the styles are not appearing in my HTML document. Here is the directory structure and a link to style.css The content of tailwind.c ...

cssnpmtailwind-css

Creating a webpage with HTML through C++

I've been experimenting with posting an HTML page using C++. I created a class that utilizes sockets to implement TCP socketing. After checking, it seems like the issue lies in what I am sending: string s = "<!DOCTYPE html><html><head& ...

htmlc++http

Is <form> tag causing code deletion after an ajax request?

I'm working on a form that looks like this: <form> <input class="form-control" id="searchField" type="text"> <button type="submit" id="searchUserButton">SEARCH BUTTON</button> </form> When I click on SEARCH BUT ...

javascriptjqueryhtmlajax

Using HTML5 datetime-local to only accept dates in the format Y-m-d

I am currently working on a form that includes a datetime-local input field. <input type="datetime-local" id="datetime" /> After clicking on the today button, the date is automatically set to today's date like this: 2018-11-05 --:-- However ...

jqueryhtmlformsdatetime

Java Chatclient with a User-Friendly HTML Interface

My team is embarking on a new project involving the development of a Chatclient to be integrated into a webapp. Our requirements include: - Java server - Java client We have nearly completed coding both the client and server, but now we face the challe ...

javahtmlapplet

Automatically adjust text size within div based on width dimensions

Dealing with a specific issue here. I have a div that has a fixed width and height (227px x 27px). Inside this div, there is content such as First and Last name, which can vary in length. Sometimes the name is short, leaving empty space in the div, but som ...

javascriptjqueryhtmlcssresponsive-design

Changing the size of the Modal Panel in Ui Bootstrap for a customized look

Currently, I am in the process of developing an application that utilizes Ui bootstrap to seamlessly integrate various Bootstrap components with AngularJs. One of the key features I require is a modal panel, however, I found that the default size option &a ...

angularjscsstwitter-bootstrap

Having trouble with JQuery's append method on the <head> tag?

I am having an issue with this particular code block. It seems to be unable to insert the meta tag into the head section. Any suggestions on how to resolve this problem? <html> <head> <title>hello world</title> </head> < ...

javascriptjqueryhtmlmeta

Ways to conceal a grid item in Material UI framework

My goal is to hide a specific grid item for a product and smoothly slide the others in its place. Currently, I am using the display:none property but it hides the item instantly. I have already filtered the products and now I want to animate the hiding of ...

javascriptcssmaterial-ui

Need Some Help Reversing the Direction of This CSS Mount Animation?

Exploring this fiddle, I encountered a small div showcasing an opacity animation. The animation smoothly executes when the state transitions to true upon mounting the component, causing the div to fade in beautifully. However, I faced a challenge as the an ...

htmlcssreactjs

Is there a way for me to expand the dropdown menu?

My current dropdown looks like this. I'd like the dropdown menu to span across the screen, something like this: To create my dropdown, I am using https://github.com/angular-ui/ui-select2. AngularJS JQuery Select2 I'm not sure if there is an ...

jquerycssangularjsdrop-down-menu

Can a single volume control be used to manage the audio of multiple sources at once?

I am currently working on a project for my personal interactive video website. I am trying to figure out how to create one volume control that can adjust the audio for multiple tracks at once. Can anyone help me with this? So far, I have successfully crea ...

javascripthtmlaudiovolume

What causes Safari to display a black border around resized videos?

I've come across a strange issue while using Safari. Whenever I try to play an MP4 video with dimensions of 1920 * 1080, and resize the Safari window to a width of 937px, something strange happens: https://i.stack.imgur.com/oI50i.png A black border ...

cssvideosafari

Conceal the scrollbar track while displaying the scrollbar thumb

Hey there! I'm looking to customize my scroll bar to have a hidden track like this. Everyone's got their own style, right? ::-webkit-scrollbar{ width: 15px; height: 40px; } ::-webkit-scrollbar-thumb{ background-color: #DBDBDB; borde ...

htmlcssscrollbar

Designing a unique CSS border for custom list item bullets

I'm currently exploring the possibility of implementing a CSS border around an image that I have imported as a custom bullet for my list items: ul { list-style: none; margin-right: 0; padding-left: 0; list-style-position: inside; } ul > ...

htmlcsshtml-listsborder

``When you click, the image vanishes into thin

Could you please explain why the image disappears once I close the lightbox? Access with password: chough ...

javascriptjqueryhtmlcss