"Utilizing Twitter Bootstrap to create full-width input fields with pre

Presently utilizing bootstrap-2.1.1

In my row-fluid, I have 2 columns with input-prepends inside. Below is a snippet of code:

<div class="row-fluid">
   <div class="span6">
      <ul>
         <li>
            <div class="input-prepend box-shadow">
                <span class="add-on">email</span>
                <input type="text" name="email" value="" placeholder="Edit email"/>
            </div>
        </li>
     </ul>
   </div>
   <div class="span6">
      <ul>
         <li>
             <div class="input-prepend box-shadow">
               <span class="add-on">name</span>
               <input type="text" name="name" value="" placeholder="Edit name"/>
             </div>
         </li>

      </ul>
    </div>
</div>

VIEW THE JSBIN HERE: http://jsbin.com/unuruh/1/

ISSUE

How can I make the input fields within the parent input-prepend full width and responsive to the browser size using CSS only? The width of the add-on should remain the same...

Appreciate your assistance in advance.

csstwitter-bootstrap

Answer №1

Fluid spans

Check out this method : Demo (jsbin)

<li>
  <div class="row-fluid">
    <div class="input-prepend box-shadow clearfix" style="border-radius: 3px;">
     <span class="add-on span2" style="width: 14.2%;float: left;">email</span>
     <input class="span1" style="width: 85.8%;float: left;border-right: 0;border-tradius: 0;border-bottom-right-radius: 0;" type="text" name="#" value="#hello" placeholder="Edit project"/>
   </div>
  </div>
</li>

To override the responsive behavior of spans, the width and float properties are used in the inline style, along with other styles to enhance the appearance of the box.

If you encounter similar issues without the wrapper problems, you might find this question helpful: Fluid input-append in Bootstrap Responsive

Absolute positioning

Update version 2.3 : include 

.input-fullwidth { display: block; }
, Updated Demo (jsfiddle)

Another solution involves absolute positioning : Demo (jsfiddle)

.input-prepend.input-fullwidth {
    position: relative;
}
.input-prepend.input-fullwidth .add-on {
    width: 40px;
}
.input-prepend.input-fullwidth .input-wrapper {
    position: absolute;
    display: block;
    left: 51px; /* 40 + 2*5 - 1 */
    right: 0;
    top: 0;
    bottom: 0;
}
.input-prepend.input-fullwidth .input-wrapper input {
    width: 100%;
    height: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

<div class="input-prepend input-fullwidth">
    <span class="add-on">email</span>
    <div class="input-wrapper"><input type="text" name="#" value="#hello" placeholder="Edit project"/></div>
</div>

If you're exploring more options, consider using the flexbox feature of CSS3 (w3.org)

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

Difficulties in Adjusting the Size of Three Image Columns within a Website's Body

While working on my website layout, I encountered a problem with inserting three image columns in the body section. The images turned out to be too large and extended beyond the footer. Moreover, the third image was larger than expected, dominating the web ...

htmlcss

Unable to choose the option from the modal that functions similarly to a drop-down menu

I need to choose a field that functions similarly to a dropdown box, but does not actually display as one. The select field reveals its values in a pop-up with values and sub-values that I need to select. Challenges : I'm struggling to locate the ob ...

javahtmlcssxpathselenium

Adding a Video as a Background Button Using HTML and CSS

My attempt to utilize background-image in CSS for the button background was unsuccessful as it only supports images, not videos. Is there a way to set a video as the background of a button? My goal is to create a button with a continuously looped muted v ...

htmlcss

Different color for background of division

I am working with a structure that looks like this: <div class="wrapper"...> <a href="#"...>blah</a> <div class="post"...>stuff</div> </div> This structure repeats multiple times on a dynamic page. I am looking f ...

javascriptjquerycssdompseudo-class

Is it possible to specifically focus on Google Chrome?

Can anyone help me with positioning the update button on www.euroworker.no/order? The button works fine in Firefox and Internet Explorer, but it's not displaying correctly in Chrome or Safari. I've tried targeting Safari and Chrome specifically, ...

csssafarigoogle-chrometarget

I am having trouble getting my HTML to properly link with my CSS while using Chrome OS

My website code is not linking with the CSS file <!DOCTYPE html> <html> <head> <link href="main.css" rel="slylesheet" text="text/css"> <title></title> </head> <body> < ...

htmlcssgoogle-chrome-os

What steps can I take to bring this idea to life in my gallery?

Currently, I am facing a roadblock while transitioning my design concept into actual code. My main concern lies with creating this art piece. Although the gallery is up and running with all the images in place, I'm encountering difficulties with the s ...

javascripthtmlcss

Tips for inserting active class on the main menu and adding an active class along with an icon on the sidebar menu

I am working on a website where I want to add the active class only when a user clicks on the top menu. However, if the user chooses something from the sidebar menu, I also want to add an icon arrow next to it. Any ideas on how I can achieve this? Check o ...

jquerycss

The button can only be edited using Internet Explorer

My webpage features a button that displays correctly in Chrome, but the text inside the button gets cut off when viewed in IE (see image). Can you provide guidance on what might be causing this issue and how to resolve it? Bootstrap version 4.0.0 is also b ...

cssinternet-explorercross-browserbootstrap-4

Incorporating an image as a clickable element instead of a traditional button using HTML and

Here's the issue at hand: I currently have "+" and "-" icons at the end of each row to add and delete rows as needed. However, I would like to replace the "-" icon with a trashcan symbol instead. I attempted to do this by replacing it with an image s ...

javascriptjqueryhtmlcssgrails

Attempting to position the input field beside the label

I need help aligning the input field box next to my label. Currently, there is a gap between the text (label) and the input field when clicking on Item#1 and Invoice Number. I want the input field to be directly next to the label. Can anyone assist me with ...

cssbootstrap-4

Choose a specific portion of text following an element in HTML using CSS

I would like to style the text following the span tag using CSS without affecting the span tag itself. Specifically, I want to apply styling only to the text that reads "Text to be selected", leaving the span tag unaffected. The style I desire i ...

csscss-selectors

css - align the arrow to the right in a dropdown

I recently started using a Bootstrap dashboard template created by Creative Tim. I am attempting to incorporate a dropdown list into a table cell, following the standard Bootstrap format: <div class="btn-group"> <button type="button" class="b ...

csstwitter-bootstraptwitter-bootstrap-3

Ensuring the footer stays at the bottom of the page using Tailwindcss and ReactJS

I've read numerous articles and posts about achieving this, but none of the methods seem to be effective for me. My goal is to have the footer stick to the bottom of the page when viewed on mobile devices. It displays correctly on larger screens, but ...

cssreactjstailwind-css

What is the best way to adjust the dimensions of a blank image without altering the size of

I am attempting to set the size of an empty image to 150px. While using float: left works on Firefox, it does not have the same effect on Google Chrome. Here is the HTML code: <div> <img src='some broken url' alt='no image'& ...

htmlcss

Tips for loading and updating data simultaneously in VUEJS from a single input

Currently, the data is displayed in a span tag with an input for updating it Is it possible to fetch data from an API, load it into an input field, update the input with new information, and send it back? What are the best approaches for achieving this? ...

javascripthtmlcssvue.jsvuejs2

Units such as 'rem' and 'px' are not compatible when using bootstrap 4 alpha 6

While attempting to integrate a bootstrap 4 template (using bootstrap 4 alpha 6), I encountered the following error: Incompatible units: 'rem' and 'px'. This occurred on the line: $input-height: (($font-size-base * $input-btn-line-he ...

csssassbootstrap-4incompatibletypeerror

CSS position: sticky not keeping search bar at the top of the page

I'm having trouble getting a search bar to stick at the top of a div using position: sticky. I've checked for common issues like overflow: hidden on parent elements without specified height, but that's not the problem in this case. Here&apos ...

cssreactjscss-position

Utilize the CSS content property to embed an image without causing it to distort in size

Struggling to swap out one image for another without stretching it? In my demo, I replaced an elephant with a lion using only CSS - no changes allowed to the HTML. Unfortunately, the lion image ends up stretched. Even adding background-size: cover doesn&ap ...

htmlcss

Is it possible for me to generate HTML using JavaScript?

Below is the javascript code I have written, saved as create.js: var stuff = document.querySelector(".stuff"); var item = document.createElement('div'); item.className = 'item'; stuff.appendChild(item); This is the corresponding HT ...

javascripthtmlcssdom