CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
Biribu
Biribu

Reputation: 3833

Button in same line as input and label

I am trying to put a button in the same line of label and input box.

I want that button adjust to content, so I don't need a big button. Even, if it could have an image, would be better.

This is my code now:

             <div data-role="fieldcontain">
                 <button onclick= "codeAddress();" style="float:left;">Buscar</button>
                 <div data-role="fieldcontain">
                    <label for="placeActivity">Lugar</label>
                    <input type="text" name="placeActivity" id="placeActivity" value="">
                 </div>
              </div>

And fiddle example:

http://jsfiddle.net/3jgeop7t/

Upvotes: 0

Views: 1820

Answers (4)

Gildas.Tambo
Gildas.Tambo

Reputation: 22663

Use JQuery Mobile Three-column grids

DEMO:

<div class="ui-grid-b"  data-role="fieldcontain">
    <div class="ui-block-a"><button onclick= "codeAddress();" data-inline="true">Buscar</button></div>
    <div class="ui-block-b"><label for="placeActivity">Lugar</label></div>
    <div class="ui-block-c"><input type="text" name="placeActivity" id="placeActivity" value=""></div>
</div><!-- /grid-b -->

If you just want a normal button the use data-inline="true" enter image description here

Update using css to fixe the label size:

.ui-grid-b[data-role=fieldcontain] label{
    font-size: 18px;
    line-height: 60px;
    font-weight: bolder;
}

DEMO

enter image description here

Upvotes: 1

Anon
Anon

Reputation: 2874

You use jQuery Mobile with special css. You need change same properties in inline style or in custom css file.

<div data-role="fieldcontain">
  <button onclick= "codeAddress();" style="float:left; width:auto;">Buscar</button>
  <div data-role="fieldcontain" style="clear: none; overflow: hidden;">
    <label for="placeActivity">Lugar</label>
    <input type="text" name="placeActivity" id="placeActivity" value="">
  </div>
</div>

Upvotes: 0

Richa
Richa

Reputation: 3289

You can try something like below

FIDDLE

<div data-role="fieldcontain" class='main'>
    <button onclick="codeAddress();">Buscar</button>
    <div data-role="fieldcontain" class='container'>
        <label for="placeActivity">Lugar</label>
        <input type="text" name="placeActivity" id="placeActivity" value="" />
    </div>
</div>

CSS

.main {
    width:100%;
}
button {
    float:left;
    width:200px !important;
}
.container {
    float:right;
    width:50% !important;
    top:-60px;
}

Upvotes: 0

tommyskott
tommyskott

Reputation: 81

Try using:

display: inline-block;
vertical-align: middle;

If they won't fit, adjust the width of each element.

Upvotes: 0

Related Questions