How can I customize a select dropdown in Bootstrap to have a larger height compared to form-control-lg?

I'm currently working with Bootstrap 4.3.1 and I have a custom-select that I need to adjust the size of to match form-control-lg in height.

When I use 

<select class="custom-select mr-sm-2" id="inputAircraftSupervising" name='inputAircraftSupervising'></select>
, it automatically fills the parent div's width with a default height, which is what I want. https://i.sstatic.net/2fiED.png

However, when I change it to 

<select class="custom-select-lg mr-sm-2" id="inputAircraftSupervising" name='inputAircraftSupervising'></select>
, the height increases but the width shrinks back to the default form-control width. https://i.sstatic.net/Tjdpy.png

Is there a way for me to keep the larger height while still maintaining the full width of the page?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To combine the classes "custom-select" and "custom-select-lg" for the select element, make sure to put "custom-select" before "custom-select-lg". Use the following code:

<select class="custom-select custom-select-lg mr-sm-2" id="inputAircraftSupervising" name='inputAircraftSupervising'></select>

I tested this on bootply and it worked perfectly for me: https://www.bootply.com/GWDJRvtp3I

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

Is there a way to select a checkbox in Google Forms using the console?

I need help with a script I'm creating to automatically populate Google Forms. I am able to select checkboxes using querySelector, but they don't have a .click() method or similar. How can I go about checking the checkboxes? ...

javascripthtmlgoogle-forms

What impact does the margin have on the alignment of my inline-block divs at the top using flex-start?

Embarking on my journey with CSS and HTML, I am eager to enhance my understanding. While attempting to align 3 divs in an inline block at the top of the flexbox section, I expected "align-items: flex-start;" to work, but unfortunately, the divs did not re ...

htmlcsslayoutflexboxvertical-alignment

What is the process for incorporating SQL into a JavaScript function?

I'm having trouble getting user input into my database. I have a functional block of SQL code that should insert the data, but I keep encountering "undefined" errors when running it. Here is the SQL code in question: <?php require 'creationli ...

javascripthtmlsql

In NextJs SSR, external components from a different package do not inherit styles when applied

I have incorporated an external react component into my Next.js app code. Here is a snippet of how the component appears: <AppBar className={clsx(classes.header)}> </AppBar> export const header = makeStyles((theme) => ({ header: { ...

cssreactjsnext.jsmaterial-uiserver-side-rendering

Tips for preventing duplicate paths to the same file in PHP with the help of htaccess

Here is my website address: www.abc.com/cbn/either/index.php I would like to access this page using only the current URL. However, whenever I change the path of the index.php file to: www.abc.com/cbn/index.php I am still able to access the index.php ...

phphtmlapache.htaccessseo

Breaking up phrases into separate lines (Bootstrap 4 + Mobile)

On my website, I currently have a sentence that is fully displayed on the Desktop version. However, I am looking to modify it so that it breaks into 2-3 lines when viewed on Mobile using Bootstrap-4. For example, here is the text in question: Our large, ...

htmlcssbootstrap-4

Tips for achieving consistent line spacing and aligning text evenly with CSS

Struggling to create consistent lines between words without knowing their length in advance. Adding extra divs might be the solution, but I'm hesitant to clutter the DOM with unnecessary elements. .progress-bar { display: flex; width: 100%; j ...

htmlcsssass

What is the method of posting to PHP using JavaScript without utilizing Ajax?

My current code involves a drag and drop file uploader to PHP using ajax, but it seems that my web host does not support ajax. Is there an alternative method to achieve this without using ajax? Specifically, I am facing issues with the UploadFile functio ...

phpjavascriptajaxhtml

Overlapping text display in IE8 and Firefox

I am facing an issue with setting text-overflow to :text-overflow:ellipsis. The problem arises when the input text exceeds the length that I have specified, it does not show in ellipsis. Below is a snippet of the code: <td align="left" width="220px"> ...

css

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

I am working on a website that has drop-down menu headings styled with CSS. I am looking to enhance these certain menu headers by adding small down-facing arrows indicating they are clickable. Does anyone have any suggestions on how I can achieve this? ...

htmlcssuser-interface

My goal is to programmatically eliminate captcha from a website

Is there a way to automatically remove capture from a Page using javascript (Greasemonkey)? The page's HTML structure seems complex, so any suggestions on how to achieve this would be greatly appreciated. <div class="wrapper"> <d ...

javascriptjavahtmlajax

Disable automatic submission of XMLHttpRequest

I've been testing this script and it seems to be working fine, but I'm not a fan of the auto-submit feature. I tried to remove/disable it and add a regular submit button instead, but that didn't work as expected. <div id="div_data"> ...

javascriptjqueryhtmlxmlhttprequest

Angular - Utilizing Mat Paginator with Multiple Tables within a Single Component

I've been struggling with an issue for quite some time now, trying to find a solution but nothing seems to be working. Currently, I am facing an obstacle while rendering five tables on the screen. The data for these tables is fetched using a GET call ...

javascripthtmlangularangular-material

I'm having trouble with my form submission using AJAX, as it's not echoing

I am currently testing the submission of a form using Ajax (submitting to my own page "new1.php"). What I am aiming for is to have the first and last name echoed after clicking the submit button. However, I am not seeing the first and last name displayed ...

javascriptphpjqueryhtmlajax

Reordering images using jQuery leads to a malfunctioning reloading of images

I am in search of the most effective approach to alter the src attribute for multiple images on a page post-loading. Essentially, I need to reorganize them for better display. In their initial arrangement, they are presented as follows: 1 5 9 2 ...

javascriptjqueryhtmlcssimage

Troubleshooting Problem with Upgrading Navbar from Bootstrap 3 to Bootstrap 5

I have been tasked with upgrading Bootstrap from version 3 to 5, and incorporating some minor UI changes such as pixel-wise adjustments. However, I am encountering issues with the navbar transition as mentioned below. Here is a simplified version of my na ...

htmltwitter-bootstraptwitter-bootstrap-3bootstrap-5web-frontend

Having issues with the <ul> tag not displaying correctly

I'm currently working on implementing a side navbar for my website, but I've run into an issue with spacing. In the demo linked in my fiddle, you'll notice that the <ul> element inside the receiptDropDown class doesn't push the k ...

htmlcss

Creating links in CodeIgniter with the 'anchor' function

I recently started working with the codeigniter framework and I need help converting this PHP code into a Codeigniter version echo '<td><a rel="facebox" href=useredit.php?emp_id='. $row['emp_id'] .'><button type="bu ...

javascriptphpjquerycodeignitertwitter-bootstrap

Creating a Standard DIV Element (JavaScript Code)

Just a quick question here. http://jsfiddle.net/fkling/TpF24/ In this given example, I am looking to have < div>Bar 1</div> open as default... Any suggestions on achieving that? That would be all for now. Thank you so much! :D The JS script ...

javascriptcss

Is it possible to insert IE conditionals within functions.php in WordPress?

One common practice is to include the following script in the <head> section specifically for Internet Explorer 9. <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Wh ...

phpcsswordpressinternet-explorer-9