jQuery Mobile - Flip Switch Fieldcontain


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


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

<!DOCTYPE html>
      <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>

         <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>


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.

Kickstart Your Career

Get certified by completing the course

Get Started