vue-agile icon indicating copy to clipboard operation
vue-agile copied to clipboard

Not possible to place agile in a flex

Open philippeluickx opened this issue 5 years ago • 3 comments
trafficstars

Describe the bug I would like to put the carousel in a

with display: flex; The reason is that I want to vertically center the carousel on my screen

Code https://codepen.io/lukaszflorczak/pen/EJRNMM Just change the CSS of the app block to be display: flex;

To Reproduce Once the parent div is display: flex, then the carousel takes the whole width

Expected behavior Carousel works as with display: block parent div

Screenshots image

Environment:

  • OS: Windows
  • Browser Chrome

philippeluickx avatar May 21 '20 19:05 philippeluickx

Zrzut ekranu 2020-05-30 o 14 04 13

It looks that width: 100% for .agile class fix the problem.

lukaszflorczak avatar May 30 '20 12:05 lukaszflorczak

Branch issue-169 created!

You might need to add flex direction to make the dots show up below the slides.

.agile {
  width: 100%;
  flex-direction: column;
}

philippeluickx avatar Jun 03 '20 19:06 philippeluickx