Menu icon Foundation
Trouble making contents of Reveal Modal responsive

Hi there,

I'm having trouble creating a Responsive Reveal Modal.

I'm using it to create a search dialog, but I can not seem to use Foundation's grid or other classes to make it responsive.

I have used the usual suspects such as Grid, Columns classes.

I've done some searches and it appears others have struggled too?

Any suggestions on how to get it working?

It's hosted on the site Sprachspielspass.de

reveal modalrevealResponsiveresponsive designrwd

Hi there,

I'm having trouble creating a Responsive Reveal Modal.

I'm using it to create a search dialog, but I can not seem to use Foundation's grid or other classes to make it responsive.

I have used the usual suspects such as Grid, Columns classes.

I've done some searches and it appears others have struggled too?

Any suggestions on how to get it working?

It's hosted on the site Sprachspielspass.de

Rafi Benkual almost 4 years ago

Can you explain what you mean by "make it responsive"? It is responsive by default. Can you tell where on your site we have to click to see the example your working on?

http://sprachspielspass.de/

Francis Chung almost 4 years ago

Hi Rafi,

If you click on the top right button, the reveal modal pops up.

I've tried to use the grid with columns classes to make the contents of the reveal modal (Search text & button) responsive but I haven't been able to get it to work.

It's as if those classes have no effect for items within the modal itself.

Rafi Benkual almost 4 years ago

Looks like the issue is the floats you're using. Adding a class of .right or .left will float something. When you float something it will become display block and not allow things to be beside it.

Since you are using columns, you don't need floats. Also there is a postfix class for the button so it is the same height as the input. The collapse class on the row, will remove the padding between the input and button.

Also you were missing the .row wrapper for the columns. It is needed. Working example: http://codepen.io/rafibomb/pen/VvKWbz?editors=110

Francis Chung almost 4 years ago

I did use the Row wrapper before when I was experimenting.

It was interesting that you used a class called PostFix which I never came across before.
Your example was also using collapse which I didn't use.

Also I was using Right and expand on the button. But the small class I use using was affecting a lot of things it turns out. The search bar was based on the example from the Foundation Doc that "mutated" over time :)

It would be very helpful for new comers if there was documentation explaining some of these useful css classes like Collapse & Postfix. Do you know if there are any by any chance?

I have rebased the search bar based on your codepen and also included a media query to readjust the min-height that was being applied by Foundation that makes the modal very tall on small screens.

Thanks for your help again, Rafi !