Problem pre- and post-fix round form styles

[davidrhoderick]

Rafi Benkual took part in this thread regarding a problem with pre-fix (and post-fix) round forms not working. Basically, if you copy and paste the example code for post-fix round (which was my personal experience) into a project with Foundation, you won't get the double rounded appearance as in the docs. I don't know where the error is exactly and their is quite a lot of talk in the thread about fixing this issue for the top bar even though it is also present if used in the body of a page. I was able to fix it by adding this:

input[type=text].postfix.round,
input[type=email].postfix.round {
  border-radius: 1000px 0 0 1000px;
}

in my custom .scss files but I don't think that developers should have to amend the library to get standard functionality. Let me know if I can clarify some more.

[brendanvinson]

Am experiencing this same issue for postfix-radius as well for forms outside of the navigation:

1. With the code directly from the docs, the input and button are unaffected.
2. Adding radius to the button rounds the outside corners as expected.
3. Adding radius to the input element rounds all corners.

The code below fixes it:

.postfix-radius {
     input {
        border-top-left-radius: $global-radius;
        border-bottom-left-radius: $global-radius;
    }
    .postfix {
        border-radius: 0;
        border-top-right-radius: $global-radius;
        border-bottom-right-radius: $global-radius;
    }
}

[quinncomendant]

I just noticed this, and I think the problem is due to a requirement for the input field to be nested within two levels of .row. The code from the example page, simplified below, is acted upon by the selector form .row .postfix-round.row.collapse input { … }.

<div class="row">
  <div class="large-6 columns">
    <div class="row collapse postfix-round">
      <div class="small-9 columns">
        <input type="text" placeholder="Value">
      </div>
      <div class="small-3 columns">
        <a href="#" class="button postfix">Go</a>
      </div>
    </div>
  </div>
</div>

It is assumed it would work with the selector .postfix-round.row.collapse input { … }, in which case the code could be as simple as:

<div class="row collapse postfix-round">
  <div class="small-9 columns">
    <input type="text" placeholder="Value">
  </div>
  <div class="small-3 columns">
    <a href="#" class="button postfix">Go</a>
  </div>
</div>

@ventismith's suggestion works, although it might be good to keep the .collapse selector, since it's required to avoid a gap between the columns.

[quinncomendant]

I got this working by moving lines 438-465 from _forms.scss out from within the form { .row { … } }.

[SalahAdDin]

What's about this feature in Foundation ???

[rafibomb]

This is resolved in F6. A PR would be merged for this. We'll close this here - thanks!