Remove From My Forums

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

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