CODEWITHSUNDEEP
javascripthtmlcss
Cody
Cody

Reputation: 2649

CSS - Expanding search bar issue when enough characters are entered

I am creating a expanding search bar, but the problem is when enough characters are typed in into the text input, they goes beneath the search button.

    $('.search-submit').click(function (e) {
        e.preventDefault();

        var searchbox = $('.search-box');

        if(searchbox.hasClass('expanded-search-box'))
        {
            // close the form
            searchbox.removeClass('expanded-search-box');
        }

        else {
            // open the form
            searchbox.addClass('expanded-search-box');
        }

    });
        .form-container{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #000;
            padding: 33px 14px;
        }

        .form-container:after{
            content: '';
            display: block;
            clear: both;
        }

        form{
            position: relative;
            float: right;
        }

        .search-box{
            top: 0;
            right: 0;
            width: 90px;
            transition: width 0.3s ease-out;
            padding: 10px 0px;
            padding-left: 10px;
            outline: none;
        }

        .search-submit{
            position: absolute;
            width: 110px;
            top: 0;
            right: 0;
            padding: 10px 0px;
        }

        .expanded-search-box{
            width: 500px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-container">
    <form action="" class="form">
        <input type="text" name="search" class="search-box" placeholder="Search...">
        <input type="submit" class="search-submit">
    </form>
</div>

enter image description here

I want to show search bar when button is clicked.

I tried adding padding-right to the input text elements but it becomes visible.

How to solve this issue ?

Upvotes: 0

Views: 297

Answers (6)

satya
satya

Reputation: 1185

Please use this code. I have created a jsfiddle for you.

<div class="form-container">
    <form action="" class="form">
        <input type="text" name="search" class="search-box" placeholder="Search...">
        <input type="submit" class="search-submit">
    </form>
</div>

 $('.search-submit').click(function (e) {
        e.preventDefault();

        var searchbox = $('.search-box');

        if(searchbox.hasClass('expanded-search-box'))
        {
            // close the form
            searchbox.removeClass('expanded-search-box');
            searchbox.removeClass('dynamic-margin');
        }

        else {
            // open the form
            searchbox.addClass('expanded-search-box');
             searchbox.addClass('dynamic-margin');
        }

    });

.form-container{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #000;
            padding: 33px 14px;
        }

        .form-container:after{
            content: '';
            display: block;
            clear: both;
        }

        form{
            position: relative;
            float: right;
        }

        .search-box{
            top: 0;
            right: 0;
            width: 90px;

            transition: width 0.3s ease-out;
            padding: 10px 0px;
            padding-left: 10px;
            outline: none;
        }

        .search-submit{
            position: absolute;
            width: 110px;
            top: 0;
            right: 0;
            padding: 10px 0px;
        }

        .expanded-search-box{
            width: 400px;
        }
        .dynamic-margin{margin-right:100px;}

https://jsfiddle.net/satyaprasanna/8x99tq0h/7/

Thanks Satya

Upvotes: 0

Dcoder
Dcoder

Reputation: 29

$('.search-submit').click(function (e) {
        e.preventDefault();

        var searchbox = $('.search-box');

        if(searchbox.hasClass('expanded-search-box'))
        {
            // close the form
            searchbox.removeClass('expanded-search-box');
                        searchbox.removeClass('padding');
            searchbox.addClass('search-width');


        }

        else {
            // open the form
            searchbox.addClass('expanded-search-box ');
            searchbox.addClass('padding');
            searchbox.addClass('search-width');
        }

    });
.form-container{
                width: 600px;
                margin: 0 auto;
                border: 1px solid #000;
                padding: 33px 14px;
            }
    .search-width{
        	width: 0px;
        }
            .form-container:after{
                content: '';
                display: block;
                clear: both;
            }

            form{
                position: relative;
                float: right;
            }

            .search-box{
                top: 0;
                right: 0;
                width: 70px;
                transition: width 0.3s ease-out;
                padding: 10px 0px;
                padding-left: 10px;
                outline: none;
                
            }
            .padding{
            	padding-right: 85px;
            }

            .search-submit{
                position: absolute;
                width: 85px;
                top: 0;
                right: 0;
                padding: 10px 0px;
            }

            .expanded-search-box{
                width: 500px;
            }
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


    </head>
    <body>
    <div class="form-container">
        <form action="" class="form">
            <input type="text" name="search" class="search-box" placeholder="Search...">
            <input type="submit" class="search-submit">
        </form>
    </div>

    </body>
    </html>

Use this code

Upvotes: 0

Rohit Bajaniya
Rohit Bajaniya

Reputation: 41

Replace your css classes

.expanded-search-box {
    width: 395px;
    padding: 10px;
}
.search-box {
    top: 0;
    right: 0;
    width: 0px;
    transition: width 0.3s ease-out;
    padding: 10px 0px;
    outline: none;
    margin-right: 105px;
}

Upvotes: 0

Edmundo Santos
Edmundo Santos

Reputation: 613

You could add padding-right only when the .search-box is expanded:

.expanded-search-box {
  width: 350px;
  padding-right: 150px;
}

Another solution would be to not have the submit button overlapping the input:

/* Reset the box-sizing */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Search group */

.search-group {
    width: 100%;
    max-width: 200px;
    overflow: hidden;
    margin-bottom: 1em;
}

.search-group--expanded {
    max-width: 500px;
}

/* Search input */

.search-input {
    float: left;
    width: 75%;
    padding: .5em 1em;
}

/* Search button */

.search-button {
    float: right;
    width: 25%;
    padding: .5em 1em;
    border: none;
}
<div class="search-group">
    <input class="search-input" type="text" placeholder="Search for...">
    <button class="search-button" type="button">Submit</button>
</div>


<div class="search-group--expanded">
    <input class="search-input" type="text" placeholder="Search for...">
    <input class="search-button" type="submit" value="Submit">
</div>

Upvotes: 0

nekkon
nekkon

Reputation: 107

    $('.search-submit').click(function (e) {
        e.preventDefault();

        var searchbox = $('.search-box');

        if(searchbox.hasClass('expanded-search-box'))
        {
            // close the form
            searchbox.removeClass('expanded-search-box');
        }

        else {
            // open the form
            searchbox.addClass('expanded-search-box');
        }

    });
        .form-container{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #000;
            padding: 33px 14px;
        }

        .form-container:after{
            content: '';
            display: block;
            clear: both;
        }

        form{
            position: relative;
            float: right;
        }

        .search-box{
            top: 0;
            margin: 0;
            width: 0;
            transition: width 0.3s ease-out;
            padding: 10px 0;
            padding-left: 10px;
            outline: none;
        }

        .search-submit{
            position: absolute;
            width: 110px;
            top: 0;
            right: 0;
            padding: 10px 0px;
        }

        .expanded-search-box{
            width: 470px;
            padding: 10px 10px;
            margin-right: 110px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-container">
    <form action="" class="form">
        <input type="text" name="search" class="search-box" placeholder="Search...">
        <input type="submit" class="search-submit">
    </form>
</div>

Upvotes: 1

Melad Batta
Melad Batta

Reputation: 216

add maxlength="20" on your search text-input

Upvotes: 0

Related Questions