Creating a Form in a Popup with Bootstrap

I have implemented Bootstrap on my website. Check it out at: hubb.tekkkz.com I am facing an issue where, when clicking on the login/register button on the right, the modal pops up. However, the user input elements within the modal are not taking up the full width of the parent container. This results in less spacing on the left side compared to the right.

How can I make sure that the elements span the entire width of the container/parent?

<div class="modal fade bs-example-modal-sm" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></span></button>
                <h4 class="modal-title" id="exampleModalLabel">Login</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post">
                    <p><input type="text" class="form-control" placeholder="Username" name="username" value=""></p>
                    <p><input type="password" class="form-control" placeholder="Password" name="password" value=""></p>
                    <p><input class="btn btn-primary form-control" type="submit" value="Login"></p>
                </form>
            </div>
        </div>
    </div>

Answer №1

Add a fresh style by creating a new class and applying it to the model inputs

.custom-form-control { 
width: 100% !important;
}

Answer №2

Insert the following CSS snippet:

#loginModal .form-inline .form-control,
#registerModal .form-inline .form-control {
  width: 100%!important;
}

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

What could be the reason for meteor not injecting the text from my template helpers?

My goal is to dynamically generate a table displaying two different sets of data. Despite having verified returns from my database, the rendered page does not show the corresponding HTML elements as expected. Here is the template and HTML code: <templ ...

Tips for adding text to your d3 force layout

Looking to incorporate text into a force layout using SVG. I've created an svg group and added a circle successfully, but having trouble with the text. Here's the code snippet: var node = svg.selectAll("g") .data(measures.nod ...

Adding a background color with a background image layered underneath it in CSS - here's how!

Looking to set a background color for a div, with a background image on the bottom of the same div. However, I need the background color to stop once the background image begins. Check out the example image below: ...

Firefox's keyup event

Is it possible to detect a keypress using the jQuery keyup function, as I am facing an issue where it works in Chrome, Edge, IE, and Opera but not in Firefox. $(".textfield").contents().keyup(function(evnt) { document.getElementById("btn_save").style. ...

Challenges with splitting asynchronous code in NPM modules

Earlier, I posted a query on Stack Overflow I have recently established a local package within the main app's package.json: "contact-page": "file:local_modules/contact-page" The package.jsonmain and scripts sections for the contact module are confi ...

Adding key/value pairs to an array of objects in RxJS Observables can be easily

I currently have an Angular app with state management that retrieves data from a database in observables. Here is an example of the interfaces I am working with: interface Service { id: number, name: string, category_id: number, } interface Category ...

Typescript includes empty spaces in its duplicate-checking process

I have been working on removing duplicate values from an array using the following code: for (var i = 0; i < a.length; i++) obj[a[i]] = a[i] a = new Array(); // Checking each object with keys to remove duplicates. for (var key ...

When trying to import axios from the 'axios.js' file in the 'lib' directory, a SyntaxError was encountered with the message: Unexpected identifier

My server.ts is causing issues. What am I doing wrong? const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const morgan = require('morgan'); const axios = requ ...

Limit the options in jQuery UI auto-complete to search by name from a variety of JSON responses

I am looking to enhance my search functionality by utilizing jqueryUi's auto-complete feature to specifically target Names and exclude other array values such as fax. Here is how I have implemented it in php: <?php require_once 'db_conx.php&a ...

Internet Explorer fails to account for the height of table cells when using overflow-x:auto, leading to hidden content. In contrast, Chrome adjusts for this automatically. What steps can be taken to address

Chrome: Internet Explorer: The image at the top shows how the content should appear on Chrome, while the one below demonstrates how it is displayed on IE11. The issue seems to be that on Internet Explorer, the content gets hidden and doesn't adjust ...

I'm having trouble aligning my <div> element in the center and I'm not sure what the issue could be

I'm attempting to center the image. It seems like it should be a simple fix, but I've experimented with multiple solutions and even started from scratch three times. #main_image { background-color: bisque; position: fixed; display: block; ...

Choosing a unique font style in CSS (OTF) - How to differentiate between bold, italic, etc. when using multiple OTF files?

I'm a little confused on how to implement @font-face in my current project. The client handed over multiple font files including FontName-Black.otf, FontName-BlackItalic.otf, FontName-Bold.otf, FontName-BoldItalic.otf, and more. My usual approach wou ...

When validated, the Yup.date() function seamlessly converts a date into a string without including the timezone

Currently, I am integrating Yup with react-hook-form and have defined the following schema in Yup: const validationSchema = Yup.object({ installation: Yup.string().nullable().required("Required"), from_date: Yup.date() .max(new Date(), "Can ...

Looking at a web page within another web page by utilizing XMLHttpRequest

Recently, I created a web app featuring a preview window that displays the content of an HTML page. To keep up with the constant updates to the HTML page, I have set the preview window to refresh every 0.5 seconds. Although the functionality works correct ...

Securing pages in Laravel and Vue JS: Restricting access to unauthorized users

I have some concerns about my project as it relies on local storage. What if someone figures out how to manipulate it and change roles and permissions set for the logged-in user? For example, if someone changed ['accounting'] to ['accounting ...

The ng-repeat function is currently disabled and not displaying any data from the JSON object

I am currently facing an issue where the ng-repeat Directive in my code is getting commented out and not displaying the results of the JSON object. I have verified that the object is being properly passed to "this.paises2" using the toSource() method, and ...

Navigating in React: How to Implement the Same Route for Different Scenarios Without Compromising Your Application

I'm facing a frustrating issue while trying to incorporate Redux state management and React Router. Despite searching extensively online, I can't seem to find a solution. My Redux state, named user, stores the details of a logged-in user. Upon l ...

JavaScript and PHP are successfully displaying a success message despite the data not being saved to the database

I recently added a new feature to my website where users can submit a form using Javascript without having to reload or refresh the page. This allows for a seamless experience and displays success messages instantly. However, being a newcomer to Javascript ...

Providing structured Express app to deliver HTML and JavaScript content

Currently, I am working with Express and facing a seemingly simple challenge. Here is the structure of my directories: |-config |---config.js |---routes.js |-server.js |-scripts |---controllers |------controllers.js |---directive ...

Is it typically required to install or declare anything in your frontend in order for CORS to be permitted?

I am currently facing a cross-origin error in my react/express project. The error message states: Error: A cross-origin error was thrown. React cannot access the actual error object during development. More information can be found at https://reactjs.org/l ...