How to declare `display:flex` inside an element with `popover` attribute ?
https://codepen.io/sougataghar47/pen/NPKBEmd I am trying to make an image slider which would navigate horizontally instead of vertically
16 Replies
You can use display: flex in a popover element just as normal.
Your codepen works fine if you declare flex and update the JS to slide horizontally rather than vertically.
if I declare display flex , it stays permanently open
I don't want that
i want it to stay open and close. I want it to have flex when it opens and none when it close
i think js can do it but there must be some css state for popover
Have you tried using the "popover-open" pseudo-class?
its gone for some reason š¦
nvm it doesnt work in firefox š
, just opened it in chrome
It works for me in Firefox
Do you have normal or developer edition ?
normal. I am on mac though so it might be different to Windows (if that is what you are using) though I doubt it.
I generaly develop on Firefox as I prefer the dev tools and also am generally sure that things will work cross-browser as it tends to lag behind Chromium browsers in terms of adapting newer CSS properties etc.
I am on windows , yeah and I prefer firefox too
btw any tips on how to make the image cover the full container?
This was my test.
https://codepen.io/cbolson/pen/raBrEjz
It is nothing more than a fork of your pen with the added popover-open and the change to the JS to give it horizontal scroll.
Ah yes, I also added object-fit: cover on the images so that don't distort.
Try adding flex-basis: 400px to the images (ie the same value as the container width)
ooh , forgot that would work . it works flawless now , thank you for your help š«”
hi again ,i added more images and its glitchy like this , can you take a look ? https://codepen.io/sougataghar47/pen/NPKBEmd
To be honest I would probably use grid for this. By it's very nature, flex is not good at defining exact width contents, whereas this is one of grids (many) strong points.
I would also place the gallery/images within a child container so that you don't have issues with the popover element. This child container would be the one that has the grid display etc rather than the main popover.
A new fork of your current pen with these suggested changes.
Finally, (note - I have not updated my fork of your pen with this), now that you have a child container, I would modify the JS to translate this from side to side as a unit rather than each image. This would mean less work/modifications in the DOM and reduce the possibility of miss-alignment.
gotcha and thanks again for helping me out , you can delete your fork , I have forked it
š