Modify the width of a div within another div using CSS dynamically

I am working on creating a unique custom div that contains input text and two buttons inside it. Here is the initial design: https://i.sstatic.net/WIzrN.png

However, when I resize the screen, the layout shifts as shown here: https://i.sstatic.net/ziO08.png

I'm looking for a solution to prevent the two buttons from moving down and instead keep them within the original div container.

Below is the code snippet I have been experimenting with:

.searchBar {
background: #DDDDDD;
width:100%;
height:50px;
padding: 10px;
position: relative;
}

.search_field {
display: inline-block;
border-radius:4px ;
background: #FFFFFF;
width: 70%;height: 32px;
position: relative;
left: 60px;
overflow: inherit;
}

.search_field input {
width: 89%;
padding: 0;
border-top-left-radius: 4px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border:1px inset red;
}

.search_field input:focus {
outline-color: transparent;
outline-style: none;
}

.search_field button {
border: none;
background: none;
}
<div id="searchBar" class="searchBar">
<div class="search_field">                
<input type="text" id="searchInput" placeholder="Search" oninput="showSearchButtons()"/>
<button id="btn1"  hidden="true" onclick="alert()"><img src="assets/images/search.png"></button>                    
<button id="btn2" hidden="true" onclick="alert()"><img src="assets/images/saveBtn.png"></button>
</div>
</div>

If you have any suggestions or solutions, please let me know. Thank you!

htmlcss

Answer №1

To ensure the proper width of your input element in relation to your buttons, you can utilize the calc function:

width: calc(100% - 100px);

Ensure that the width of the buttons is subtracted from the total percentage value. Here's an example using SASS:

$buttons: 50px;
width: calc(100% - #{$buttons * 2});

Displayed below is a basic implementation. Although I have included the percentage values as a fallback for older browsers, most modern browsers support calc including IE9 and above.

input, button {
    float: left;
    height: 50px;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
}
input {
    width: 70%;
    width: calc(100% - 100px);
    padding: 10px;
}
button {
    /* The width calculation ensures it occupies remaining space after input */
    width: 15%; 
    width: 50px;   // This adjusts based on the input and number of buttons
    line-height: 50px;
}
/* Prevent images within buttons from affecting their width */
button img {
    max-width: 100%;
    display: inline-block;
}
<input type='text' placeholder='search' />
<button><img src="http://placehold.it/50x50" /></button>
<button><img src="http://placehold.it/50x50" /></button>

Answer №2

Instead of using your current styles, consider implementing the following CSS for your search bar:

.searchBar{
background: #DDDDDD;
width:100%;
height:50px;
padding: 10px;
position: relative;
}
.search_field {
border-radius:4px ;
background: #FFFFFF;
position: relative;
padding-right: 100px; /* Adjust as needed for button width */
}
.search_field input {
width: 100%;
padding: 0;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: solid 1px #FF0000;
-webkit-box-sizing: border-box; /* Compatible with Safari/Chrome and other WebKit browsers */
 -moz-box-sizing: border-box;    /* Compatible with Firefox and other Gecko-based browsers */
box-sizing: border-box;
}
.search_field button {
border: none;
background: none;
position: absolute;
top: 0;
}
.search_field button#btn1 {
right: 50px; /* Adjust based on requirements */
}
.search_field button#btn2 {
right: 0; /* Adjust based on requirements */
}

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

Color of selected Bootstrap radio toggle buttons

Can anyone help me figure out how to customize the colors of radio toggle buttons using my style.css in Bootstrap? I've managed to change the background color in normal mode, but I'm struggling with changing the checked state. I've searched ...

htmlcssbootstrap-5

troubleshoot clientWidth not updating when CSS changes are made

Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size. Aim I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the ...

javascriptcssangularjsangularjs-directive

Is there a way to align the height of a standard column with the ng-include section to ensure a cohesive page display?

I have been working on my Angular app and have implemented ng-include to dynamically add content to a template within the page. The issue I'm facing is that this specific area ends up being longer than both the html and body elements where it resides. ...

htmlcssangularjs

Positioning Elements Absolutely in Relation to List Items

I am looking to style a list item by adding background-color, border, and other properties. Below is the CSS and HTML I have tried so far. Additionally, I want to use the div element to position more absolute elements in relation to the li > div. ul { ...

css

Creating a menu category for a restaurant using CSS

I'm trying to set up a menu with categories like this: enter image description here However, my result ends up looking like this: enter image description here The description section keeps stacking on top of the photo section; it's strange beca ...

htmlcssbootstrap-4

Making the toggle button functional on the navbar

Trying to customize my navbar for tablet and mobile devices is proving to be a challenge. I am looking for a way to make the dropdown button take up the entire page when clicked on. It seems like JavaScript might be the solution, but I'm not quite sur ...

javascriptcssbootstrap-4navbar

Position SVG element within a Bootstrap 4 row

Is there a way to center align both an icon (<svg>) and text within a container with a small spacing between the two elements? | ICON TEXT | Here is a JSBin link for reference: https://jsbin.com/tatomas/edit?html,css,output I have Bootst ...

csssvgflexboxtwitter-bootstrap-4

Unable to scroll to top using div scrollTop() function

Here's the fiddle I mentioned: http://jsfiddle.net/TLkmK/ <div class="test" style="height:100px;width:70px;overflow:auto"> Some text here that needs scrolling. </div> alert($('.test').scrollTop()); Feel free to scroll down ...

javascriptjqueryhtmlscroll

Loading scripts in Ajax can be achieved in the following manner

One of my code snippets creates an unordered list dynamically based on the number of span elements containing information. The script looks like this: $(document).on('click','#addplaylisttolist',function(){ myPlaylist.pause(); ...

jqueryhtmlajaxsmartysharethis

I'm currently exploring ways to incorporate text onto thumbnails, as I am new to coding. Below is the code I have been working on

I'm new to coding, only been at it for about a week and a half, and still struggling. My issue is setting up text underneath my thumbnails as shown below. While the code alone won't make it look right, I know this should be an easy fix. I need to ...

javascriptcss

Centering items in Bootstrap 4, while excluding the first element

.c-footer { background: #000; padding: 20px 0; color: #fff; } .c-footer__logo { display: inline; } .c-footer__link { color: inherit; } .c-footer__link a { color: inherit; } .c-footer__link a:hover { color: #fff; } ...

htmlcssflexboxtwitter-bootstrap-4

Modify HTML files prior to transmission from an express server

This method comes in handy when you only have a few elements that need to be updated on your webpage, offering a seamless way to refresh the content without the need for additional HTTP requests or frontend manipulation. ...

htmlnode.jsexpress

Guide on centering text vertically in Bootstrap 4

As I begin my journey with Bootstrap, I encountered a challenge while attempting to vertically align text. The issue arises when displaying a modal window from a partial view and trying to showcase an icon and a title in the header: Below is the page cont ...

cssbootstrap-4bootstrap-modal

Javascript variable unable to retrieve value from textbox

Hey there! I am having some trouble reading a textbox that is populated from the server into a JavaScript variable. When I try to access it, I get a console error saying "can't read from NULL". However, the text box is definitely populated with the st ...

c#javascriptasp.nethtmljson

Avoid having individual words centered on a single line of text

Currently, I'm in the process of developing a website using WooCommerce, WordPress, and Elementor. I've encountered an issue where only one word appears on each line and have tried various solutions such as hyphens, word-break, and line-break wit ...

javascripthtmljquerycsswordpress

Issue with Bootstrap grid borders

I am currently working on a grid system that displays flight information in 10 columns, with a select button and price in 2 columns. I am facing an issue where adding a border to separate the select button section from the rest of the flight information on ...

htmlcsstwitter-bootstrap

Issues with Drop Down CSS on Laravel Blade files

In my view, I have included various drop down menus such as https://i.sstatic.net/0UHgE.png Click here to access I am struggling to display a border bottom. I have attempted to manually define border-bottom in the CSS of those elements but have not been ...

htmlcss

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

csshtmlweb

Clickable list element with a button on top

Within my web application, there is a list displaying options for the user. Each 'li' element within this list is clickable, allowing the user to navigate to their selected option. Additionally, every 'li' element contains two buttons - ...

javascripthtmlcss

Transferring data from one page to another using form variables

Currently, I have an existing app at . The app is designed to function on a single page, but I have been requested to convert it into a multi-page flow. Transitioning data from one page to another has proven to be challenging for me as I am more of a hobby ...

javascriptphpjqueryhtmlforms