locked
After adding glyphicon-search button just beside of the textbox , the column alignment is going wrong RRS feed

  • Question

  • User-1355965324 posted

    I am trying to bring the search button just close to the  textbox of the customer. But after adding  the  glyphicon-search , the other  two column for Year and Month going next row.

    How can I show customer, year, month in the same row with  glyphicon-search. If I remove glyphicon-search, it will show the same line. But I want to show the three column with glyphicon-search just end of the customer textbox

    <div class="row">
                    <div class="form-group">
                        <label for="lblCustomer" class="control-label col-sm-1">Customer</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" asp-for="CustomerCode" id="txtCustomer">
                            <span class="input-group-addon">
    <i class="glyphicon glyphicon-search" onclick="ShowCustomerSearch()"></i>
    </span> </div> <div id="CustomerSearchModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a href="#" class="close" data-dismiss="modal">&times;</a> <h3 class="modal-title">Customer Search</h3> </div> <div class="modal-body" id="CustomerSearchDiv"> </div> </div> </div> </div> <label for="lblYear" class="control-label col-sm-1 ">Year</label> <div class="col-sm-3"> <input type='text' id="txtYear" asp-for="BreaDownLogYear" class="form-control disabled" /> </div> <label for="lblMonth" class="control-label col-sm-1 ">Month</label> <div class="col-sm-3"> <select id="dropdownMonth" class="form-control" asp-for="BreakDownLogMonth"> <option value="1">Jan</option> <option value="2">Feb</option> <option value="3">Mar</option> <option value="4">Apr</option> <option value="5">May</option> <option value="6">Jun</option> <option value="7">Jul</option> <option value="8">Aug</option> <option value="9">Sep</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option> </select> <span asp-validation-for="BreakDownLogMonth" class="text-danger"></span> </div> </div> </div>

    Wednesday, July 31, 2019 2:27 PM

Answers

  • User665608656 posted

    Hi polachan,

    But I want to show the three column with glyphicon-search just end of the customer textbox

    To achieve this function, you should use class='fa fa-search' instead of class="glyphicon glyphicon-search" .

    You can refer to this link : Put search icon near textbox using bootstrap

    To use this class, you need to refer to the corresponding CSS file : https://www.w3schools.com/w3css/w3css_icons.asp

    For more details , you could change your code like this:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
        <script type="text/javascript">
    function ShowCustomerSearch(){
    alert(1);
    }
        </script>
    </head>
    <body>
        <form id="form1" runat="server"> 
            <div style="width: 800px">
                <div class="row">
                    <div class="form-group">
                        <label for="lblCustomer" class="control-label col-sm-1">Customer</label>
                        <div class="form-group col-sm-3">
                            <div class="input-group">
                                <input type="text" class="form-control" asp-for="CustomerCode" id="txtCustomer" placeholder="Search" />
                                <span class="input-group-addon">
                                    <i class="fa fa-search" onclick="ShowCustomerSearch()"></i>
                                </span>
                            </div>
                        </div>
                        <div id="CustomerSearchModal" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <a href="#" class="close" data-dismiss="modal">&times;</a>
                                        <h3 class="modal-title">Customer Search</h3>
                                    </div>
                                    <div class="modal-body" id="CustomerSearchDiv">
                                    </div>
                                </div>
    
                            </div>
                        </div>
    
                        <label for="lblYear" class="control-label col-sm-1 ">Year</label>
                        <div class="col-sm-3">
                            <input type='text' id="txtYear" asp-for="BreaDownLogYear" class="form-control disabled" />
                        </div>
                        <label for="lblMonth" class="control-label col-sm-1 ">Month</label>
                        <div class="col-sm-3">
                            <select id="dropdownMonth" class="form-control" asp-for="BreakDownLogMonth">
                                <option value="1">Jan</option>
                                <option value="2">Feb</option>
                                <option value="3">Mar</option>
                                <option value="4">Apr</option>
                                <option value="5">May</option>
                                <option value="6">Jun</option>
                                <option value="7">Jul</option>
                                <option value="8">Aug</option>
                                <option value="9">Sep</option>
                                <option value="10">Oct</option>
                                <option value="11">Nov</option>
                                <option value="12">Dec</option>
                            </select>
                            <span asp-validation-for="BreakDownLogMonth" class="text-danger"></span>
    
    
                        </div>
    
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    The result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 1, 2019 2:59 AM

All replies

  • User665608656 posted

    Hi polachan,

    But I want to show the three column with glyphicon-search just end of the customer textbox

    To achieve this function, you should use class='fa fa-search' instead of class="glyphicon glyphicon-search" .

    You can refer to this link : Put search icon near textbox using bootstrap

    To use this class, you need to refer to the corresponding CSS file : https://www.w3schools.com/w3css/w3css_icons.asp

    For more details , you could change your code like this:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
        <script type="text/javascript">
    function ShowCustomerSearch(){
    alert(1);
    }
        </script>
    </head>
    <body>
        <form id="form1" runat="server"> 
            <div style="width: 800px">
                <div class="row">
                    <div class="form-group">
                        <label for="lblCustomer" class="control-label col-sm-1">Customer</label>
                        <div class="form-group col-sm-3">
                            <div class="input-group">
                                <input type="text" class="form-control" asp-for="CustomerCode" id="txtCustomer" placeholder="Search" />
                                <span class="input-group-addon">
                                    <i class="fa fa-search" onclick="ShowCustomerSearch()"></i>
                                </span>
                            </div>
                        </div>
                        <div id="CustomerSearchModal" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <a href="#" class="close" data-dismiss="modal">&times;</a>
                                        <h3 class="modal-title">Customer Search</h3>
                                    </div>
                                    <div class="modal-body" id="CustomerSearchDiv">
                                    </div>
                                </div>
    
                            </div>
                        </div>
    
                        <label for="lblYear" class="control-label col-sm-1 ">Year</label>
                        <div class="col-sm-3">
                            <input type='text' id="txtYear" asp-for="BreaDownLogYear" class="form-control disabled" />
                        </div>
                        <label for="lblMonth" class="control-label col-sm-1 ">Month</label>
                        <div class="col-sm-3">
                            <select id="dropdownMonth" class="form-control" asp-for="BreakDownLogMonth">
                                <option value="1">Jan</option>
                                <option value="2">Feb</option>
                                <option value="3">Mar</option>
                                <option value="4">Apr</option>
                                <option value="5">May</option>
                                <option value="6">Jun</option>
                                <option value="7">Jul</option>
                                <option value="8">Aug</option>
                                <option value="9">Sep</option>
                                <option value="10">Oct</option>
                                <option value="11">Nov</option>
                                <option value="12">Dec</option>
                            </select>
                            <span asp-validation-for="BreakDownLogMonth" class="text-danger"></span>
    
    
                        </div>
    
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    The result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 1, 2019 2:59 AM
  • User-1355965324 posted

    Many Many Thanks

    Thursday, August 1, 2019 5:10 AM