How to make input type text auto-expand also set specific width expand.

Question

I have a search field which doesn't align like i want to Here is the code

#menu_search{
    position: absolute;
    width: 100%;
    max-width: 1280px;
    display: inline; 
    float: right;
    right: 0px;
    z-index: 99;
}

So i want the search to be in the right part of the screen but only for max 1280 px, otherwise to maintain the alignment to 1280px (center of screen)

--------------------------------1480px-----------------------------

XXXXXX----------------------1280px----------[search]XXXXXX

See my answer here regarding flex and flex-grow: https://stackoverflow.com/a/52975265/1599699 — Andrew, Oct 24 '18 at 17:57

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

check your jsFiddle

HTML

 <input id="menu_search" type="text" size="20" placeholder="search here..." />

CSS

#menu_search{
    position: absolute;
    width: auto;
    max-width: 1280px;
    display: inline; 
    float: right;
    right: 0px;
    z-index: 99;
}

j-Query (library 1.7.2)

$(function(){ 
    $('#menu_search').keyup(function(){ 
        var size = parseInt($(this).attr('size')); 
        var chars = $(this).val().length; 
        if(chars >= size) $(this).attr('size', chars); 
    }); 
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 06 '14 at 09:56

Jaykumar Patel

26,836
12
74
76

$('#keywords').on('keydown', function(e) { var minSize = 20; var maxSize = 50; var chars = $(this).val().length; $(this).attr('size', Math.min(Math.max(chars, minSize), maxSize)); }) – lafeber Dec 04 '17 at 13:33

score -1 · Answer 2 · edited Mar 06 '14 at 10:19

You can use the CSS3 media queries to adjust the position of the search field according to the resolution of the screen.

You can read more about them at this MDN link.

Now for the question you asked the CSS only solution will be something like this.

@media screen and(max-width: 1280px) {
    #menu_search {
        position: absolute;
        display: inline;
        align: right;
        right: 0px;
        z-index: 99;
    }
}

@media screen and(min-width: 1281px) {
    #menu_search {
        position: absolute;
        float: left;
        display: inline;
        clear: both;
        margin: 0px 40 % ;
        /*try adjusting this magin values to get it exactly in center coz its dependent on the size of your text field also*/
       broder: 1px solid black;
    }
}

You can check this JSfillde link for a demo

PS: you might want to play around with the margin's values to suit your needs.

How to make input type text auto-expand also set specific width expand.

2 Answers2

check your jsFiddle

HTML

CSS

j-Query (library 1.7.2)

Linked