Text input in Bootstrap not reaching full width

Trying to achieve a Bootstrap textfield embedded in a panel that spans 100% of the remaining space-width within the panel. However, this is the result obtained:

The blue border represents the edge of the panel.

Below is the code being used:

<div class="input-group ">
    <div class="input-group input-group-lg">
        <a id="pdfUrlButton" class="input-group-btn btn btn-default go inline"><span class="glyphicon glyphicon-folder-open"></span>Choose File </a>
        <input id="pdfLoc" type="text" class="form-control disabled" placeholder="No schedule chosen yet">
        <input type="file" name="pdfUrl" id="pdfUrl" class="hidden"/>
    </div>
    <div id="pdfAlert" class="alert alert-danger hide">This is not a PDF!</div>
</div>

Despite referencing similar questions, I am unable to make it work with the solutions found.

javascriptjquerycsstwitter-bootstrap

Answer №1

.input-group {
    display: block;
}

However, it is recommended to make the selection in your CSS more specific to avoid applying this style to all elements with the same class, unless that is your intended design.

Answer №2

Make sure to enclose your code in a container row and specify the entire row width (12 columns):

<div class="row">
        <div class="input-group col-xs-12">
            <div class="input-group input-group-lg">
                <a id="pdfUrlButton" class="input-group-btn btn btn-default go inline"><span class="glyphicon glyphicon-folder-open"></span>Choose File </a>
                <input id="pdfLoc" type="text" class="form-control disabled" placeholder="No timetable selected yet">
                <input type="file" name="pdfUrl" id="pdfUrl" class="hidden" />
            </div>
            <div id="pdfAlert" class="alert alert-danger hide">This is not a PDF file!</div>
        </div>
    </div>

Answer №3

After some trial and error, I managed to resolve the issue by referencing an example provided in their components guide:

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

If you're interested, you can find more information here.

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

Automatically close Bootstrap 4 modal popups

I am using Bootstrap 4 and trying to make my modal automatically close after 3 seconds. I attempted a solution but it seems to not be functioning correctly. The modal itself works fine, but the auto-closing feature is not working as expected. Below is the ...

javascriptjquerybootstrap-4

Tips for incorporating a page route with an HTML extension in Next.js

I'm facing a challenge in converting a non-Next.js page to Next.js while maintaining my SEO ranking. To preserve the route structure with HTML extensions and enhance visual appeal, I have outlined the folder structure below: https://i.sstatic.net/zO1 ...

javascriptreactjsnext.jsserver-side-rendering

Button disabled is not functioning properly

Does anyone know why my button is not being disabled when I am not typing in the textbox? Here is the code snippet: $(document).ready(function () { loadData(); function loadData(is_category) { $(document).on('click&apo ...

javascript

Processing .dat files using JavaScript

Currently, I am attempting to utilize JavaScript to upload a file named example.dat. Initially, I believed that the correct approach would be using fileReader; however, it appears that this method is unable to process this specific format. The objective i ...

javascripthtmldataviewphaser-framework

What is the process for implementing a version folder for my @types/definition?

Is there a way to access the typings for react-router in my project? My package.json file currently has this dependency: { "@types/react-router": "^4.0.3" } However, it seems to be using the standard index.d.ts file from DefinitelyTyped library which i ...

javascripttypescriptnpmpackage.jsondefinitelytyped

Express Form Validation: Ensuring Data Accuracy

I have recently learned that client-side form validations may not be sufficient to prevent malicious actions from users. It is recommended to also validate the form on the server-side. Since I am new to using express, can someone provide guidance on what s ...

javascripthtmlnode.jsexpress

What could be the reason for the failure of my class isInstance() check

Do you see any issues with the object being an instance of ChatRoom? Let me know your thoughts. Class: export class ChatRoom { public id?: number; public name_of_chat_room: string; public chat_creator_user_id: number; public chat_room_is_active: 0 ...

javascripttypescript

Flexbox alignment issue: Text is not vertically centered

I'm facing an issue with centering my content vertically. Upon inspecting the divs, I noticed some empty space below them that seems to be causing the problem. When I tried adding <line-height: 3> in the dev tool styles, it seemed to center prop ...

htmlcssflexbox

React ES6 SystemJS encountered an unforeseen token error that couldn't be caught

Even though I have imported react and react-dom using the System.config setup below, I am still encountering the error mentioned here: Uncaught (in promise) Error: Unexpected token <(…) Here is the HTML structure: <!DOCTYPE html> <html l ...

javascriptreactjsecmascript-6systemjs

Tips for using jQuery to dynamically apply CSS styles to new content added to a webpage

I have encountered this question multiple times on stackoverflow and through google search, but unfortunately none of the suggested solutions have worked for me. My issue involves a page that loads an HTML page with empty sections, which are then dynamica ...

jquerycssdynamic

The React component patiently waits for the necessary props before rendering

When declaring a component within another parent component, I prefer to define specific props in one file and then assign additional shared properties in the parent component. However, I am encountering an issue where the child component fails to render be ...

javascriptreactjs

Encountering a parse error when making an AJAX call using structural functions

I'm in the process of developing an API and here is my PHP function. function retrieve_schools($cn){ $schools_query = "SELECT * FROM schools"; $school_result = mysqli_query($cn, $schools_query); $response_array['form_data'][&apo ...

javascriptphpjqueryajax

What could be causing the data in the data table to remain undeleted unless the page is manually refreshed

I am facing an issue with the delete button functionality. When I press the button, it successfully deletes the row but requires a page refresh to make the deleted row disappear. How can I resolve this problem and ensure that the row is deleted without the ...

javascriptvue.jsvuex

Would it be beneficial to assign a single class name to all elements with matching styles within a CSS framework?

Currently, I am in the process of creating my own CSS library or framework. However, I have encountered an issue where all 10 li tags share the same classes, such as .pl{ padding-left:10px} .mr{ margin-right:10px}, along with other necessary attributes. Wh ...

htmlcssfrontend

The functionality of using an Ajax call to invoke a php function on the same page is not functioning correctly

I am facing an issue where Ajax is not working in the same PHP file as the PHP function I want to call. My goal is to have a button that, when pressed, will trigger the function without reloading the page. I have placed my Ajax script at the bottom and the ...

javascriptphpjqueryajax

AngularJS Toggle Directive tutorial: Building a toggle directive in Angular

I'm attempting to achieve a similar effect as demonstrated in this Stack Overflow post, but within the context of AngularJS. The goal is to trigger a 180-degree rotation animation on a button when it's clicked – counterclockwise if active and c ...

javascriptcssangularjs

Poor height parameter

I am encountering an issue with the height of the div.divB element in this code snippet: <div class="divA"> <img src="http://lorempixel.com/1000/130"/> <div class="divB"> <span>Text text</span> </div> ...

htmlcss

Is there a way to show a 'Refresh' icon in HTML without the need to download an image through HTTP?

In my HTML/JavaScript app project, I am looking to incorporate a 'refresh' symbol without having to load an image through HTTP requests. Are there reliable methods that can achieve this across all major browsers? I came across the Unicode value: ...

javascripthtmlcssimageunicode

Copying text to the clipboard with jQuery - avoiding unique CSS and jQuery characters

I am utilizing ajax to request a unique string from my database. This string needs to be copied exactly as it is because another tool can validate it. However, I am encountering an issue: Error: Syntax error, unrecognized expression This might be due to ...

jquery

Discover the best method for transferring MySQL data between pages

Can anyone help guide me in the right direction on how to allow a user to click a link within a PHP While Loop generated MySQL table and pass that data to another page? I've searched through similar questions but haven't found a solution that fit ...

javascriptphpjqueryhtmlmysql