Remove From My Forums

want to remove the gap on both sides of textbox.

Question

User-240513752 posted

I want to align in there is a gap on both side of Plus and minus sign button. please find the image with html.

https://postimg.org/image/9rgzzmzh5/

Tuesday, October 10, 2017 7:59 AM

Answers

User2103319870 posted

Try set float:left to your button and textbox controls

<button class="btn btn-default" type="submit" style="float:left">
                <i class="fa fa-search">Plus</i>
            </button>
        
        <input type="text" class="form-control" placeholder="Search for..." style="float:left">
        
            <button class="btn btn-default" type="submit" style="float:left">
                <i class="fa fa-search">Minus</i>
            </button>

Sample Working Demo

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Wednesday, October 11, 2017 5:13 AM

All replies

User-1838255255 posted

Hi khan_1,

According to your description, although I don't see you refer bootstrap file in your page, but I notice that you use the bootstrap class, so I guess you use the bootstrap. About how to remove the space of both side of the textbox, I make a sample use bootstrap, please check:

Sample Code:

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit">
                <i class="fa fa-search">Plus</i>
            </button>
        </span>
        <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit">
                <i class="fa fa-search">Minus</i>
            </button>
        </span>
    </div>
</body>

Result:

Best Regards,

Eric Du

Wednesday, October 11, 2017 2:47 AM

0

Sign in to vote

User-240513752 posted

Nopes, I have to do it with the tr th and td....

Wednesday, October 11, 2017 3:43 AM