Tips for creating an input field that automatically expands and has a specific width

I am facing an issue with the alignment of my search field. Here is the code snippet:

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

I would like the search field to be on the right side of the screen, but only within a maximum width of 1280px. Beyond that, I want it to stay aligned to the center of the screen.

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

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

cssalignmentcss-position

Answer №1

view 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); 
    }); 
});

Answer №2

Utilizing CSS3 media queries can enable you to adjust the positioning of the search field based on the screen resolution.

For further information, refer to the documentation available at MDN link.

In response to your query, a CSS-exclusive solution could resemble the following code snippet.

@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 % ;
        /*adjust the margin values accordingly to center it based on text field size*/
        border: 1px solid black;
    }
}

To see a demonstration, visit the JSfillde link.

Note: Experiment with the margin values to customize it to your preferences.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the width of an SVG path from 0 to 100% using CSS

I have an SVG design of wires that I want to animate the width from "0 to 100%", but I'm having trouble achieving this effect. It's easy to do with a div element, but not with an SVG image. Below is my code snippet: svg path { animation: f ...

htmlcssanimationsvgcss-animations

Timer Does Not Appear to be Counting Down

I recently added a countdown clock to my website, but I'm having an issue with it not updating in real-time unless the page is refreshed. I'm not very familiar with javascript, so I found some code online and made some modifications myself to sui ...

javascripthtmlcss

Injecting CSS styles into dynamically inserted DOM elements

Utilizing Javascript, I am injecting several DOM elements into the page. Currently, I can successfully inject a single DOM element and apply CSS styling to it: var $e = $('<div id="header"></div>'); $('body').append($e); $ ...

javascriptjqueryhtmlcssdom

Exploring Vaadin 14 Slider Components

I'm looking for help on how to incorporate a slider into my Vaadin 14 project. I discovered that the slider component was removed in Vaadin 10, so I turned to this alternative: Once I added the Maven dependency and repository to my pom.xml, I success ...

javahtmlcssvaadin

Utilize CSS to display line breaks within a browser output

If I wrap text in a <pre> element, line breaks will be displayed in the browser without needing to use <br/> tags. Can this same effect be achieved by utilizing CSS with a <div> element? ...

css

Unable to view the image in browsers other than Internet Explorer

On a webpage, there is a feature where clicking on the "Add More" link should display an input box and a "Delete" button image. Surprisingly, this functionality works perfectly on IE browsers, but not on Mozilla or Chrome. In non-IE browsers, only the text ...

javascriptcssgoogle-chrome

Blazor Control in Razor Component Library (CSS Protection)

I recently created a new component named MyComponent.razor and included a corresponding CSS file called MyComponent.razor.css. The CSS file is nested under the component file in Visual Studio, so I am confident there are no spelling errors in the file path ...

cssblazorblazor-webassemblyrazor-class-library

Transform a <td> into a table-row (<tr>) nested within a parent <tr> inside an umbrella structure

Similar questions have been asked in the past, but I still haven't found a solution to my specific inquiry. Here it is: I have a table that needs to be sortable using a JavaScript plugin like ListJS. The key requirement is that I must have only one & ...

javascripthtmlcsshtml-table

Choose an item from a list that does not have a particular class

Here is a list of items: <ul id='myList'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li class='item-selected'>Item 4</li> <li>Item 5</li> & ...

javascriptjqueryhtmlcss

Tips for making nested sliding divs within a parent sliding div

Is it possible to slide a float type div inside another div like this example, but with a white box containing "apple" text sliding inside the black div it's in? I have attempted to recreate the effect using this example. Here is my current JavaScript ...

javascriptjquerycssdhtml

Change the size of the image to use as a background

I have an image that is 2000x2000 pixels in size. I originally believed that more pixels equated to better quality with less loss. Now, I am looking to display it on my browser at a resolution of 500x500. To achieve this, I attempted to set the image as t ...

jqueryhtmlcssimage

Toggle the visibility of a div depending on the user's selection

My HTML select element has a few options to choose from: <select class="form-control" data-val="true" data-val-number="The field CodeSetup must be a number." id="CodeSetup" name="CodeSetup"> <option selected="selected" value="0">AllCodes< ...

javascriptjqueryhtmlcss

Issue with Image Quality in Woocommerce/Wordpress Products

I'm experiencing an issue with either Wordpress or Woocommerce. Yesterday, I updated Woocommerce while installing a new theme. Unfortunately, I'm facing a problem now where I can't seem to improve the image quality on the product page. Jus ...

phpmysqlcsswordpresswoocommerce

CSS Resizing the screen leads to misalignment of the footer layout

I am currently working on a page located at However, I have encountered an issue where the footer is not displayed properly when the screen size is changed. Below is the CSS code for the footer: #footer_1 { background: url("../images/bgfooter2.png") ...

htmlcssfooter

Issue with TinyMCE Editor: Inoperative

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", theme: "modern", plugins: [ "advlist autolink li ...

javascripthtmlcsstinymce

Transform the header style columns of react-js Material-tables into rows

Currently experimenting with gradient designs on a material table. While I am able to apply the right color combination to the rows, I seem to be getting column-based results on the title of the table. Attached is a screenshot of my output for reference. ...

javascripthtmlcssreactjsmaterial-ui

Activating a certain class to prompt a drop-down action

My PHP code is displaying data from my database, but there's a bug where both dropdown menus appear when I click the gear icon. I want only one dropdown to appear when clicking the gear of a specific project. Can you help me fix this issue? It's ...

javascriptphpjqueryhtmlcss

Alert: The specified task "taskname" could not be located. To proceed with running grunt, consider using the --force option

My current task involves converting .css files to .sass files using the 'grunt-sass-convert' npm module. Here is the configuration in my 'Gruntfile.js': 'use strict'; module.exports = function(grunt){ grunt.loadNpmTasks( ...

cssnode.jsnpmsass

Guide on adding CSS3 ribbons to elements on both sides

I recently came across a tutorial that teaches how to create a CSS ribbon. However, after following the tutorial, I found that the ribbon only appears on one side of the element. This has left me wondering if it's possible to have the ribbon display o ...

css

custom checkbox is not being marked as checked

I've been attempting to customize my checkboxes, following various tutorials without success. Despite trying multiple methods, I still can't get the checkboxes to check or uncheck. Here is the code I have so far: https://jsfiddle.net/NecroSyri/ ...

javascripthtmlcss