Utilizing a 100% width Bootstrap form with SelectBoxIt inputs

Utilizing SelectBoxIt inputs () in Bootstrap 3 horizontal forms is causing an issue. I want the input to adjust and collapse along with the form width, but setting the widths to 100% is causing them to collapse instead.

To demonstrate the problem, I've prepared a JSFiddle. Any CSS experts out there who can offer a solution or suggestion?

http://jsfiddle.net/oceanexplorer/a5AZF/

HTML

<form class="form-horizontal">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    <div class="form-group">
        <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">Option1</label>
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <select name="foo">
                <option value="1">Foo1</option>
                <option value="2">Foo2</option>
                <option value="3">Foo3</option>
                <option value="4">Foo4</option>
                <option value="5">Foo5</option>
                <option value="6">Foo with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
            </select>
        </div>
    </div>
</div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
    <div class="form-group">
        <label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">Option1</label>
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
            <select name="foo">
                <option value="1">Foo1</option>
                <option value="2">Foo2</option>
                <option value="3">Foo3</option>
                <option value="4">Foo4</option>
                <option value="5">Foo5</option>
                <option value="6">Foo with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
            </select>
        </div>
    </div>
</div>
</form>

CSS

.selectboxit-container .selectboxit-options,
.selectboxit-container .selectboxit
{
    width: 100%;
}

.col-xs-8,
.col.sm-8,
.col-md-8,
.col-lg-8
{
    border: 1px solid black;
}

Javascript

$("select").selectBoxIt({
    autoWidth: false
});

Answer №1

Be sure to include the container in your initial rule:

.customize-container .customize-options,
.customize-container .customize,
.customize-container {
    width: 100%;
}

http://jsfiddle.net/b2BGK/8/

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

Interacting with Watir and Cucumber, unfortunately the link is not functional

Being new to the world of Watir and Cucumber, I am currently in the process of running an automation script to create Live IDs. The link that I want to click on the webpage is labeled "New" and it should take me to a form where I can add a new contact for ...

A structured HTML table featuring a secure header and stable left-hand columns, complete with knockout controls embedded in both the header and first

I'm facing a challenge with a customizable HTML table: Each row has a checkbox (knockout bound) to allow the user to determine if it should be included or not. The header columns also have checkboxes (knockout bound) to indicate if a particular ...

Comparing the Distinctions of jQuery Post and HTML Form Post

After researching extensively, I am still confused about the difference between a Jquery $.post method and submitting an HTML form using post. Here is my code for the jQuery implementation: $.post( "/test", query , function( data ) { console.log(data) ...

Tips on prefixing Bootstrap 4 classes to prevent conflicts with CSS classes

Recently, I've been focusing on creating small applications for websites. The websites hosting these apps may or may not use a css framework. To prevent any potential conflicts, I have decided to add a unique prefix to all Bootstrap classes. For insta ...

My custom style sheet not taking precedence over Bootstrap styles

Using !important is something I try to avoid as much as possible. When I downloaded Bootstrap 3.0, I made sure to include the call to the .css file AFTER my core style sheet so that any changes I make to elements like .h1, h1{} take precedence over Bootstr ...

Acquire Content using jQuery and Navigate page horizontally

I am trying to achieve a unique effect by capturing content x and horizontally scrolling the page while the mouse is in motion, similar to swiping on a tablet. It seems simple enough.. Capture clientX on mousedown, ScrollLeft by ClientX while moving, Di ...

Ways to make an area map more transparent

I'm encountering an issue with HTML opacity... Currently, I've implemented opacity using CSS but it's not functioning correctly. Below is my HTML and CSS code: <area shape ="rect" class="transbox" coords ="0,0,30,22" href ="test1.htm" ...

center the view on the specified element

Utilizing ReactJs, I am developing a horizontal timeline that showcases dates. For instance, there is a list of 100 elements, each containing a date and text content. The dates are displayed horizontally using flex-direction="row" and overflowX ...

Trouble with reading from a newly generated file in a node.js program

Whenever I launch my results.html page, I generate a new JSON file and use express.static to allow access to the public folder files in the browser. Although my application is functioning properly, I find myself having to click the button multiple times f ...

Using jQuery to easily drag and drop rows within a table

I need to implement a feature where users can drag and drop table rows to swap them with another row within the same table. This functionality should be achieved using mouseup and mousedown events. CODE $(function () { var html = "", index ...

Steps for smoothly transitioning an element into a row and animating its neighboring elements to adjust their width using VueJS

Is there a way to smoothly slide-in an element in a row and have the other elements adjust their widths accordingly while maintaining their relative sizes? <div style="width: 100%; display: flex"> <div id="firstColumn" ...

Can you inherit from a class in a different file using SASS?

All the information needed is in this question. For example, if I decide to utilize Twitter Bootstrap, would it be possible for me to create classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or is SASS inheritance restricte ...

How to incorporate HTML 5 video into your Angular 2 project using Typescript

How can I programmatically start an HTML video in TypeScript when the user clicks on the video area itself? Below is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource ...

issue encountered while attaching css file / css styles not rendering

Here is the css link I am using: <link rel="stylesheet" type="text/html" href="/public/assets/lib/css/style.css" /> Despite trying various solutions such as removing "rel="stylesheet"", changing to "text/html", checking paths, placing it in the pu ...

Tips for implementing bslib package pop up window within a table displayed using rhandsontable in R Shiny

I am trying to implement the template from Laurent's answer on R Shiny - Popup window when hovering over icon in my code below, which involves integrating a popup window into a rhandsontable table. My goal is to display the popup window as depicted in ...

Using jQuery to clear input text upon keyDown event

Currently, I have an input box with default text displayed: <input type="text" value="Enter Name"/> My goal is to have the text disappear once the user starts typing and have them input their desired text. I attempted to achieve this using the foll ...

Steady Content of a Parallax Webpage

Hey there! I recently put together this awesome site and I'm facing a challenge with fixing text on the first slide, specifically the one featuring the Nike basketball. Right now, the text 'The first of its kind' is part of the background im ...

Is there a way to reposition a popup window to the center of the page after launching it?

popup = window.open(thelink,'Facebook Share','resizable=1,status=0,location=0, width=500,height=300'); My goal is to perfectly center this popup window both vertically and horizontally. ...

Disabling HTML5 audio tag using jQuery

I've incorporated a JQuery plugin for a site tour, which requires creating an ordered list with a specific ID to define the stops of the tour using list items. Here's the HTML format: <ol id="joyRideTipContent"> <li> < ...

Difficulty encountered when trying to update a re-updated HTML DOM using Flask

I have a flask dropzone for file uploads, and after each upload I want to display a log text on the website. While it currently works, there is an issue where the log text does not update after the second upload. The website continues to show the text from ...