Menu icon Foundation
Inline form issue

Hey all.

My first post in this amazing forum. Stoked to be on board.

Okay. I have found that when using Foundation to generate inline forms, I will have a column (Eg. below image is a sidebar in Wordpress). Where the submit button starts is where the fieldgroup is meant to end.

 Inline form issue with button going outside of the form space.

It is like the input field is taking up the full width and then sticking the button on at the end. The code that I used for this is:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<div class="input-group">
 
  <input class="input-group-field" type="text">
  <div class="input-group-button">
    <input type="submit" class="button" value="Submit">
  </div>
</div>
</form

 

It is straight form the zurb Fooundation 6 sites documentation which was working perfectly. I thought it may have been a partial that I was not including but I have the form partial so that kind of (possibly) rules out that idea.

My last thought is that there may be a class that I need to stick into one of the tags. Any insight would be muchly appreciated.

 

Peace and Props.

Murray

forminlinewordpressfoundation 6

Hey all.

My first post in this amazing forum. Stoked to be on board.

Okay. I have found that when using Foundation to generate inline forms, I will have a column (Eg. below image is a sidebar in Wordpress). Where the submit button starts is where the fieldgroup is meant to end.

 Inline form issue with button going outside of the form space.

It is like the input field is taking up the full width and then sticking the button on at the end. The code that I used for this is:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<div class="input-group">
 
  <input class="input-group-field" type="text">
  <div class="input-group-button">
    <input type="submit" class="button" value="Submit">
  </div>
</div>
</form

 

It is straight form the zurb Fooundation 6 sites documentation which was working perfectly. I thought it may have been a partial that I was not including but I have the form partial so that kind of (possibly) rules out that idea.

My last thought is that there may be a class that I need to stick into one of the tags. Any insight would be muchly appreciated.

 

Peace and Props.

Murray

This post has been closed. No new replies can be added.

Murray Chapman almost 2 years ago

Just realised the pasted code left off the last > on the closing form tag. That is in the code that is not working so overlook that please.

Murray Chapman almost 2 years ago

Any takers? Could really use some insight here other than using a row class and two columns for the form parts. Bootstrap can do it pretty easily. I may need to go over and see how they did it and port it over.

Roy Six over 1 year ago

Strange. I don't see the problem with the shortened Submit button when I paste your code into a codepen. I did encapsulate the form in a row so it wouldn't stretch to the full screen, though: https://codepen.io/sixs/pen/GvRGBP


I'm assuming your using the float grid because you're using words like "row" and "columns" and some version of Foundation 6?

Foundation's input-group-button should have a height of 2.5 rem (or something like that). I have seen situations where the Submit button is like 1-2px shorter than the text field, but not quite as short as like yours is (it literally looks like there is no height being set on it, but the problem could be something else).

Murray Chapman over 1 year ago

Hi Roy.

Very interesting and thanks for the feedback. To be honest, I was hoping that it was something that I had done and that it was not a bug with Foundation. I'm starting to think that it had to be something that I have done even thought it is nothing obvious. For some reason, the text field was going full width and pushing out the button. 

Time for some more digging but really appreciate an outside perspective.

Cheers and props.

Murray