Menu icon Foundation
Problem with prefix-round

Can anyone tell me what has happened with prefix-round and postfix-round in latest Foundation version?
I lost rounded corners on my login form.

prefix-roundprefixpostfixround

Can anyone tell me what has happened with prefix-round and postfix-round in latest Foundation version?
I lost rounded corners on my login form.

Vladimir about 5 years ago

Forms example page has postfix-round and prefix-round in its CSS file as you can see it here
http://foundation.zurb.com/docs/components/forms.html
But in downloaded CSS file those definitions are missing.

Kris Livingstone about 5 years ago

I'm also having an issue with this... 5.3.3

Daniel Buk about 5 years ago

I'va managed to create postfix-radius imput with button by adding class="postfix radius" to input field and class="button postfix radius" to button.

I hope it will be any help for you
HTML
<div class="row collapse">
<div class="small-9 columns">
<input class="postfix radius" type="text" placeholder="Value">
</div>
<div class="small-3 columns">
<a href="#" class="button postfix radius">Search</a>
</div>
</div>

Kris Livingstone about 5 years ago

Appreciate the help, but in my case it works great in a regular div but not so much in Top Bar where I need it. Also, the input box shouldn't have a radius on both sides so the example you provided still doesn't fix my issue.

Daniel Buk about 5 years ago

I have the same issue. For me input box indeed has radius on both sides if it is in top-bar. When I used it in body it was OK. I found that there are default foundation classes ( input.radius[type="text"] ) that override my input radius in top-bar. To solve this problem I have overriden those classes:

.top-bar .top-bar-section input.postfix { border-radius: 3px 0 0 3px; }

Althougn now I have issues with height of button :)

Michael Pfister about 5 years ago

I can confirm this issue for 5.3.3 SASS

Seems like the logic has been changed:

CSS Before:
CSS
form .row .postfix-radius.row.collapse .postfix {
border-radius: 0;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-top-right-radius: 3px; }

CSS 5.3.3:
CSS
span.postfix, label.postfix {
background: #f2f2f2;
border-left: none;
color: #333;
border-color: #cccccc; }
span.postfix.radius, label.postfix.radius {
border-radius: 0;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px; }

So it seems we now need to add an additional radius class to the prefix/postfix span or button as Daniel said. The documentation isn't valid anymore.

Jeff Kinley about 5 years ago

Can somebody please clarify. Very frustrating to have incorrect docs. i have tried all sorts of permutations and can't get this to work.

Thanks,

Jeff

James Craine about 5 years ago

Yes, please update the docs. A lot seems to be breaking with these later versions of Foundation :/

Kris Livingstone about 5 years ago

I was able to get it to work, but I'm pretty sure even in 5.4.6 it's still broken.

This works for me in IE10, FF 32.0.2 and Chrome 38.0.2125.104 m. It'll have to do for now ;-)

.top-bar .button {
 line-height: 1rem;
 height: 2.1rem;
}
.top-bar input {
 line-height: 1rem;
 height: 2.1rem;
}
@media only screen and (max-width: 40em) {
  .top-bar .button{
   top: 0;
  }
}
            <ul class="right">
         <li class="has-form">
          <form>
            <div class="row collapse postfix-radius">
              <div class="large-8 small-8 columns">
                <input type="search">
              </div>
              <div class="large-4 small-4 columns">
                <button type="submit" class="radius button postfix">Search</button>
              </div>
            </div>
          </form>
         </li>
            </ul>

Rafi Benkual about 5 years ago

@Micheal, Jeff, James -

Can you help by pointing to where the error is in the docs? I can fix that. I don't see where standard form classes are mentioned in top-bar http://foundation.zurb.com/docs/components/topbar.html

I do see the issue
http://codepen.io/rafibomb/pen/lcvjD

Kris Livingstone about 5 years ago

I'm so happy you see the issue Rafi. It seems a lot of foundation users have been troubled by this one. I know because I've attempted to compensate for the issue using various recommended fixes.

When you guys get a chance to look at it, please note the other issue when the top bar is in small screen/collapsed mode. There's a vertical alignment issue between the input and button (1 or 2px) hence why I've used the top: 0; for that media mode.

Brett Peary almost 5 years ago

Same problem here.

I just made two classes as a work around. Not the best solution, but it was driving me crazy.

// A fix for pre and postfix radius not working in Foundation. 
.prePostfix-radius--fix-left{
  border-radius: 3px 0 0 3px !important;
}
.prePostfix-radius--fix-right{
  border-radius: 0 3px 3px 0 !important;  
}

David Rhoderick over 4 years ago

I am using the 'foundation-rails' gem and this is still not working. A lot of the users here are providing a fix for radius even though this issue is actually listed for the round class. I have tried the documentation code, even copied and pasted the example into my code, and it still doesn't work. Here is the hack that is literally half working, since the postfixed button is rounded but the input box is not:

<div class="row collapse">
  <div class="small-9 columns">
    <input class="postfix round" type="text" placeholder="Value">
  </div>

  <div class="small-3 columns">
    <a href="#" class="button postfix round">Go</a>
  </div>
</div>

Also, I can get the input to work with a radius style, but that just looks ridiculous with a rounded button after that, and I need the round style to work. Any hack or fix for getting round to work?

Rafi Benkual over 4 years ago

The .has-form class is slightly different than the forms outside top-bar.
In the snippet on the docs, the button has the expand class but no postfix class. With this, the padding is preserved.

<a href="#" class="button expand">Search</a>

So what needs to be fixed is the border radius for the radius and round classes.

.has-form {
  .button.round {
    border-radius: 0 1000px 1000px 0;
  }
  .button.radius {
    border-radius: 0 5px 5px 0;
  }
}

example http://codepen.io/rafibomb/pen/KpgGvz?editors=110

Something like this, should be logged on GitHub so someone can fix it in the framework. Thanks!
https://github.com/zurb/foundation