Plugins Not Upgraded to New Flexbox, Make them Responsive

Recently dealt with an issue in which a visual element from a plugin that has not been upgraded to the new flexbox system is not responsive in the new flexbox system…well they are sort of. Bubble likely made a change to the codebase to allow the width to stretch to fill the entire container element, but didn’t go so far as to make the height also stretch to fill the container element; so to make it fully responsive a little custom code is needed.

To get started you need to install the classify plugin. The reason for this is simply using the ID attribute and the HTML style with ID using # in front of the ID attribute value doesn’t work (I dunno why not but it doesn’t). BUT, when using the . in front of the ID attribute value and the classify plugins required ID attribute structure it does.

Below are screen shots.

Screen Shot 2023-02-23 at 12.48.09 AM
Screen Shot 2023-02-23 at 12.48.00 AM

Notice the difference of ID attributes for the map-container and the changemap…changemap uses the classify structure.

In my HTML I use min-height, max-height and height to ensure the value is kept.

For anybody curious about the map-container values, using the calc function allows you to adjust the full page height or width by values of other elements on the page, so in my instance, the map-container is needing to take into consideration the header height, another groups height as well as the 20px of padding and 15px of gap between elements to get my design just right.