group horizontally a textinput and a checkbox

group horizontally a textinput and a checkbox

Dear all,

I am trying to design a web site in jquery, but I am struggling with a display problem.

I would want to display a search screen with an optional date (optional is selected with a checkbox placed at the right of the date entry field.

I tried with an horizontal controlgroup (from http://demos.jquerymobile.com/1.4.5/forms-field-contain/), but each time, the date entry and the checkbox are displayed vertically instead of horizontally.

I copy-paste the full html code of a simplified example that does not work.

Thanks in advance for your help,

Regards,
Brice

  1. <!DOCTYPE html>
    <html lang="fr">
    <head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
    <div data-role='page'>
    <div data-role=content >
        <div style="width:100%;">
              <fieldset style="border: 1px solid rgb(233,233,233);">
              <legend style="color:rgb(233,233,233);font-weight:bold;">Search Parameters</legend>
              <table>
              <tr><td>Lastname</td><td><input name="text-1" value="" type="text"></td></tr>
              <tr><td>Firstname</td><td><input name="text-1" value="" type="text"></td></tr>
              <tr><td>BirthDate</td><td>
                <div class="ui-field-contain">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <input data-role="date" type="text">
                        <input name="checkbox-0 " type="checkbox">
                    </fieldset>
                </div>
              </td></tr>
              </table>
              </fieldset>
    </div>
    </div></div>
    </body>
    </html>