CODEWITHSUNDEEP
jquerycssjquery-mobile
user1542984
user1542984

Reputation:

Why the search icon hide using jquery mobile?

I just want to make a label and text field and search icon which all are horizontal as shown but search icon is not displayed and it is not displayed horizontally.

Here is my fiddle http://jsfiddle.net/yCUY7/

<div data-role="content">
    <label class="searchLable">suchtest</label>
    <input type="text" class="inputSearch_h">
    <div class="icon-search icon-search_h" data-icon="search"></div>
</div>

enter image description here

Upvotes: 1

Views: 174

Answers (1)

Will
Will

Reputation: 4155

jQuery Mobile realllllly wants you to do it their way. You'll need to write some custom html/css to get what you want because inputs are (by default) wrapped in divs that span the width of the page.

You'll need to experiment with the widths for your own app but this should get you started.

HTML:

<div data-role="content">

     <div class="wrap">
         <label class="searchLable">suchtest</label>
         <input type="text" class="inputSearch_h" />
         <span class="ui-icon ui-icon-search ui-icon-shadow"></span>
     </div>

    <label for="search-basic">The jQuery Mobile Way:</label>
    <input type="search" name="search" id="searc-basic" value="" />
</div>

CSS:

.wrap {
    margin-bottom: 1em;
    overflow: hidden;
}
.wrap label, .wrap .ui-input-text, .wrap .ui-input-text+span {
    display: block;
    float: left;
}
.wrap label {
    line-height: 3em;
    text-transform: uppercase;
    width: 20%;
}
.wrap .ui-input-text {
    width: 70%;
}
.wrap .ui-input-text+span {
    margin-top: 1.4em;
    margin-left: 5px;
}

EDIT Missed your inline label the first time Here's an updated Fiddle

Upvotes: 1

Related Questions