jquery mobile inline text input and button

I start to work with Jquery mobile, and I faced a problem that in a regular HTML code it is effortless to solve her.

The problem:
I try to split the page like in the picture below-

Picture- The way I want the page would looklike

In the left page, I want to add dropdown list(That's not the problem), and in right left of the screen I want to add the "Age" and two text box in the same line! but it does not let me add everything in the same line

My question, is there an easy way to it, for example like bootstrap?
What is the best way to combine features inline in Jquery mobile?

Thanks.

edited Nov 12 at 14:57

asked Nov 12 at 14:56

Gavriel

try the css display property, display:inline should do the trick (if the elements are small enough)
– john Smith
Nov 12 at 14:57

use float:left n float:right with clear:both styling
– Himanshu Ahuja
Nov 12 at 15:04

add a comment |

I start to work with Jquery mobile, and I faced a problem that in a regular HTML code it is effortless to solve her.

The problem:
I try to split the page like in the picture below-

Picture- The way I want the page would looklike

My question, is there an easy way to it, for example like bootstrap?
What is the best way to combine features inline in Jquery mobile?

Thanks.

edited Nov 12 at 14:57

asked Nov 12 at 14:56

Gavriel

try the css display property, display:inline should do the trick (if the elements are small enough)
– john Smith
Nov 12 at 14:57

use float:left n float:right with clear:both styling
– Himanshu Ahuja
Nov 12 at 15:04

add a comment |

I start to work with Jquery mobile, and I faced a problem that in a regular HTML code it is effortless to solve her.

The problem:
I try to split the page like in the picture below-

Picture- The way I want the page would looklike

My question, is there an easy way to it, for example like bootstrap?
What is the best way to combine features inline in Jquery mobile?

Thanks.

edited Nov 12 at 14:57

asked Nov 12 at 14:56

Gavriel

I start to work with Jquery mobile, and I faced a problem that in a regular HTML code it is effortless to solve her.

The problem:
I try to split the page like in the picture below-

Picture- The way I want the page would looklike

My question, is there an easy way to it, for example like bootstrap?
What is the best way to combine features inline in Jquery mobile?

Thanks.

html jquery-mobile

edited Nov 12 at 14:57

asked Nov 12 at 14:56

Gavriel

edited Nov 12 at 14:57

asked Nov 12 at 14:56

Gavriel

edited Nov 12 at 14:57

asked Nov 12 at 14:56

Gavriel

asked Nov 12 at 14:56

Gavriel

asked Nov 12 at 14:56

Gavriel

try the css display property, display:inline should do the trick (if the elements are small enough)
– john Smith
Nov 12 at 14:57

use float:left n float:right with clear:both styling
– Himanshu Ahuja
Nov 12 at 15:04

add a comment |

try the css display property, display:inline should do the trick (if the elements are small enough)
– john Smith
Nov 12 at 14:57

use float:left n float:right with clear:both styling
– Himanshu Ahuja
Nov 12 at 15:04

try the css display property, display:inline should do the trick (if the elements are small enough)
– john Smith
Nov 12 at 14:57

use float:left n float:right with clear:both styling
– Himanshu Ahuja
Nov 12 at 15:04

add a comment |

1 Answer
1

active

oldest

votes

Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/

Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.

Default grid cells are evenly distributed, but You can override the default width easily. Moreover, by using the ui-responsive class the grid will be responsive by stacking the grid blocks at narrow widths.

Here is a playground:

.ui-grid-a > .ui-block-b {

  text-align: right;

}



.ui-grid-solo > .ui-block-a {

  white-space: nowrap;

}



.ui-mobile .ui-grid-solo label {

  display: inline;

}



.ui-grid-solo .ui-input-text {

  width: 30%;

  display: inline-block;

  margin-right: 5px;

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

</head>

<body>

  <div data-role="page">

    <div role="main" class="ui-content">

      <div class="ui-grid-a ui-responsive">

        <div class="ui-block-a">

          <select data-native-menu="false">

            <option value="1">The 1st Option</option>

            <option value="2">The 2nd Option</option>

            <option value="3">The 3rd Option</option>

            <option value="4">The 4th Option</option>

          </select>

        </div>

        <div class="ui-block-b">

          <div class="ui-grid-solo">

            <div class="ui-block-a">

              <label for="textinput-3">Range:</label>

              <input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">

              <label for="textinput-4">-</label>

              <input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">

            </div>

          </div>

        </div>

      </div>

      <hr>

    </div>

  </div>

</body>



</html>

answered Nov 12 at 22:46

deblocker

5,09021234

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53264731%2fjquery-mobile-inline-text-input-and-button%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/

Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.

Here is a playground:

.ui-grid-a > .ui-block-b {

  text-align: right;

}



.ui-grid-solo > .ui-block-a {

  white-space: nowrap;

}



.ui-mobile .ui-grid-solo label {

  display: inline;

}



.ui-grid-solo .ui-input-text {

  width: 30%;

  display: inline-block;

  margin-right: 5px;

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

</head>

<body>

  <div data-role="page">

    <div role="main" class="ui-content">

      <div class="ui-grid-a ui-responsive">

        <div class="ui-block-a">

          <select data-native-menu="false">

            <option value="1">The 1st Option</option>

            <option value="2">The 2nd Option</option>

            <option value="3">The 3rd Option</option>

            <option value="4">The 4th Option</option>

          </select>

        </div>

        <div class="ui-block-b">

          <div class="ui-grid-solo">

            <div class="ui-block-a">

              <label for="textinput-3">Range:</label>

              <input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">

              <label for="textinput-4">-</label>

              <input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">

            </div>

          </div>

        </div>

      </div>

      <hr>

    </div>

  </div>

</body>



</html>

answered Nov 12 at 22:46

deblocker

5,09021234

add a comment |

Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/

Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.

Here is a playground:

.ui-grid-a > .ui-block-b {

  text-align: right;

}



.ui-grid-solo > .ui-block-a {

  white-space: nowrap;

}



.ui-mobile .ui-grid-solo label {

  display: inline;

}



.ui-grid-solo .ui-input-text {

  width: 30%;

  display: inline-block;

  margin-right: 5px;

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

</head>

<body>

  <div data-role="page">

    <div role="main" class="ui-content">

      <div class="ui-grid-a ui-responsive">

        <div class="ui-block-a">

          <select data-native-menu="false">

            <option value="1">The 1st Option</option>

            <option value="2">The 2nd Option</option>

            <option value="3">The 3rd Option</option>

            <option value="4">The 4th Option</option>

          </select>

        </div>

        <div class="ui-block-b">

          <div class="ui-grid-solo">

            <div class="ui-block-a">

              <label for="textinput-3">Range:</label>

              <input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">

              <label for="textinput-4">-</label>

              <input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">

            </div>

          </div>

        </div>

      </div>

      <hr>

    </div>

  </div>

</body>



</html>

answered Nov 12 at 22:46

deblocker

5,09021234

add a comment |

Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/

Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.

Here is a playground:

.ui-grid-a > .ui-block-b {

  text-align: right;

}



.ui-grid-solo > .ui-block-a {

  white-space: nowrap;

}



.ui-mobile .ui-grid-solo label {

  display: inline;

}



.ui-grid-solo .ui-input-text {

  width: 30%;

  display: inline-block;

  margin-right: 5px;

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

</head>

<body>

  <div data-role="page">

    <div role="main" class="ui-content">

      <div class="ui-grid-a ui-responsive">

        <div class="ui-block-a">

          <select data-native-menu="false">

            <option value="1">The 1st Option</option>

            <option value="2">The 2nd Option</option>

            <option value="3">The 3rd Option</option>

            <option value="4">The 4th Option</option>

          </select>

        </div>

        <div class="ui-block-b">

          <div class="ui-grid-solo">

            <div class="ui-block-a">

              <label for="textinput-3">Range:</label>

              <input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">

              <label for="textinput-4">-</label>

              <input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">

            </div>

          </div>

        </div>

      </div>

      <hr>

    </div>

  </div>

</body>



</html>

answered Nov 12 at 22:46

deblocker

5,09021234

Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/

Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.

Here is a playground:

.ui-grid-a > .ui-block-b {

  text-align: right;

}



.ui-grid-solo > .ui-block-a {

  white-space: nowrap;

}



.ui-mobile .ui-grid-solo label {

  display: inline;

}



.ui-grid-solo .ui-input-text {

  width: 30%;

  display: inline-block;

  margin-right: 5px;

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

</head>

<body>

  <div data-role="page">

    <div role="main" class="ui-content">

      <div class="ui-grid-a ui-responsive">

        <div class="ui-block-a">

          <select data-native-menu="false">

            <option value="1">The 1st Option</option>

            <option value="2">The 2nd Option</option>

            <option value="3">The 3rd Option</option>

            <option value="4">The 4th Option</option>

          </select>

        </div>

        <div class="ui-block-b">

          <div class="ui-grid-solo">

            <div class="ui-block-a">

              <label for="textinput-3">Range:</label>

              <input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">

              <label for="textinput-4">-</label>

              <input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">

            </div>

          </div>

        </div>

      </div>

      <hr>

    </div>

  </div>

</body>



</html>

.ui-grid-a > .ui-block-b {

  text-align: right;

}



.ui-grid-solo > .ui-block-a {

  white-space: nowrap;

}



.ui-mobile .ui-grid-solo label {

  display: inline;

}



.ui-grid-solo .ui-input-text {

  width: 30%;

  display: inline-block;

  margin-right: 5px;

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

</head>

<body>

  <div data-role="page">

    <div role="main" class="ui-content">

      <div class="ui-grid-a ui-responsive">

        <div class="ui-block-a">

          <select data-native-menu="false">

            <option value="1">The 1st Option</option>

            <option value="2">The 2nd Option</option>

            <option value="3">The 3rd Option</option>

            <option value="4">The 4th Option</option>

          </select>

        </div>

        <div class="ui-block-b">

          <div class="ui-grid-solo">

            <div class="ui-block-a">

              <label for="textinput-3">Range:</label>

              <input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">

              <label for="textinput-4">-</label>

              <input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">

            </div>

          </div>

        </div>

      </div>

      <hr>

    </div>

  </div>

</body>



</html>

.ui-grid-a > .ui-block-b {

  text-align: right;

}



.ui-grid-solo > .ui-block-a {

  white-space: nowrap;

}



.ui-mobile .ui-grid-solo label {

  display: inline;

}



.ui-grid-solo .ui-input-text {

  width: 30%;

  display: inline-block;

  margin-right: 5px;

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">

  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

</head>

<body>

  <div data-role="page">

    <div role="main" class="ui-content">

      <div class="ui-grid-a ui-responsive">

        <div class="ui-block-a">

          <select data-native-menu="false">

            <option value="1">The 1st Option</option>

            <option value="2">The 2nd Option</option>

            <option value="3">The 3rd Option</option>

            <option value="4">The 4th Option</option>

          </select>

        </div>

        <div class="ui-block-b">

          <div class="ui-grid-solo">

            <div class="ui-block-a">

              <label for="textinput-3">Range:</label>

              <input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">

              <label for="textinput-4">-</label>

              <input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">

            </div>

          </div>

        </div>

      </div>

      <hr>

    </div>

  </div>

</body>



</html>

answered Nov 12 at 22:46

deblocker

5,09021234

answered Nov 12 at 22:46

deblocker

5,09021234

answered Nov 12 at 22:46

deblocker

5,09021234

answered Nov 12 at 22:46

deblocker

5,09021234

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky