¿Cómo cambiar el tamaño de los elementos de jQuery Mobile como botones de volteo, listas, etc. para navegadores de escritorio?

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>

preguntado el 01 de febrero de 12 a las 03:02

@PhillPafford Thanks for your reply. I've posted the code above. -

1 Respuestas

Respondido 01 Feb 12, 08:02

Could you please explain your update. What should I need to do with JSFiddle? - user1076517

jsfiddle.net is a test environment to execute code in, for the Full page view I have provided I've demonstrated you search button is no longer the full width of the screen. Applying some of the techniques found in the jQM Documentation will help you make the needed changes you want - Phill Pafford

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.