Flask-WTForms QuerySelectField not displaying properly when rendered with Bootstrap causing <select> HTML tag issue

I am facing an issue while constructing a Flask form that includes a QuerySelectField. Despite having everything in place, Bootstrap is displaying the <select> as if it were a text input field.

Upon inspecting the page source, I noticed that the field is being displayed as 

<select class="form-control"...>
. Based on my understanding of the Bootstrap documentation, it should instead be changed to 
<select class="form-select...>
. I have attempted to modify this by including both 
render_kw={'class': 'form-select'}
and extra_classes='form-select' in my form class. However, the latter resulted in an Unexpected Keyword exception, and it appears that the former is not being recognized.

Is there any solution to ensure that my SelectField displays as a proper <select> field?

cssjinja2flask-wtformsbootstrap-5

Answer №1

To tackle this issue, I made the decision to transition from Flask-Bootstrap to Bootstrap-Flask since the latter is more up-to-date with recent updates. This switch also necessitated modifying 

{% import "bootstrap/wtf.html" as wtf %}
to 
{% import "bootstrap/form.html" as wtf %}
within my templates, along with updating instances of wtf.quick_form() to wtf.render_form().

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

The pseudo-element ::before did not function as expected in the CSS code

I attempted to utilize the ::before element in HTML directly. Below is my code: <ul class="clear toogled" style="height:188pxl"> <li tabindex="0" style="display: block;"> <label for="MAP-IA_1_1_OR_CB_1" aria-label="Filter by product"> :: ...

csshtml

Significant empty space to the left of content due to Zurb Foundation

I'm currently utilizing Zurb Foundation within a rails project. My goal is to structure a basic page that consists of a table, text field, and a couple of buttons. However, I am facing a significant gap on the left side of my content, causing the rig ...

htmlcssruby-on-railszurb-foundation

Generating a new display div element using an anchor link

I've set up a div container with a button that, upon clicking, adds a class to an element in my markup causing it to expand and take over the entire screen. Markup before: <section class="isi" data-trigger="toggle" data-trigger-class="isi--show-i ...

javascriptjquerycss

CSS: Eliminate unnecessary space at the top by implementing a margin and padding reset

I am puzzled by the presence of approximately 10px of whitespace at the top of my HTML file. Despite setting margin and padding to 0 in the "body" section of my CSS, the whitespace persists. Any suggestions? Thank you! Update: I discovered that removing t ...

csshtml

Arrange two Angular 2 divs in a single row, with one positioned below the

Good Evening, I have a project in angular and I need help with styling. Specifically, I have 3 divs - card, table, and map. I want the card and table to be in the same row, and the map to be below them with double the size. The top left should have item in ...

htmlcssangular

What is the best way to design an element in HTML/CSS with a curved semicircle border at the top?

I'm looking to design an HTML/CSS element that features a semicircle at the top-middle with a border. Inside this semicircle, I want to place a smaller circle containing a single character (similar to the X in the provided image). Additionally, there ...

htmlbordergeometrycss

Sliding horizontally with a responsive touch

I am looking to implement a horizontal responsive page navigation, similar to the illustration shown below: This is my current progress: DEMO $(document).ready(function () { var slideNum = $('.page').length, wrapperWidth = 100 * s ...

javascriptjqueryhtmlcssresponsive-design

What are the best methods for customizing the backgrounds of the form-floating input labels in the latest version of Bootstrap?

I'm currently using Bootstrap 5.3 and experimenting with the new "floating labels" feature. I want to add some extra styling to my input fields, like background colors. However, when I initially set a subtle green background color, it looks fine witho ...

csstwitter-bootstrapbootstrap-5

Content is not centered with Bootstrap's flexbox

The alignment of content is not centered using bootstrap flex <div class="d-flex flex-row bd-highlight mb-3"> <div class="p-2 bd-highlight text-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></div> <div cla ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Listen up, Javascript keyboard input recorder

I am aiming for the search bar to pop up when you type. The code below is functioning, but I am facing an issue where the search bar pops up even when typing in a different input field, such as the comment input. Is it feasible for the search bar not to ...

javascriptjqueryhtmlcss

What steps can be taken to override the property overflow:hidden specifically for a custom tooltip design

I am facing a challenge with overriding the property overflow:hidden in the parent td element. https://i.stack.imgur.com/HKcvn.png This issue is related to my tooltip, which ideally should be displayed beneath the td element: Code snippet for the toolti ...

htmlcsstooltip

What steps should I take to ensure that this website is responsive across all screen sizes?

Struggling with adapting to different screen sizes, especially with Bootstrap. Below are the images for reference: https://i.stack.imgur.com/AlCjA.png https://i.stack.imgur.com/FT2mU.png Sass source code snippet: body background: $main-background ...

htmlcsssass

Using Angular 2 to position a md-fab button with 'position: fixed' inside an inner component

Utilizing the md-fab-button from the initial angular2 material-framework has presented a challenge for me. I am attempting to set the md-fab-button(for adding a new entity) with position: fixed, but my goal is to position the button within an inner compone ...

htmlcssangularangular-material2

What is the best way to ensure that circles only touch each other by their edges?

Trying to align three circles touching each other has been a challenge for me. Although I have successfully managed to make two touch, the third one remains elusive. How can I ensure that all three circles are in contact with each other, especially when th ...

javascripthtmlcss

Remove the space gap between the header and card in Bootstrap

I'm in the process of creating a sleek landing/login page for my web application using Bootstrap. The current layout includes a header with text and an image, followed by a login form within a card. Looking at the image provided, it's clear that ...

htmlcssbootstrap-5

Tips for using jQuery to create a delete functionality with a select element

I'm relatively new to utilizing jquery. I decided to tackle this project for enjoyment: http://jsbin.com/pevateli/2/ My goal is to allow users to input items, add them to a list, and then have the option to select and delete them by clicking on the t ...

javascriptjqueryhtmlcss

Difficulty with Script Causing Margin Bottom to Fail

Check out my website at this link. Below is a div I have created: <div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 660px; width: 100%; opacit ...

jqueryhtmlcss

What is the best way to split a Bootstrap navbar into two separate rows?

I'm struggling with breaking the navbar to have the navbar-brand in one row and the collapse menu in another. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d0601060013 ...

htmlcssbootstrap-5

Grid X Transformation 3: Dynamically alter grid cell background based on value (no need for CSS classes)

While working with GXT2, it was possible to dynamically change a cell's background color using the GridCellRenderer's render method. However, in GXT3, this feature no longer exists. The suggested approach is to utilize a GridViewConfig and overri ...

cssgxt

Bootstrap popover won't appear on screen

Currently, I am trying to render users from jsonplaceholder using XMLHttpRequest and implement a popover for each user displaying their username, email, phone, and website. Although there are no visible errors in the console, the pop-up window often does n ...

bootstrap-5popoverpopper.jsbootstrap-popover