Size of search input incorrect

RudolfVonKrugstein commented 8 years ago

I am trying out the tob-bar example/documentation.

When I do this, I get a topbar that looks like this:

http://i.stack.imgur.com/XSiWW.png

On the foundation example site: http://foundation.zurb.com/sites/docs/top-bar.html there is a notable difference: The size of the search input.

So some css is missing, and I think it is this, taken from the example sites css:

[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 2.4375rem;
    padding: 0.5rem;
    border: 1px solid #cacaca;
    margin: 0 0 1rem;
    font-family: inherit;
    font-size: 1rem;
    color: #0a0a0a;
    background-color: #fefefe;
    -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
    border-radius: 0;
    -webkit-transition: -webkit-box-shadow 0.5s, border-color 0.25s ease-in-out;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
}

Why is this not included, what do I have to do?

aruberto commented 8 years ago

In docs, I'm using plain HTML input:

            <TopBarItem position="right">
              <Menu>
                <MenuItem><input type="search" placeholder="Search" /></MenuItem>
                <MenuItem><Button>Search</Button></MenuItem>
              </Menu>
            </TopBarItem>

But to get the Foundation input styling I needed to be using this library's FormField component:

            <TopBarItem position="right">
              <Menu>
                <MenuItem>
                  <FormField>
                    <FormFieldInput  />
                  </FormField>
                </MenuItem>
                <MenuItem><Button>Search</Button></MenuItem>
              </Menu>
            </TopBarItem>

I implemented FormField after TopBar and forgot to go back and try to see if it worked with TopBar properly.

RudolfVonKrugstein commented 8 years ago

Ok, cool. Thanks! now it looks like this:

So the search input is not aligned with the button. I will investigate later when I have more time, but maybe you have another Idea?

RudolfVonKrugstein commented 8 years ago

Hey, Could it be that somehow the order of css statements is incorrect?

When inspecting in chrome, I see that for the react-foundation-components the rules are in different order than from the example site.

RudolfVonKrugstein commented 8 years ago

OK, I know why. In lib/forms/_styles.scss the import is like this:

.form-field {
  @include foundation-form-text;
  @include foundation-form-checkbox;
  @include foundation-form-label;
  @include foundation-form-helptext;
  @include foundation-form-prepostfix;
  @include foundation-form-select;
  @include foundation-form-error;

  @import './custom';
}

The extra .form-field makes the rules more specific than this rule:

.top-bar input {
    max-width: 200px;
    margin-right: 1rem;
}

So the order is different than on the foundation example site.

Removing the .form-field solves the problem here, but I do not know what other implications that hase.

aruberto / react-foundation-components

Size of search input incorrect #16