card-columns and google maps issue

[cjshaw1976]

Good day,

There is a silly bug when you insert a google map in a card div, inside a card-columns div and it seems to be something to do with the column count property. There are 4 div's in my case, 2 below and 2 above the map that prevent any other element being clicked. In my example below, the update address button cannot be clicked.

I have tried playing around with the z-index of the button, but this does not work.

[florianlacreuse]

Can you provide a live demo with a reduced test case?

[cjshaw1976]

Will work on it now

…

On 11 Jun 2019, at 10:19, Florian Lacreuse ***@***.***> wrote: Can you provide a live demo with a reduced test case? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#28891?email_source=notifications&email_token=ADFSA2DJDTPHJCGVVZH4D73PZ5NXRA5CNFSM4HW3JGA2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXMKD3Y#issuecomment-500736495>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADFSA2BJEQHTIRRHBBNBRDDPZ5NXRANCNFSM4HW3JGAQ>.

[cjshaw1976]

I have created two fiddles. The only difference is one uses 'card-deck' and the other 'card-columns'.

With card-columns, you cannot click the button as a hidden part of the map is in the way. In fact you can even drag the map from over the button: https://jsfiddle.net/cjshaw/ws46qbv1/

With card-deck, you can click the button and everything works as you would expect: https://jsfiddle.net/cjshaw/ws46qbv1/1/

[mdo]

Card columns use the columns CSS property. If you need columns and have stuff like Google Maps to place within, I'd suggest the grid versus a browser-based content layout mechanism. Content is distributed so oddly across CSS columns and I'm betting they have no idea how to handle these kind of objects within.

Food for thought on eliminating the .card-columns class outright in v5 given their confusion and problems we've seen, @twbs/css-review.

[morrissey-ingenious]

I don't think its a Bootstrap issue ... it only happens in Google Chrome.

[mdo]

Closing as a won’t/can’t fix.