jQuery Mobile - Mini sized Buttons in grids

Description

In an element, include the attribute data-mini = "true" for creating a mini version of the button. It is useful in toolbars and tight spaces for more compact version.

Example

Following example demonstrates the use of mini sized button grid in the jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <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>
      <h2>Mini Size Button Grid Example</h2>
      <div class = "ui-grid-b">
         <div class = "ui-block-a">
            <a class = "ui-btn ui-corner-all ui-shadow ui-btn-b ui-mini">
               Using Anchor Tag</a>
         </div>
         
         <div class = "ui-block-b">
            <button class = "ui-btn ui-corner-all ui-shadow ui-btn-a ui-mini">
               Using Button</button>
         </div>
         
         <div class = "ui-block-c">
            <input type = "button" value = "Using Input Tag" data-mini = "true" />
         </div>
      </div>

      <div class = "ui-grid-b">
         <div class = "ui-block-a">
            <label for = "grid-select-1" class = "ui-hidden-accessible">Select</label>
            <select id = "grid-select-1" data-mini = "true">
               <option>Select</option>
               <option value = "1">First Option</option>
               <option value = "2">Second Option</option>
               <option value = "3">Third Option</option>
            </select>
         </div>
         
         <div class = "ui-block-b">
            <label for = "grid-checkbox-1">Checkbox</label>
            <input type = "checkbox" id = "grid-checkbox-1" data-mini = "true" />
         </div>
         
         <div class = "ui-block-c">
            <label for = "grid-radio-1">Radio</label>
            <input type = "radio" id = "grid-radio-1" data-mini = "true" />
         </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 button_grid_mini_sized.html file in your server root folder.
Open this HTML file as http://localhost/button_grid_mini_sized.html and the following output will be displayed.

jquery_mobile_layouts.htm

Kickstart Your Career

Get certified by completing the course

Get Started