jQuery Mobile - Flip Switch Fieldcontain

Description

Adding ui-field-contain class to the div will ensure that the form to display flip switch will be rendered responsively.

Example

Following example demonstrates the use of fieldcontain in flip switch in jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <title>Flip Switch Fieldcontain</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>
      <form>
         <div class = "ui-field-contain">
            <label for = "flip">Flip Toggle Switch:</label>
            
            <select name = "flip" id = "flip" data-role = "slider">
               <option value = "off">Off</option>
               <option value = "on">On</option>
            </select>
            
         </div>
      </form>
   </body>
</html>

Output

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

Save the above html code as slider_flip_fieldcontain.html file in your server root folder.
Open this HTML file as http://localhost/slider_flip_fieldcontain.html and the following output will be displayed.

jquery_mobile_widgets.htm

Kickstart Your Career

Get certified by completing the course

Get Started