How to remove padding for Jquery Mobile Panel form?

html, jquery, jquery-mobile

Solution

Override `.ui-panel-inner`'s `padding`

.ui-panel-inner { 
  padding: 0 !important;
}

Demo

Problem

As soon as I add a form tag I get this nasty padding around the form elements. Is there any way around this? Screenshot: https://s3.amazonaws.com/thom-temp/jquerymobile-wtf.png ``` <div id="advancedSearch" data-role="panel" data-position="right" data-display="push"> <div data-role="header"> <h1>Search</h1> <a id="searchButton" href="#" class="ui-btn-right" data-role="button" data-theme="d" data-icon="search">Go</a> </div> <div data-role="content"> <form style="margin: 0px; padding: 0px;" id="yw2" action="/mshi/index-test.php/inspection/list" method="get"> <ul data-role="listview" data-inset="false" data-theme="a"> <li data-role="fieldcontain"> <input placeholder="Id" name="inspection[id]" id="inspection_id" type="text" /> </li> </ul> </form> </div> </div> ```

Original source