CODEWITHSUNDEEP
htmlcsszurb-foundation
Andrew Jones
Andrew Jones

Reputation: 1001

Inline ul with input when using Foundation

I'm using Foundation and I'm having difficulties in getting a list to display inline with an input field.

I have a Plunkr: http://plnkr.co/edit/jKWAWs6oI0TT44vJWvKu?p=info

My markup is as follows:

 <body>
    <div class="row">
      <div class="small-3 columns">
        <label class="right inline">Label</label>
      </div>
      <div class="small-9 columns">

          <input type="text" />
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
          </ul>

      </div>
    </div>
  </body>

I've tried putting the input and ul in a span and set both to float left but it's not working.

In my application the ul will contain a list of validation errors. I'm using Angular and the ul is dynamically added once the input is validated so I don't want to change the markup to put the ul in another div alongside.

Upvotes: 0

Views: 204

Answers (1)

Hieu Le
Hieu Le

Reputation: 8415

There are some issues in your code:

  • The priority of your CSS rules is lower than which defined in Foundation. Therefor, your padding, margin, and float properties is overridden. I increase the priority of the CSS rules by adding an additional class

  • The width of your input is 100% (set by Foundation), you need to reduce its width to make the input and ul can be displayed at the same line.

My CSS

.myinput input,
.myinput ul {
  float: left;
  margin: 0 4% 0 0;
  padding: 0;
  width: 45%;
}
li {
  list-style-type: none;
}

and HTML (take a look at myinput class):

<div class="small-9 columns myinput">

  <input type="text" />
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>

</div>

The online demo is here: plunkr

Upvotes: 1

Related Questions