The search bar on the screen does not span the entire width as expected using Bootstrap CSS styling

I have a search form with an input field and a button. When I place the form in a standalone HTML file, the input and button span across the width of the div. However, when I embed it into the specific div I am working on, it shrinks to the left. Here is the code snippet:

<div class="col-sm-10" style="min-height:280px">

             <div style="margin-bottom:18px; clear:both;" class="row">

                            <div class="col-lg-7"  >
                          <form class="form-inline" role="form" method="post"
                          action="/grantaccess">
                        <div class="input-group">
                           <input name="searchName" type="email" class="form-control search-form" placeholder="Search">
                           <span class="input-group-btn">
                           <button type="submit" class="btn search-btn"><i class="fa fa-search"></i>
                            </button>
                            </span>

                        </div>
                        </form></div>

                        </div>

            <div class="panel panel-default">
            <div class="panel-body"> 


                                          <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    RETRIEVED DETAILS
                                                </div>
                          <div class="panel-body">
                              <div class="container">

How can I make the form span across the width of the div?

htmlcsstwitter-bootstrap

Answer №1

In case you are utilizing Visual Studio as your integrated development environment (IDE), take a look at your site.css file to see if it contains the following CSS code snippet:

input,
select,
textarea {
    max-width: 280px;
}

This particular CSS rule is typically included by default in new MVC web projects. If you want your input fields to stretch to 100% width, simply comment out this section.

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

Using Javascript to create session-specific cookies

Is it possible to create session-only cookies using JavaScript that get removed when the browser is closed? Due to limitations, the website I am working on is HTML-only, so server-side scripts cannot be utilized. I came across a method mentioned here: b ...

javascripthtml

The unresolvable IE7 Z-Index dilemma caused by a bug within nested elements!

Take a look. I'm struggling to get the .menu ul to display properly, it's frustrating! It shows up in ie6, ie8, safari, and ff, but not ie7! I've tried everything. Any suggestions? (I'm almost at xhtml strict validation too). ...

csslistinternet-explorer-7nestedz-index

Difficulty maintaining list formatting in AngularJS and Bootstrap due to ng-repeat functionality

I'm currently working on a project where I need to display content from an array using ng-repeat in Angular. The content is originally in JSON format, but it has been stringified before being added to the array. The problem I am facing is that this c ...

javascripthtmljsonangularjstwitter-bootstrap

Tips for scrolling content within a flex row that has a flex-grow-1 property

I am working on a Bootstrap layout where there are 3 rows wrapped in a flex column. Here is how it looks: <div class="row" style="height:100vh;"> <div class="col d-flex flex-column"> <div class="row">...</div> <div c ...

cssbootstrap-4flexbox

Problem with displaying information in the table based on the numerical input

How can I dynamically set the number of rows in a table based on an input field? var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.myObj =[ {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin ...

htmlangularjs

Struggling to send form data to the database

I've been working on sending form data to a database but for some reason, the data doesn't seem to be showing up when I check the database. Can anyone help me figure out what I'm doing wrong? I followed a tutorial on YouTube pretty closely, ...

phphtmlmysql

Overrides of variables are not always complete

After setting up my project with npm install to utilize sass overrides, I encountered an issue. Despite adjusting the $theme-colors, only part of the page reflects the change. https://i.sstatic.net/xjrsx.png I attempted the following: $theme-colors: ("p ...

csssassbootstrap-4

IE11 adds additional spacing around list elements

I am encountering a peculiar issue with how Internet Explorer 11 handles unordered lists, unlike other browsers. Below is a comparison of how the ul appears in IE11: And here is how it looks in Chrome and other browsers: .iconImgBA { max-width: 2.4r ...

htmlgoogle-chromelesshtml-listsinternet-explorer-11

Comparison between the sluggishness of radio buttons in Internet Explorer 10 versus Chrome when using jQuery

When using IE 10, Chrome, and jquery 1.10.2 with the standard template from Visual Studio 2013 (.Net 4.5), I encounter an issue with radio buttons. Upon clicking a radio button, two actions are supposed to occur: 1. Recreation of all the radio buttons. 2 ...

javascriptjqueryhtmlcross-browser

What is the best way to place a background image at the top left and bottom right corners of an HTML element?

I have a paragraph and I would like to visually mark the beginning and end of the paragraph for the user. I have successfully displayed a background image in the upper left corner, but I am unsure how to position the background image in the lower right co ...

javascripthtmlcssbackgroundbackground-image

Are Half of the <a> Links Invisible due to a Possible Issue with Position:Fixed?

There seems to be an issue with some of the links in my navigation bar not working properly. It appears that they are being covered by an iframe element, preventing them from changing color when clicked. Although the iframe element is visibly below the na ...

csshyperlink

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

I recently customized the stepsForm.js by Copdrops and made some modifications. Although everything works well, I'm struggling to navigate back to the initial step (first question) after submitting the form due to my limited knowledge of JavaScript. ...

javascriptjqueryhtmlcsssettimeout

Conceal the bootstrap hamburger icon if there are no navigation items present

I am working on dynamically populating nav-items within a navbar bootstrap component. There are instances where no nav-items are present, and during those times, I would like to hide the hamburger icon in device viewports. I have identified that the class ...

htmltwitter-bootstrapbootstrap-4

I'm struggling to retrieve and display data from my Flask application using console log. It seems to be a challenge when combining it with

I am encountering an issue while attempting to load data into my Flask page and log it in the console. The error I keep receiving is shown below: VM165:1 Uncaught ReferenceError: data is not defined at <anonymous>:1:13 Below are snippets of cod ...

pythonhtmlflask

Repositioning a jQuery function from inside a plugin

I need assistance with customizing the functionality of a jQuery plugin called AjaxFileUpload. You can find the plugin here: https://github.com/davgothic/AjaxFileUpload The current behavior of the plugin is that it uploads the file as soon as it is select ...

jqueryhtmlplugins

The $.getJSON function seems to be malfunctioning and is not returning the expected data, instead, showing [object Object

I seem to be encountering a common issue with my ajax call not retrieving the JSON data. It appears that it may be due to an array and not using the correct index, although I am indeed utilizing an index on the front-end. Despite trying various solutions f ...

phphtmljqueryjsonajax

The functionality of CSS columns is not supported in Firefox browser

Currently, I am working on a web page design inspired by Pinterest. However, I have encountered an issue where the columns property is not functioning properly in Firefox. You can find the example I am trying to replicate here. Feel free to test it in Fir ...

htmlcssfirefox

AngularJS enables the loading of directives dynamically, but sometimes encounters errors such as "Restricted URI access denied."

Presently, I am in the process of developing a small educational project using HTML5, CSS, JS and AngularJS. Hiccup: Loading an AngularJS Directive in my index.html file Error code [1] - Local browser Error: Access to restricted URI denied Various resp ...

javascripthtmlangularjsfilestructure

jQuery introduces additional elements while parsing HTML code

If you have an HTML string that needs manipulation using jQuery, you may encounter the issue of jQuery adding additional tags to the string. To avoid this problem, you can follow this approach: var html = marked(input); //returns an html string console.lo ...

javascriptjqueryhtml

Highchart displays text centrally on legend hover

I am struggling with the code provided here. My goal is to make text appear in the center of the donut chart when hovering over the legend. Similar to how it works when hovering over a single piece of the donut chart. var chart = new Highcharts.Chart ...

javascriptjqueryhtmlcsshighcharts