Using a width of 100% with the display inline-block property does not function as intended

Is there a way to have both a checkbox and text input in one line, with the text input being responsive? I attempted to use display: inline-block, which worked for keeping them in the same line, but I'm having trouble making the text input fill the remaining space with width 100%. How can this be achieved?

Link to Example

<div>
  <div class="left-wrap">
    <input type="checkbox" value="others" />
    <label>Others</label>
  </div>
  <input type="text" value="" />
</div>

.left-wrap {
  display: inline-block;
}

input[type="text"] {
  display: inline-block;
  //width:100%; how to make the input to fill till the rest of the screen
}

Answer №1

If you're looking to achieve this layout, consider using Flexbox. Simply assign a class to your container and set the CSS property display: flex. Then, include flex: 1 for your input element:

.container {
  display: flex;
}

.left-wrap,
input[type="text"] {
  display: inline-block;
}

input[type="text"] {
  flex: 1;
}
<div class="container">
  <div class="left-wrap">
    <input type="checkbox" value="others" />
    <label>Others</label>
  </div>
  <input type="text" value="" />
</div>

Answer №2

input[type="text"] {
  //display: inline-block;
  width: 98%; //how to make the input to fill till the rest of the screen
}
<div>
  <table>
    <tr>
      <td width="5%"><input type="checkbox" value="others" /></td>
      <td width="5%"><label>Others</label> </td>
      <td><input type="text" value="" /></td>
    </tr>
  </table>
</div>

Exploring a different coding method here. I hope this alternative perspective is useful.

Answer №3

When it comes to setting the width of an element to 100%, it means that it occupies the full width of its container (which in this case is the parent div).

A different way to achieve this: You have the option to accomplish this using a table structure:

<table style="width: 100%; border-collapse: collapse;">
    <tr>
        <td>
            <input type="checkbox" value="others" />
            <label>Others</label>
        </td>
        <td style="width: 100%;">
            <input type="text" value="" />
        </td>
    </tr>
</table>

Alternatively, you can also try this approach: Define the width for the .left-wrap class and adjust as needed:

.left-wrap {
    display: inline-block;
    width: 25%; /* Adjust according to your requirements */
    box-sizing: border-box;
}

input[type="text"] {
    display: inline-block;
    width: 75%; /* Modify based on your needs */
    box-sizing: border-box;
}

It's crucial to ensure that the total sum of both widths does not exceed 100%.

Moreover, there are various other techniques available, such as utilizing flex or float.

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

Notify the user with a Jqgrid alert when they attempt to select multiple checkboxes

When editing rows, I wanted to avoid multiple selections. In order to achieve this, I need to check the condition if(count>1) and display an alert message. I am struggling to figure out how to retrieve the count of selected checkboxes in jqGrid. var m ...

The align-items property in Flexbox is not functioning as expected when applied to Link components contained within

I'm in the process of creating a simple navigation bar using flexbox, but I'm encountering an issue where the content within the unordered list is not vertically centered. Below is the HTML code snippet: *,*::before,*::after{ margin: 0; ...

"Learn how to easily format specific characters in JavaScript using the text plugin to create bold text strings with a unique

I would like to transform this text into something like "|| something 1 || something 2 || more || last one ||" and then make all of that string bold by adding "|" around it then it would look like this "|| something 1 || something 2 || more || last one | ...

The issue of JQuery recursion not properly focusing on a textbox

Can anyone help with a jquery focus issue I'm experiencing? My goal is to address the placeholder problem in IE by focusing on an element and then blurring it to display the placeholder. This functionality is being used in a modal form. Initially, e ...

Unable to utilize the .keyCode method within a query selector

Trying to utilize .keyCode in JavaScript to identify a pressed key, but the console consistently displays null after each key press. Below is the relevant CSS code: <audio data-key="65" src="sounds\crash.mp3"></audio> ...

Utilizing CSS flexbox to occupy the remaining vertical space

I'm facing a scenario where I have three elements: div with content 1, div with content 2, and an image that spans 100% width (with variable height). My goal is to align div 1 at the top, the image at the bottom, and fill the remaining space with cont ...

Navigate to the following div, navigate back to the previous div

I am attempting to implement a div navigation system with next/previous buttons. Despite searching extensively on Google, I have not found the exact solution I am looking for. First and foremost, I want to maintain the integrity of my html structure. < ...

Convert PHP code into an HTML table

Is it possible to insert date values into an HTML table column using the following code? <?php $startdate = strtotime("Monday"); $enddate = strtotime ("+3 weeks", $startdate); while ($startdate < $enddate) { echo date("M d", $startdate),"& ...

Deactivating The Canvas Element

I am currently working on a project that involves using Three.js alongside a menu placed above the canvas element, which is essentially a regular div. However, I have encountered an issue where the canvas element still registers input when interacting with ...

Is it possible to generate various resolutions of an image simultaneously?

While trying to download wallpapers from a link on this website, I encountered an issue. Upon clicking the download button, a new page opened with the URL "https://images.wallpapersden.com/image/download/street-fighter-fortnite_bGtoaW6UmZqaraWkpJRmbmdlrW ...

Unable to retrieve data from Flask for AJAX request

When making an AJAX call to a Flask function to retrieve data using a token, the code looks like this: @app.route("/questgen/results", methods = ['POST', 'GET']) def fetch_results(): token = request.form.get('token&a ...

Save the selected value from the dropdown menu and automatically check the corresponding checkbox when it

I'm attempting to update the 'value' of a checkbox once an item is chosen from a dropdown list and then the checkbox itself is clicked. I have created a jQuery function that captures the value from the dropdown list (I omitted the code for t ...

In JavaScript, unchecking a radio button results in all options becoming uncheckable

I have a pure CSS accordion and I want to enhance it with some JavaScript functionality for users who have JavaScript enabled. The CSS accordion currently utilizes the :checked pseudo-class. The new feature I am looking to add is: if a button that is alre ...

Is it possible to adjust the height of the navbar in Bootstrap?

Currently, I am in the process of replicating the mac OS navbar and am seeking guidance on resizing the navbar height and adjusting text size to around 12px. This is my first time working with bootstrap, so any assistance would be greatly appreciated. Addi ...

Hide the scrollbars on the sidebar

I'm attempting to recreate a sleek scrollbar that caught my eye on the website . To achieve this, I need to have a screen larger than 955px in order to display the sidebar. However, when my sidebar overflows in the y direction, it causes an additional ...

The PHP Include function seems to be malfunctioning and unable to properly display

Everything you see is what I have on my home.php page <?php include ('../bgs/bg-verbier.html'); include('../menus/menu-verbier.html'); ?> Both of the files requested are located in the parent directory. The /menus/menu-v ...

The navbar links in Bootstrap 4 may be hidden, but the navbar brand still remains visible

I have implemented this code for my website's navbar, however, upon running it, I noticed that the navigation links are not visible. The navbar brand name "test" appears correctly, but the other links seem to be hidden. Does anyone have any insights o ...

Exploring Django's view field for efficient data rendering

Is it possible to display multiple views for a single page/template? For instance, imagine a website where users can submit movie reviews and read others' reviews as well. Now, I need to add an edit button to the review pages but only want the button ...

Ensure that the HTML link is valid and authenticated using SESSIONS

When creating a website, one of the initial tasks I like to tackle is adding links at the bottom of the page for checking valid HTML and CSS: HTML5  •   CSS <div> <a href="http://validator.w3.org/check?uri=referer" ...

How can I set a minimum height for a table on my website?

Is there a way to make a table that is at least 50px in size, but can still enlarge if there is a lot of text inside? I'm not sure if this even makes sense, but any help would be appreciated. Thank you! ...