The width of BootStrap select is not adjusted properly when a prepend is added

Currently, I'm working on designing a login page where I want to include an icon before the select option to indicate that users can change the language. However, when I added the icon, the select width became distorted. It appears a bit too wide on the right side, as shown in the screenshot below.

<div class="input-group">

                <div class="input-group-prepend offset-2 offset-md-3">
                    <div class="input-group-text">
                        <i class="fas fa-globe-europe"></i>
                    </div>
                </div>

                <select class="form-control col-8 col-md-6" name="lang" onchange="this.form.submit();">

                        <optgroup label="Official Languages">
                            <option value="en" selected="">English (United States)</option>
                            <option value="pl">Polski (Polska)</option>
                        </optgroup>
                        <optgroup label="Community Translations (not checked by us)">
                            <option value="es">Español (España)</option>
                        </optgroup>

                        </select>                           

                    <div class="container">
                        <div class="row">
                            <div class="col-12 text-center">
                                <span onclick="window.open(dir+'popup/unofficial-translations','popupUNOFFTRANSL','height=500,width=1000,left=100,top=100,resizable=no,scrollbars=yes,toolbar=no,menubar=no,location=no,directories=no, status=no');" style="font-size: 1.8vh" class="text-muted"><abbr>Click here to learn more about unofficial translations</abbr></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 text-center">
                                <span style="font-size: 1.8vh" class="text-muted">Changing the language will log you out automatically.</span>
                            </div>
                        </div>
                    </div>

            </div>
cssbootstrap-4

Answer №1

Without seeing the code for your rendered dropdown, I can only make assumptions about your HTML structure.

One issue I noticed in your code is the absence of the .row class when using .col-*. It is essential to wrap your columns inside a row. Additionally, outside of the columns, you should include a .container element.

Furthermore, you have a .container nested within your <select> tag, followed by a .col-12. This setup seems unnecessary. If you aim to create a full-width row, you can omit the .row and .col-12 classes as Bootstrap <div> elements inherently cover 100% width.

Assuming that your outermost class is .container, you should avoid nesting another .container within it. Each section requires only one container class.

After restructuring your code as per the suggestions, your example should work properly:

https://i.sstatic.net/2Ho75.png

See the demo: https://jsfiddle.net/davidliang2008/jk7es2c8/22/

It is important to provide a clear view of your HTML structure when seeking assistance. Failure to do so may result in answers like this or the possibility of your post being flagged as off-topic or unclear.

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 is the best way to incorporate multiple images using CSS styles?

Greetings! I am a newcomer to the world of CSS and I am currently utilizing a single image in my header, as shown below: #header { position: relative; background-image: url("../../images/header.jpg"); background-size: cover; background-pos ...

cssheaderbackground-imagecss-transitionstransition

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

This situation is causing me frustration... depending on the zoom level of the browser, my boxes do not align properly and it ends up looking messy (in all browsers). Any advice? Could I handle this more effectively with jQuery? HTML </div> <div ...

csshtmlzoomingfadeout

Blank space on the lower portion of my website as I attempt to implement a responsive layout

Working on making my webpage responsive for iPad and mobile devices. While adjusting the media query, I noticed a white area at the bottom of the page that seems to be outside the body element. Unsure of where it's coming from. Any help would be great ...

htmlcssresponsive-design

Unable to retrieve custom CSS and JS files hosted on the server

Encountering Server Issue My server is returning a 404 NOT FOUND error when trying to access my static files: css and js. In IntelliJ IDEA, the path appears correct as shown in the image https://i.stack.imgur.com/nTFv9.png. However, upon accessing the pa ...

javascriptjavahtmlcsstomcat

Button from Material-UI vanishes upon being clicked

I encountered an issue with a button that disappears when clicked on. Additionally, clicking the button once does not trigger any actions associated with it. In order to execute the button actions, I have to click the area where the button was located afte ...

javascriptcssreactjsmaterial-ui

Adding Font Awesome to my Angular 12 project within Visual Studio 2019

Seeking a no-frills guide for integrating Font Awesome (free version) into my Angular 12 application within Visual Studio 2019. After countless Google searches, I am bombarded with intricate methods. It's baffling why such complexity exists just to in ...

cssangularvisual-studio-2019font-awesome

The hyperlink does not function properly when included within an <input type=button> element

I have encountered an issue with the code below. In my project, I have a search bar along with some buttons. Currently, only the hyperlink of the search button is functioning correctly. The other buttons seem to redirect to the same link as the search bu ...

javascriptphphtmlcss

Struggling to modify CSS properties for :before and :after pseudo-elements?

My current styling looks like this: section.tipos .content > div:before { background: none repeat scroll 0 0 #DDDDDD; content: " "; height: 10px; left: 32%; position: absolute; top: -10px; width: 10px; } It's working p ...

javascriptjquerycss

Tips on displaying text inside an icon

As a self-taught newcomer to web development, I apologize if this is a basic question. I'm trying to figure out how to display text inside an icon, like putting a number inside a heart. Would using a webfont icon not be suitable for this purpose? Is ...

cssicons

What is the best way to adjust a fixed-width table to completely fill the width of a smartphone browser?

In an ancient web application, the design was primarily constructed using rigid tables: <div class="main"> <table width="520" border="0" cellspacing="0" cellpadding="0"> <tr> <td>...</td> </ ...

htmlcss

DevExpress popup remains contained within the iframe and does not overflow beyond its boundaries

My dilemma involves incorporating a FilterControl within an iframe popup. My issue arises when using the column selector (or any other DevExpress combobox), as the popup remains confined within the frame without extending beyond its borders. I am seeking a ...

asp.netcssiframedevexpress

What could be the reason behind the failure of this :after element?

I am facing an issue with the preloader on my webpage where the animation is not displaying as expected. The animation should appear on top of a dark black background before the page fully loads, but it seems to be missing. The CSS for the animation works ...

javascriptjqueryhtmlcss

What are some techniques for styling a field when the div id is not specified?

I need to customize a data field within a table, but I am unable to locate or identify its div ID. Here is the page source: <tbody> <tr> <td style="font-size:12px; text-align:center;" name=""> <div sty ...

javascripthtmlcss

Enhance the appearance of your Table footer with a personalized touch

I have two different Text components that I am working with. You can view some examples of these components here. Here is the scenario: Text1 is located within a form (labeled as text) Text2 is situated in the footer area of a table In each text, I hav ...

csssapui5

The functionality of the class in Angular Bootstrap 4.3 is currently experiencing a

I recently upgraded from Bootstrap version 3.7 to 4.3 in my Angular 7 project, but I encountered some issues with the following code after the update. <div class="container"> <div class="row"> <app-select> ...

angularbootstrap-4

The functionality of jQuery .Show() may be affected when a negative margin is present in the

Check out this demo on Codepen that showcases the issue: http://codepen.io/theclarkofben/pen/xKhsd The .Show() effect isn't working as expected due to the negative margin applied to the div. Can someone shed light on why this behavior is occurring? ...

jquerycssjquery-uishow

Unable to override default styles with custom styles in React MUI 5

I've been attempting to replace the default MUI 5 Button styles with my custom styles using either withStyles or a className (created using makeStyles), but I'm running into an issue where the default styles take precedence over my custom ones. I ...

cssreactjsmaterial-uimakestyles

Iterating through the entire table presents a challenge when trying to display multiple values on a single element

I'm facing a challenge in dynamically adding data from an SQL Table to HTML. Here is my loop: @foreach (var item in Model.ModulesSubStages) { <div class="row"> <div class="col-md-6"><a id="courseRed ...

c#htmlcssasp.netrazor-pages

Swap the text within the curly braces with the div element containing the specified text

I have an input and a textarea. Using Vue, I am currently setting the textarea's text to match what's in the input field. However, now I want to be able to change the color of specific text by typing something like {#123123}text{/#}. At this poin ...

javascripthtmlcssvue.js

What is the method, by using JavaScript or CSS, to include extra space at the end of text block without starting a new line?

Imagine having some text, and at the conclusion of each paragraph there is a (more)... link. The layout ends up looking like this: This is just an example paragraph. Click on the more link for additional information. (more...) Now comes the desire to i ...

javascripthtmlcsslayout