Anjum Anjum - 22 days ago 8
CSS Question

JQuerymobile How to Remove Row Space Between Input Fields

I am using Cordova/JQuery Mobile

I am trying to develop a settings page with multiple input fields. I would to like remove the spacing between the rows but I am unable to find any solution.

enter image description here

Here is the HTML

<div id="container">

<input type="text" data-mini="true" data-inline="true" id="SettingsCat0" />
<input type="text" data-mini="true" data-inline="true" id="SettingsCat1" />
<input type="text" data-mini="true" data-inline="true" id="SettingsCat2" />
<input type="text" data-mini="true" data-inline="true" id="SettingsCat3" />
<input type="text" data-mini="true" data-inline="true" id="SettingsCat4" />

</div>


And here is the Demo

Mdk Mdk
Answer

Add this CSS rule in your html or in a CSS file that gets loaded after the jQuery one:

input.ui-input-text.ui-mini, textarea.ui-input-text.ui-mini, .ui-input-search.ui-mini, div.ui-input-text.ui-mini {
    margin: 0;
}
Comments