Expanding Input Field to Fill Available Space Using Bootstrap

I have developed a sample here: jsFiddle

<div class="container">
  <div class="row">
    <div class="span6">
    <ul class="thumbnails">
        <li class="span4">
            <div style="height:200px; position: relative" class="thumbnail">
                <div style="position: absolute; left: 5px; right: 5px; bottom:5px;">
                    <form style="margin:0;" class="form-inline">
                        <input style="margin: 3px 0 0 0;" type="text" placeholder="Name…" ng-model="mashName" class="pull-left span3" />
                        <button type="submit" style="margin: 3px 0 0 0; " class="span1 btn btn-primary pull-right">Create</button>
                    </form>
                </div>
            </div>
        </li>
    </ul>
</div>

I am looking for a way to make the input field expand to the button's width without using percentages that cause issues during resizing. The current example is close, but the button gets distorted when using the span class.

.input-block-level is helpful, but it stretches too far. Is there a solution to this issue without needing to use JavaScript?

csstwitter-bootstrap

Answer №1

To start, you should eliminate the default width set by Bootstrap on your input field. You can do this by overriding it with width: auto. Then, utilize absolute positioning to ensure the input field conforms to the width of its containing div.

I have created a demonstration of this concept on jsFiddle: http://jsfiddle.net/w8YfL/

Below is the code snippet for reference:

<div class="container">
    <ul class="thumbnails">
        <li class="span4">
            <div style="height:200px; position: relative" class="thumbnail">
                <div style="position: absolute; left: 5px; right: 5px; bottom:5px;">
                    <form style="margin:0;" class="form-inline">
                        <input style="position: absolute; right: 70px; left: 0; bottom: 0; width: auto;" type="text" placeholder="Name…" ng-model="mashName"/>
                        <button type="submit" style="position: absolute; right: 0; bottom: 0;" class="btn btn-primary">Create</button>
                    </form>
                </div>
            </div>
        </li>
    </ul>
</div>

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

Tips for overriding ng-disable in AngularJSUnleashing the

This is a comment box using AngularJS: <tr> <td colspan="5"><br/>Comments* <div><textarea class="form-control" rows="3" cols="60" ng-model="final_data.drc_scope" placeholder="Add comments here" ng-disabled="is_team==0 || isDis ...

javascripthtmlangularjstwitter-bootstrap

The styling in Docker for Asp.Net Core is not being properly displayed

I recently deployed my first ASP.NET Core application using Visual Studio for Mac inside a Docker container on Linux. However, I'm facing an issue where the CSS is not being applied and the JavaScript is not functioning as expected. It seems like the ...

cssasp.netdocker

Stylish Responsive Design with HTML and CSS Centering

I am tasked with creating a landing page that features an image at the top with text, followed by a couple of videos and a 2-pixel strip line image that must stay at the bottom. <html> ... <body> <img src="topimage.png" alt="" /> <t ...

htmlcss

I am looking to create a layout with two images placed next to each other using bootstrap, regardless of their dimensions. However, the images do not automatically adjust themselves within

<div class="container" style="background-color: aqua;"> <div class="row"> <div class="col-md-6"> <img src="nature.jpeg" class="img-responsive"> </div> <div class="col-md-6"> ...

htmlcssangularbootstrap-4

Guide on Ensuring a Fixed Div Covers the Entire Width of the Screen

Hello everyone, I need some help with formatting my social media widgets on my website. I want them to span the entire width of the screen, align to the right, and remain fixed at the top of the page. You can check out the site totempole.ca for reference. ...

htmlcss

Move from right to left on the slide?

Is there a way to toggle a div's visibility between collapsed and expanded, transitioning smoothly from right to left? I've noticed that most examples I come across demonstrate the transition from left to right. ...

jqueryhtmlcssjquery-uiposition

Creating responsive images in Bootstrap columns

I've found a solution to my issue with large images, but I am still struggling with smaller images not fitting well into larger spaces. Essentially, I created a CMS for a user who required templates with various bootstrap columns as content areas. Cu ...

htmlcssbootstrap-4responsive

Turn off info windows for businesses and other points of interest, except for those within your own polygons on Google Maps

Is there a way to make only the infowindows attached to my polygons clickable on Google Maps? I don't want Points of Interests like Restaurants to have clickable infowindows. I tried changing the map style to hide business labels, but infowindows stil ...

cssgoogle-mapsgoogle-maps-api-3infowindow

When a user chooses an item, the ui-select dropdown appears hidden behind additional fields on the screen

In my AngularJS application, I am utilizing ui-select within a table that repeats rows using ng-repeat. The following code snippet displays how ui-select is implemented: <ui-select name="{{'selProperty' + $index}}" ng-model="thing.property" ...

htmlangularjstwitter-bootstrapui-select

Center the image to always align with the text

I am looking to display an image alongside some text, where the number of text lines can vary. It could be one, two, or three lines of text. Here's how it should be handled: If there is only one line of text: The image should be centered with the te ...

htmlcss

css - Showcasing images with a horizontal scrollbar

I'm having an issue with displaying multiple images in a fixed-width div horizontally. I want to have a horizontal scroll bar for the images that exceed the width of the div. Currently, the images are appearing vertically instead of side-by-side. Is ...

cssscrolloverflow

Hover over this area to reveal the hidden text as it slides into view

My goal is to hover over truncated text and reveal the full length of the dynamic text. However, I am struggling with removing extra space at the end of shorter text when hovered and displaying all the text for longer ones. I have a solution that almost w ...

htmlcsshover

Notification during image loading

I have successfully integrated the Nivo slider on my website, however, I am encountering a minor issue. Whenever the images are loading, it causes the footer to shift upwards which affects the overall look of the site. Is there a simple solution to add a m ...

jqueryhtmlcssimageslider

Positioning a div with a set size to the right while allowing a div with a variable width to the left

Even though I achieved the desired outcome in this example (http://jsfiddle.net/jcx3X/40/), I am intrigued by the reasons why this other scenario (http://jsfiddle.net/jcx3X/41/) does not work. What is the significance of the div being floated first in th ...

htmlcsswidth

Issues with SVG Image Mask in Firefox and IE: How to Fix Them

Creating a mask with a PNG (black circle, transparent background) and using -webkit-mask-image:url(images/mask.png) has been easy for browsers like Chrome. However, I've been encountering significant difficulties in getting the mask to display properl ...

csssvgxhtml

How to Vertically Align an HTML Element Inside a Div with Changing Height

Similar Question: Issue with vertical alignment Is there a way to ensure that the <a></a> is always vertically centered within this div, regardless of its size? View example here Thank you! ...

css

What is the best way to create some distance between a div element and the bottom of the body?

Hello, I am attempting to center a div within my body. The div has a minimum height of 400px, but its size can expand based on the content it holds. When I add more content to the div, it grows accordingly, but it ends up touching the bottom of the div. I ...

htmlcss

"Encountering a Challenge with Setting Up Forms on

I've recently started learning to code and I'm facing an issue with my form appearing stretched out. You can view it here: I initially thought it was due to margins, so I increased them. Then, I tried adjusting the width to 50%, but that didn&ap ...

htmlcssforms

Stop menu items from shifting when focused

I've developed a mobile hamburger menu and attempted to adjust the padding to create space between the text and the borders. Here's the HTML: #menu-solutions:hover .menu-item-text, #menu-solutions:focus .menu-item-text, #menu-solutions:ac ...

htmlcsswordpress

Connecting two anchor elements with a straight vertical line

VISUAL REPRESENTATION Is there a way to add a vertical line between two empty elements in HTML without affecting the layout or interrupting the content? The line should be positioned to the left of the text and should span across multiple paragraphs regar ...

javascriptjqueryhtmlcss