I’m using jQuery Mobile for my application that runs mainly on desktop browsers. The

Question

0

Asked: May 29, 20262026-05-29T06:54:45+00:00 2026-05-29T06:54:45+00:00

I’m using jQuery Mobile for my application that runs mainly on desktop browsers. The

0

I’m using jQuery Mobile for my application that runs mainly on desktop browsers. The only problem I’m facing is the elements are stretched out as per the screen size.

For example: If viewed on a large monitor, the buttons take the whole screen size.

I was wondering, how can I control the size of these elements.

I was wondering, if I made a wrong choice by selecting jQM for desktop usage. But I really like the jQuery Mobile styles. Any alternatives for this.

<html>
<head>
<meta charset="utf-8">

<title>jQuery Mobile Testing Web App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="page">
    <div data-role="header">
         <a href="#" rel="external" data-ajax="false" data-role="button" data-icon="home" data-theme="b"> Dashboard </a>
        <h1>Testing Document</h1>

    </div>
    <div data-role="content">
    <form method="POST" action="#" data-ajax="false">
        <div data-role="fieldcontain">
          <ul data-role="listview" data-inset="true">
            <li data-role="list-divider"> <h3> Services </h3> </li>
             <li data-theme="a"> Class 1 </li>
            <li> <label for="flip-b">Element1</label>
                <select name="element1" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li>   
            <li> <label for="flip-b">Element2</label>
                <select name="element2" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li> 
             <li> <label for="flip-b">Element3</label>
                <select name="element3" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li> 
             <li> <label for="flip-b">Element4</label>
                <select name="element4" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li> 
             <li> <label for="flip-b">Element5</label>
                <select name="element5" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li> 
             <li> <label for="flip-b">Element6</label>
                <select name="element6" id="flip-b" data-role="slider">
                    <option value="no">No</option>
                    <option value="yes">Yes</option>
                </select>
             </li> 
              <li> 
                    <label for="select-choice-1" class="select">Main Location</label>
                       <select name="main_location" id="select-choice-1">
                          <option value="NSW">NSW</option>
                          <option value="ACT">ACT</option>
                          <option value="VIC">VIC</option>
                          <option value="SA">SA</option>
                          <option value="QLD">QLD</option>
                          <option value="NT">NT</option>
                          <option value="WA">WA</option>
                          <option value="TAS">TAS</option>
                        </select>                     
              </li> <!-- Select Menus: Main Location-->        

            </ul>
        </div> <!-- End of Field Contain div tag -->   
    <button type ="submit" data-role="button" data-inline="false" data-icon="search" data-iconpos="left" data-theme="b">Search</button>    
   </form>
   </div> <!-- End of Content div tag --> 
    <div data-role="footer">
        <h6>2012 &copy</h6>
    </div> 
</div>
</body>
</html>