Home/ Questions/Q 8210761
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T10:11:08+00:00

I am trying to add a search input and three buttons on the same

  • 0

I am trying to add a search input and three buttons on the same line in jQuery Mobile, but it is turning out to be really frustrating. Here is the code I am trying:

<div data-role="header" class="header">
    <input type="search" name="search" id="search-header" value="" data-mini="true" data-inline="true" data-theme="c" />
    <a href="#menu_page" data-role="button" data-icon="search" data-iconpos="notext">Search</a>
    <a href="#menu_page" data-role="button" data-icon="grid" data-iconpos="notext" data-rel="dialog">View</a>
    <a href="#menu_page" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-rel="dialog">Menu</a>
</div>

With a CSS of this:

.page .header .ui-input-search
{
    margin-right: 90px;
}

I am ok with using the default icons that come with JQM, but the placement ends up looking like this though:

enter image description here

I even tried putting a controlgroup around the buttons only and also around the buttons and input box, but put the buttons below the search box.

How would I achieve this in JQM?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think I got it working!

    <div data-role="header" class="header">
    <input type="search" name="search" value="" data-mini="true" data-theme="c" class="search-header" />
    <div class="ui-btn-right">
        <a href="#menu_page" data-role="button" data-icon="search" data-iconpos="notext">Search</a>
        <a href="#menu_page" data-role="button" data-icon="grid" data-iconpos="notext" data-rel="dialog">View</a>
        <a href="#menu_page" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-rel="dialog">Menu</a>
    </div>
</div>
    • 0