locked
Two buttons inside a text search RRS feed

  • Question

  • User1324715958 posted

    I think I want/need to rebuild this html/code. This is old code from no one knows when. Anyway, I need to add a button "X" to clear the text in the search. I have tried adding a new input button but the CSS is out of wack. Anyone have suggestions on how to cleanly get two buttons die by side to the right inside the search text area?

    Here is the code currently:

    <form class="views-exposed-form" id="search_product" action="DynamicPage.aspx" method="get" accept-charset="UTF-8">
                            <div class="js-form-item form-item js-form-type-textfield form-item-search-api-fulltext js-form-item-search-api-fulltext">
    							<input type="hidden" name="WebCode" value="ProdSearch"/>								   
    						   <!--<label class="sr-only" for="edit-search-api-fulltext">Search</label>-->
                               <input name="q" class="form-autocomplete ui-autocomplete-input" id="edit-search-api-fulltext" style="padding: 6px, 12px; width:320px; height: 30px;" type="text" size="30" maxlength="128" placeholder="Search Products..." value="" autocomplete="off" data-drupal-selector="edit-search-api-fulltext" data-id="autocompletion_for_input_edit_search_api_fulltext_form_text" />
                            </div>
                            <div class="form-actions js-form-wrapper form-wrapper" id="edit-actions">
                               <input class="button js-form-submit form-submit" id="edit-submit-aha-search" type="submit" value="Search" />
                            </div>
                         </form>

    Friday, March 22, 2019 7:26 PM

All replies

  • User-2054057000 posted

    The controls will come side by side if they are not put inside a div or a p element:

    <input />
    <button>Submit1</button>
    <button>Submit2</button>
    

    If you put in inside a div then they will come down one another:

    <div>
        <input />
    </div>
    <div>
        <button>Submit1</button>
    </div>
    <div>
        <button>Submit2</button>
    </div>
    

    Now you can use float: left to make the controls come side by side:

    <div style="float: left">
        <input />
    </div>
    <div style="float: left">
        <button>Submit1</button>
    </div>
    <div style="float: left">
        <button>Submit2</button>
    </div>

    Make use of these simple CSS tricks to do your job.

    Thank you.

    Saturday, March 23, 2019 5:04 AM
  • User839733648 posted

    Hi UOKSoftware,

    I suggest that you could set CSS to make the two buttons side by side inside a text.

    Here is my testing code.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            input[type="text"] {
                width: 200px;
                height: 20px;
                padding-right: 50px;
            }
    
            input[type="submit"] {
                margin-left: -65px;
                width: 60px;
                height: 34px;
            }
    
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="js-form-item form-item js-form-type-textfield form-item-search-api-fulltext js-form-item-search-api-fulltext">
                <input type="hidden" name="WebCode" value="ProdSearch" />
                <!--<label class="sr-only" for="edit-search-api-fulltext">Search</label>-->
                <input name="q" class="form-autocomplete ui-autocomplete-input" id="edit-search-api-fulltext" style="padding: 6px, 12px; width: 320px; height: 30px;" type="text" size="30" maxlength="128" placeholder="Search Products..." value="" autocomplete="off" data-drupal-selector="edit-search-api-fulltext" data-id="autocompletion_for_input_edit_search_api_fulltext_form_text" />
                <input class="button js-form-submit form-submit" id="edit-submit-aha-search" type="submit" value="Search1" />
                <input class="button js-form-submit form-submit" id="edit-submit-aha-search2" type="submit" value="Search2" style="margin-left: -125px;"/>
            </div>
        </form>
    </body>
    </html>
    

    result:

    Best Regards,

    Jenifer

    Wednesday, March 27, 2019 6:31 AM
  • User822656046 posted

    The button isn't inside the input. Here:

    found more result go to this link start your css button look like this

    input[type="text"] {
        width: 200px;
        height: 20px;
        padding-right: 50px;
    }
    
    input[type="submit"] {
        margin-left: -50px;
        height: 20px;
        width: 50px;
    }

    Friday, March 29, 2019 7:25 AM
  • User998815126 posted

    I hope this will help you.....

    How to add two button inside a text search

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    input[type="text"]
    {
    width: 260px;
    padding-right: 50px;
    ;
    }
    #submit2
    {
    ;
    left: 138px;
    }
    #submit1
    {
    ;
    left: 230px;
    }
    </style>
    </head>
    <body>
    <div>
    <input type="hidden" name="">
    <input type="text" name="" placeholder="Search-Box">
    <input type="submit" name="" id="submit2" value="Search-Box2">
    <input type="submit" name="" id="submit1" value="Search-Box1">
    </div>
    </body>
    </html>

    Tuesday, April 2, 2019 4:40 PM