Adjust the width of an element as its content dynamically shifts

I have a container that contains 6 input fields. Two of them are initially hidden (display: none), but when I click on a checkbox, these two inputs become visible (display: inline). I need the width of the container to adjust and increase when the other two inputs appear.
html :

<div class="row" id="row1">
  <input class="input" id="material_name" value="Material" />
  <input class="input" id="material_name" value="Material" />
  <input class="input" id="unit" value="Unit" />
  <input class="input" id="count" value="11" />
  <input class="input" id="unit_price" placeholder="Unit Price" />
  <input class="input" id="total_price" placeholder="Total Price" />
</div>

Answer №1

div is considered a block-level element, while span is inline. If you want to substitute div with span in your HTML code, you can do so. Alternatively, you can adjust the display property of the div element to make it behave like a span. Normally, the width of a block-level element does not depend on its content, whereas for inline elements, the width changes based on the width of their inner elements.

#row1{
        display:inline-block;
    }

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

Ways to expand a navbar background without compromising the central alignment of its elements

I need the blue color of the navigation bar to cover the entire screen, while keeping the About, Updates, and Who am I? links centered. The background should adjust accordingly if there are any resizing changes. If there's a better method for centerin ...

I am experiencing an issue where the Flex table is not displaying more than 50 rows

I am experiencing an issue where I can't scroll back up with the scrollbar. The table is dynamically filled with data from a database, and when it gets too long, I am unable to scroll back up. Any suggestions on how to solve this problem? If you need ...

Issue with Bootstrap 3: Element refuses to remain within the defined width of the div container

While utilizing bootstrap 3 within a small div, I noticed that when I enlarge the window by dragging it horizontally, the fields (username and password input fields) that should remain inside the div end up shifting towards the center of the window. Can an ...

Mozilla Firefox does not have the capability to support preloading

I am having an issue with preloading CSS sheets. I attempted to preload the CSS sheet using the preload attribute in HTML. It works fine on Google Chrome, but unfortunately, it does not work on Firefox. <head> <link href=assets/css/master.c ...

What is the best way to include a CSS stylesheet in a Wordpress theme?

Is there a way for me to properly load my custom CSS in Wordpress so that the dynamically inputted content on my pages matches the styling of my header and footer? In my functions.php file, I currently have the following code, but it only prints the code ...

Integrating a title field into every p-column with ng-template

I am exploring ng-templates for the first time. I have managed to customize each column to display names accurately, but I am encountering an issue. I would like to incorporate a title field in order to show a tooltip with the full name when hovering over ...

Tips on implementing vertical-align within an inline-table

Can someone help me with vertically centering text inside links without losing the 100% height of "a" elements? I've tried to tackle this issue without success, and I am using Twitter Bootstrap 3. Any suggestions would be greatly appreciated. ...

Eliminate the navigation bar option from a website template

Is there a way to permanently eliminate the menu button in this theme? Any guidance would be appreciated. Here's the link to the theme: https://github.com/vvalchev/creative-theme-jekyll-new ...

``There is an issue with elements not remaining within the boundaries of the div that has

http://codepen.io/apswak/pen/qNQxgA Has anyone encountered issues with nesting elements inside a header with a background image? I'm facing the problem where every element I place inside gets pushed above the background image. Is there a more effecti ...

I have a flex box with an image and text line inside. How can I adjust the width of the box and text to automatically match the size of the image?

Consider the code snippet below: <style> .img_box { display: flex; } </style> <div class=img_box> <img src=img/> <div>Title text of varying length. It may exceed the image's width or be smaller.</div> & ...

What is the best way to allocate a larger size to one part of a flex div?

A div is used to insert information <div class="inputs"> <div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div> <div class="content">@Html.TextBo ...

Is the navigation bar offset causing an issue?

After struggling with my navigation menu in Google Chrome, I finally found a solution. However, the nav bar is now offset on one page but not on another. For the aligned main site view, visit , and for the left-offset forum view, visit . This is the HTML ...

Backdrop styling for Material-UI dialogs/modals

Is there a way to customize the semi-transparent overlay of a material-ui dialog or modal? I am currently using material-ui with React and Typescript. https://i.stack.imgur.com/ODQvN.png Instead of a dark transparent overlay, I would like it to be transp ...

What is the method for including preset text within a search bar?

My current issue is as follows: When the searchbox is focused, it appears like this: -------------------- -------------------- Upon exiting the searchbox, a string will automatically be added to it: -------------------- Search -------------------- I a ...

Retrieving content from a div element

I am using Beautiful Soup to extract a list from HTML attributes. g_info = soup.find_all("div", {"id":"details_readonly"}) print g_info ## this prints out all the contents of the div tag. y = re.compile(r'B00(.{7})',g_info) print y The extrac ...

Rows nested within the Bootstrap grid system

Looking to implement a nested grid within a parent grid in Bootstrap 3.3.7. Check out the HTML below: Parent component <div> <div class="row"> <div class="col-md-3 border">.col-md-3</div> // <div class="col-md-9 ...

"Utilizing Bootstrap to create a visually appealing image and text combination in the

I need to arrange the image, first span, and second span in a vertical stack for xs devices. The alignment should be centered for xs devices. If you want to see my code: CLICK HERE <div class="row"> <div> <div class="col-md-9 c ...

Tips for defining a relative path in the base URL with AngularJS

Encountering an issue with AngularJS routes related to file paths. The folder structure is as follows: js -> Angular -> css -> Bootstrap -> index.html Routes work fine when hosted on a server like IIS. However, copying and pasting the direct ...

Does the downloading of images get affected when the CSS file has the disabled attribute?

Is it possible to delay the download of images on a website by setting the stylesheet to 'disabled'? For example: <link id="imagesCSS" rel="stylesheet" type="text/css" href="images.css" disabled> My idea is to enable the link later to tri ...

Tips for seamlessly incorporating advertisements into a mixed application

I am having trouble adding banner ads to my hybrid application developed with Telerik. Despite my extensive research, I have been unable to find a suitable solution. Is there any html5 or javascript banner advertising service/API that is compatible with ...