JQuery mobile / input text in listview

Question

I have several input fields which are inside a listview entry. So now i´m trying to style the CSS of the input fields in such a way that it looks like a normal listview entry.

The input field will be filled out by angular´s ng-model, but this is not really important.

This is what i did so far, but i think i need help with margin/padding etc.

// CSS input
.ui-input-text{ 
  border: none !important;
  box-shadow: none !important;
  background-color : transparent;
}

// HTML
<ul data-role="listview" data-divider-theme="b">
<li data-role="list-divider">Verbraucher</li>
<li data-mini="true"> <a href="#">
// This should look like a "normal" listview entry!
<input type="text" ng-model="cust.firstname" name="cust_firstname" required>    
</a></li>
...

listview

Both should look like the same!

We are not understanding your query, can u put some code or set up a fiddle? — Akki619
– Akki619, Commented Jul 31, 2013 at 9:54

user2409138 · Accepted Answer · 2013-07-31 14:52:49Z

3

Try to add the following into your css:

.ui-input-listview {
  margin-top: -1em !important;
  margin-bottom: -1em !important;
  margin-left: -0.5em !important; /* If you want to fix left as well */
  margin-right: -0.5em !important; /* If you want to fix right as well */
}

And then, for the input in the listview, set the class to ui-input-listview

<input class="ui-input-listview" type="text" ng-model="cust.firstname" name="cust_firstname" required="required">

Collectives™ on Stack Overflow

JQuery mobile / input text in listview

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related