jQuery Mobile - Adding Padding


The toolbars will not have any padding for navbars and other widgets.

To add padding, you can wrap the content of the toolbars inside an element and add ui-bar class to the element.

You can also use your own custom CSS for padding.


Following example demonstrates the use of adding padding in jQuery Mobile.

<!DOCTYPE html>
      <title>Adding padding</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

      <div data-role = "footer">
         <div class = "ui-bar">
            <label for = "select-choice-1" class = "ui-hidden-accessible">City:</label>
            <select name = "select-choice-1" id = "select-choice" data-mini = "true" data-inline = "true">
               <option value = "India">Bengaluru</option>
               <option value = "Norway">Oslo</option>
               <option value = "Mauritius">Port Louis</option>


Let's carry out the following steps to see how the above code works −

  • Save the above html code as toolbar_adding_padding.html file in your server root folder.

  • Open this HTML file as http://localhost/toolbar_adding_padding.html and the following output will be displayed.

Kickstart Your Career

Get certified by completing the course

Get Started