Menu icon Foundation
Form postfix-radius definition

Hello everyone.
In forms, there is a piece of code:

...
form .row .postfix-radius.row.collapse input
...

which makes input and postfix rounded/"radiused" :)
Why there is the ".row" part after the form? Isn't it redundant? Why should be there another row? My structure is completly fine without it.

<form>
	<div class="row collapse postfix-radius">
		<div class="medium-11 columns">
			<input type="search" placeholder="search..." />
		</div>
		<div class="medium-1 columns">
			<button type="submit" class="postfix">
				icon search
			</button>
		</div>
	</div>
</form>

In this code, radius postfix doesn't work, because there isn't any another row between form and postfix-radius.
Am I missing something or is it a bug?
Now I'm forced to put another row/column there as workaround.
I Hope not writting nonse :)

(not native english gentelman, sorry)

formpostfixradius

Hello everyone.
In forms, there is a piece of code:

...
form .row .postfix-radius.row.collapse input
...

which makes input and postfix rounded/"radiused" :)
Why there is the ".row" part after the form? Isn't it redundant? Why should be there another row? My structure is completly fine without it.

<form>
	<div class="row collapse postfix-radius">
		<div class="medium-11 columns">
			<input type="search" placeholder="search..." />
		</div>
		<div class="medium-1 columns">
			<button type="submit" class="postfix">
				icon search
			</button>
		</div>
	</div>
</form>

In this code, radius postfix doesn't work, because there isn't any another row between form and postfix-radius.
Am I missing something or is it a bug?
Now I'm forced to put another row/column there as workaround.
I Hope not writting nonse :)

(not native english gentelman, sorry)

Rafi Benkual almost 5 years ago

A row is a container for columns. The row class applies a max-width. In order to make forms responsive, we created mixins built with the grid so you can easily divide form elements in specific width that are fluid, rather than fixed.

The recommended structure will yield you the best results.

Ondřej Vašíček almost 5 years ago

Hi, thanks for the answer.

I hope I know, what .row and .column are.
But take a look on my code. Let's say, it's form on simple site, right under the body. There is a "form" element, which isn't under any .row or .column, because it has to by full wide.
Under it, there is a classic foundation layout with row. and .column. (I had there class for large as well, but let's leave it simple).

This form is perfectly fine, it’s working like a charm. I don't see any broken rules there.
But the css rule "form .row .postfix-radius.row.collapse input", isn't apply for it.

It's seems to me, like foundation doesn't cover this proper situation.
Or can you please explain, what is the benefit from adding another .row and .column. Because it if course doesn't any visible change or anything. And even if there was, it doesn't say why the css shouldn't work on my example.

I see pretty easy and quick solution - just delete the ".row" part after the form. I think it doesn't have any reason.

Thanks and once again for your work on Foundation. It's great tool.

Rafi Benkual almost 5 years ago

Thanks for the extra info- I guess I still don't understand what the problem is. I made a simple postfix button mockup here http://codepen.io/rafibomb/pen/MYXjww

The from styles require the grid to create a postfix and collapse. Otherwise you have to write your own CSS.

Ondřej Vašíček over 4 years ago

Hi Rafi,
I don't talk just about postfix, but about radius postfix.

Your example is excellent. I just added a "postfix-radius" there.
Take a look on it - http://codepen.io/anon/pen/myaoaY

You see? It doesn't work and it should be. The both input and postfix should have radius, but because of the css rule I showed earlier, they don't.

You have to add another .row and .column elements right above your code, and then it works.
Look - http://codepen.io/anon/pen/ogJVJa

And that's the bug. It should work without the redundant .row and .column

The solution is very easy, just get rid of the ".row" part in css/sass definition, right after the "form" part
CSS
form .row .postfix-radius.row.collapse input

Hope it's clear now. The codepen is great tool for it.