locked
want to remove the gap on both sides of textbox. RRS feed

  • 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>
    • 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
  • User-240513752 posted

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

    Wednesday, October 11, 2017 3:43 AM
  • 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>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 11, 2017 5:13 AM
  • User-240513752 posted

    I also did that by margin negative, I hope your fixed is better.

    Thursday, October 19, 2017 9:22 AM