so i'm using jquery mobile web application , i'm using ui-field-contain , ui-grid-a container divs content.
however, because of elements contained within appear set full width of screen , every element takes entire line on page (even span element).
i've been able adjust width size using css, however, put of these elements , i'm @ loss in terms of how accomplish since it's not i'm spacing them out br tags.
here's of code:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <!--css stylesheets--> <link rel="stylesheet" type="text/css" href="includes/css/style.css"> <!--jquery mobile stylesheets--> <link rel="stylesheet" type="text/css" href="includes/jquerymobile/jquery.mobile-1.4.5.min.css"> <!--jquery library--> <script src="includes/jquery/jquery-1.11.3.min.js"></script> <!--jquery mobile library--> <script src="includes/jquerymobile/jquery.mobile-1.4.5.min.js"></script> <!--jquery functions--> <script src="includes/js/functions.js"></script> </head> <body> <div data-role="page" data-theme="b"> <div data-role="header"> <h1> create survey </h1> </div> <div id="main" data-role="main" class="ui-content"> <form method="post" action="<?php echo $_server['php_self']; ?>"> <div class="ui-field-contain"> <div class="ui-grid-a"> <label for="addq" class="ui-hidden-accessible">add question</label> <input type="button" value="add question" id="addq" class="smallerbtns"> <!--transportation div--> <div id="container"> </div> <br> <label for="submitsurvey" class="ui-hidden-accessible">submit survey</label> <input type="submit" value="submit survey" id="submitsurvey"> </div> </div> </form> </div> <div data-role="footer" data-position="fixed"> <nav data-role="navbar"> <ul> <li><a href="index.php">home</a></li> <li><a href="createsurvey.php">create survey</a></li> <li><a href="takesurvey.php">take survey</a></li> </ul> </nav> </div> </div> </body> </html> and here of content appending via javascript container div:
//question type visibility $(document).bind("pageinit",function(){ $("#container").empty(); //reset qcount qcount = 0; //jquery add question event $(document).undelegate('#addq', 'click').delegate('#addq','click', function() { //increment question counter qcount++; $('\ <div id="newq' + qcount + '">\ <span id="num' + qcount + '" class="nums">' + qcount + '.</span>\ \ <!--question title-->\ <label id="qtitlelabel' + qcount + '" for="qtitle" class="ui-hidden-accessible">\ question title:\ </label>\ <input type="text" name="qtitle' + qcount + '" id="qtitle' + qcount + '" placeholder="question title">\ \ <!--question type-->\ <label id="qtypelabel' + qcount + '" for="addqtype' + qcount + '" class="ui-hidden-accessible">\ question type:\ </label>\ <select name="addqtype' + qcount + '" id="addqtype' + qcount + '" class="' + qcount + '">\ <option selected disabled hidden value=\'\'>pick type</option>\ <option value="smalltextdiv">small text</option>\ <option value="torfdiv">true or false?</option>\ <option value="dropdowndiv">dropdown</option>\ <option value="numdiv">number</option>\ <option value="raddiv">radio buttons</option>\ <option value="largetextdiv">large text</option>\ <option value="checkboxdiv">checkboxes</option>\ </select>\ \ <!--small text-->\ <div id="smalltextdiv' + qcount + '" class="types' + qcount + '">\ <label id="addqsmalltextlabel' + qcount + '" for="addqsmalltext' + qcount + '">\ preview:\ </label>\ <input type="text" name="addqsmalltext' + qcount + '" id="addqsmalltext' + qcount + '">\ </div> ').hide().appendto("#container").fadein(1000).enhancewithin(); }) //end add question }) //end document ready function
this page should grids... http://demos.jquerymobile.com/1.4.1/grids/
if need have form elements inline (side side) should able use grids complete layout using nested grids
<div class="ui-grid-a"> <div class="ui-grid-a"><div> <div class="ui-grid-b"><div> </div> see fiddle... http://jsfiddle.net/j5zbb/
Comments
Post a Comment