CODEWITHSUNDEEP
javascripthtmlhtml-framework-7
JunM
JunM

Reputation: 7150

input text outside UL tag, possible?

I am learning framework7 and I wonder if it is possible to create an input type="text" outside UL tag. On the code below, the css is not rendering on my textfield. Please see code comments.

And here is the fiddle.

<!-- THIS WILL WORK -->
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
              <input type="text" name="name">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>   

<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<!-- THE CSS WON'T WORK ANYMORE, IDK WHAT IS THE CORRECT CSS CLASS EITHER TO WRAP THE ELEMENT -->
<div class="content-block">
  <input type="text" />
</div>

Upvotes: 0

Views: 480

Answers (1)

tinyCoder
tinyCoder

Reputation: 360

If you put the input outside the list, you will lose the separating lines, but it is possible adding the required classes:

<!-- THIS WILL WORK -->
<div class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-input">
              <input type="text" name="name">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>   

<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<div class="content-block list-block">
  <div class="item-input">
      <input type="text" value="text here" />
  </div>
</div>

Here: https://jsfiddle.net/k5gd7Lww/10/

Upvotes: 1

Related Questions