Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Ability to not add padding to the first and last element with offset

See original GitHub issue

Is your feature request related to a problem? Please describe. When making use of the offset property for a Carousel it would be useful to not apply the offsets to the left of the first element and to the right of the last element so the sizing/flow is in line with the rest of the page flow

Describe the solution you’d like A boolean flag that allows you to toggle the spacing on or off

Describe alternatives you’ve considered I have tried to selectively apply the spacing to the elements using padding/margin but this changes the space taken by the element and messes with the aspect ratios. It is possible to do this using the negative spacing on the container but it would be useful to not have to do this and retain all the logic in the carousel itself

Additional context None

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:1
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

piotr-s-brainhubcommented, Jul 1, 2020

Thanks @nabeelvalley

this example is very useful.

nabeelvalleycommented, Jul 1, 2020

@piotr-s-brainhub Here’s some code which shows the extra space on the left and right side (current behaviour)

<div style={{backgroundColor: "green"}}>
  Normal Page Flow. Here you can see that the content of the slider does not span the full width of 
  the section it's placed in due to the added spacing on the left and right of the first and last
  slide respectvely. It would be useful to be able to specify that spacing not be added to these elements
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat ante eget elit euismod 
  facilisis vel quis sapien. Donec mi lorem, interdum rhoncus fringilla a, lacinia at massa.
  <img src={imageOne} />
  <img src={imageTwo} />
  <img src={imageThree} />

This is from the documentation with the above code:


I’m suggesting to instead, using a configuration option, get something like this which is done using negative margins on the container, but this isn’t really a usable solution as it alters the size and spacing of the elements. A similar issue happens when applying the spacing to the children directly


The other issue I mentioned above is when applying padding to the children so they can be spaced correctly but this doesn’t really work well as there’s no easy way to how much spacing the child should have and this causes the children to become different sizes

Read more comments on GitHub >

github_iconTop Results From Across the Web

Remove padding from first and last elements in a row
When I set padding-left or padding-right to the corresponding boxes, the boxes don't have the same size (width/height) anymore. Here is my code:....
Read more >
scroll-padding-inline-end - CSS: Cascading Style Sheets | MDN
The scroll-padding-inline-end property defines offsets for the end edge in the inline dimension of the optimal viewing region of the scrollport ...
Read more >
Positioning Content - Learn to Code HTML & CSS - Shay Howe
Easily learn CSS and HTML layout and positioning with floats, inline-block elements, and uniquely positioned elements.
Read more >
CSS · Bootstrap 3.0.3 Documentation - BootstrapDocs
That padding is offset in rows for the first and last column via negative ... Therefore, applying any .col-md- class to an element...
Read more >
Modifier - Android Developers
Order is significant; modifier elements that appear first will be applied first. ... A Modifier that can add padding to position the content...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found