CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
S Das
S Das

Reputation: 51

How to put label, input box and small search image in one line?

I have the code where I am using the query Mobile version 1.4.4 to develop a mobile page. But the problem is I want to put the label, input box and a small search image in one line. The label and input box are coming correctly in one line but image is coming in the next line. Below is my code.

<div data-role="fieldcontain">
    <label id="Nationalitylbl">*Nationality:</label>
    <input type="text" name="Nationality" id="Nationality" value="" style="width:80%" readonly/>
    <img src="%bind(:13)" name="Ntlylkp" onclick="nationalityPopUp();"/>          		
</div>

Upvotes: 1

Views: 102

Answers (3)

Ashish Bhagat
Ashish Bhagat

Reputation: 420

Set float left to image input and label

.nationality .ui-corner-all input {
    padding-right: 100px; /* width of image */
}
.nationality img {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 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-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="fieldcontain" class="nationality">
    <label id="Nationalitylbl">*Nationality:</label>
    <input type="text" name="Nationality" id="Nationality" value="" style="width:100%" readonly/>
    <img src="%bind(:13)" name="Ntlylkp" onclick="nationalityPopUp();"/>          		
</div>

Upvotes: 1

Sougata Bose
Sougata Bose

Reputation: 31739

Just decrease the width of the text filed and set the image width accordingly. Try with this code - 

<div data-role="fieldcontain">
    <label id="Nationalitylbl">*Nationality:</label>
    <input type="text" name="Nationality" id="Nationality" value="" style="width:40%" readonly/>
    <img src="%bind(:13)" width="200px" name="Ntlylkp" onclick="nationalityPopUp();"/>                  
</div>

Upvotes: 1

stanze
stanze

Reputation: 2480

Remove or decrease inline style="width:80%" from input field.

Upvotes: 1

Related Questions