question-mark
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.

Feature Request: Create prop to add margin between elements

See original GitHub issue

I’m increasing horizontal margin on VueCarousel-slide, but the carousel is being cut off.

image

I can set flex-basis manually but it doesn’t get updated with resolution changes.

  <carousel :perPage="5" :navigationEnabled="true" :paginationEnabled="false">
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
    <slide>
      <img src="http://via.placeholder.com/300">
    </slide>
  </carousel>
</template>

<script>
import { Carousel, Slide } from 'vue-carousel';

export default {
  components: {
    Carousel,
    Slide,
  },
};
</script>

<style lang="scss">
  $margin: .5%;
  $padding: 1%;

  .VueCarousel-inner {
    /*flex-basis: 327px !important;*/
  }

  .VueCarousel-slide {
    margin: 0 $margin 0 $margin;
    padding: $padding $padding $padding $padding;
    border: 2px solid #0e5a7e;

    img {
      width: 100%;
    }
  }

  .VueCarousel-navigation-button {
    color: inherit !important;
  }
</style>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:18
  • Comments:15 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
oruj91commented, Mar 21, 2020

with padding is bool sheet

2reactions
KaragiannidesAgapioscommented, Jul 17, 2019

@markus361 Maybe a bit late to answer but I had the same issue. I check this thread, understand the problem and my solution was, this one:

if feasible, do not apply padding or border directly to a flex child. Allow the flex child to be a containing element to another element that will receive the padding or border. This is somewhat undesirable because avoiding this sort of extra markup is one the big benefits of box-sizing:border-box;.

        .VueCarousel-slide > div {
            padding-left: 15px;
            padding-right: 15px;
        }

This solved the problem for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Layout Margins in Styled-Components
Set margin with styled-components · Pass inline styles as props · Reusable Margin wrapper in SC · Pass margins as props · Target...
Read more >
margin - CSS: Cascading Style Sheets - MDN Web Docs
This property can be used to set a margin on all four sides of an element. Margins create extra space around an element,...
Read more >
How to add padding and margin to all Material-UI ...
You can use de "Spacing" in a BOX component just by importing the component first: import Box from '@material-ui/core/Box';.
Read more >
Designing a modern UI theme with Open Props
We'll begin by creating the folder structure for the UI design. ... and the margin-left property to add spacing between the items.
Read more >
API Reference
If you want to prevent props meant to be consumed by styled components from being passed to the underlying React node or rendered...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found