jQuery Mobile - Adding Padding

Description

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.

Example

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

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <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>
   </head>

   <body>
      <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>
            </select>
         </div>
      </div>
   </body>
</html>

Output

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.

jquery_mobile_widgets.htm
Advertisements