In Mozilla Firefox, the form-control with select tag shows the text, while in Chrome, the same component does not display it

I am currently using Angular 5.x in combination with the select tag and optgroup, along with Bootstrap 4.1.x

This is how my component.html looks like:

                    <select size="15" class="form-control mr-4">
                        <optgroup label="Properties">
                            <option *ngFor="let eachVal of dataResults"
                                    [selected]="searchModel.translatedProperty===eachVal.translatedProperty"
                                    (click)="getPropertyValues(eachVal)">
                                <span>{{eachVal.translatedProperty}}</span>
                            </option>
                        </optgroup>
                        <optgroup label="References">
                            <option *ngFor="e;let eachVal of objResults; let i=index;"
                                    [selected]="searchModel.translatedProperty===eachVal.translatedProperty"
                                    (click)="getReferenceValues(eachVal, i)">
                                <span>{{eachVal.translatedProperty}}</span>
                            </option>
                        </optgroup>

The form-control class is applied to the select element as per the Bootstrap Forms Documentation source

Here's how the list is rendered:

Mozilla Firefox

In Mozilla Firefox v.60.0.2

https://i.sstatic.net/zwr7y.png

However, on a different note,

Google Chrome

The text appears but it's not displayed in black font color https://i.sstatic.net/nZp53.png

I'm encountering this rendering issue. There are no overriding styles in my styles.css.

Can anyone provide the necessary css to ensure that the select tag renders consistently across all browsers?

htmlcssbootstrap-4html-select

Answer №1

Solution

To reveal the text once more, simply delete the <span> tags nested within the <option> tags.

Tests have been conducted on :

  • Mozilla Firefox

  • Google Chrome

  • Microsoft Edge

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

jQuery technique for loading images

Here is the issue at hand: I am attempting to utilize jQuery to accelerate image loading on my webpage. To achieve this, I have a code snippet specifying an initial image that should be replaced with another image once the page has finished loading. < ...

javascriptjqueryhtml

Disabling the visibility of elements through a transparent sticky-top menu

I'm having an issue with my website design. I have a gradient background and a sticky-top menu on the site. The problem is that when I scroll down, the content appears through the menu, which is not ideal. I don't want to apply the same gradient ...

javascripthtmlcssnavbar

Include a parameter in the @keyframes attribute to reduce the amount of code

After compiling my property @keyframes with autoprefixer to add the necessary prefixes, I am looking to add an argument to the animation name (or wherever possible) in order to change a value of properties within the keyframes key. This is the current sta ...

cssargumentslessless-mixins

Coordinating the vertical scrolling of two div elements simultaneously. (scrolling both divs together)

I have a specific setup where I have a text box that is scrollable, and outside of this box are headings that correspond to different sections in the text. I am looking for a way to synchronize the scrolling of the text inside the box with the headings out ...

javascripthtmlcssscrollbootstrap-4

Issues with the navigation and logo design in bootstrap mode

1: How can I adjust the size of the logo and name in my Bootstrap navigation? 2: My navigation menu is not showing up correctly. Can anyone help me troubleshoot? https://i.sstatic.net/0pXya.jpg Navbar: <nav class="navbar navbar-expand-lg py-4 f ...

htmlcsstwitter-bootstrap

Customizing active-class in Vuetify

How do I customize the appearance of my v-list-item-group when it is in the active state? <v-list> <v-list-item-group v-model="day" color="green"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-content& ...

cssvue.jsvuejs2vuetify.js

Ways to display the page's content within a div container utilizing Jquery

I am attempting to display the content of a URL page (such as ) within a <div> using JQuery, but so far I have been unsuccessful. Here is an example of what I am trying to achieve: <div id="contUrl"> .. content of google.fr page </div> ...

javascriptjqueryhtml

How can I retrieve the HTML content of a ReactJS rectangle element saved in an array?

Within a loop, I am creating rectangle elements and adding them to an array: rectangles = []; render: function() { for (var i = 0 ; i < 10; i++) { rectangles.push (<Rectangle height={this.props.afm} width={this.props.afm} x={xpos} y={ypos} va ...

htmlarraysreactjsstyleselement

Issue with the JQuery Lightbox 2 Plugin

I'm currently in the process of developing a gallery using jQuery Lightbox 2 (visit the plugin page here). I am encountering an issue where the navigation entries remain visible even when an image is selected (view example here). The navigation is cre ...

jquerycsspluginslightboxlightbox2

Enhance the <div> with interactive content through dynamic updates on click within the same element

I am currently developing an Editor-Menu for a website administration. When I open admin.php, the Editor-Menu should be loaded into the #ausgabe div using the code $('#ausgabe').load('./admin-ajax/ajax2.php'). This functionality is work ...

javascriptjqueryhtmlajax

What happens when data is managed in getStaticProps and utilized in useEffect within a component?

On my page, I utilize the getStaticProps function to fetch a list of objects containing book titles, authors, and character lists. Each object is then displayed within a component that formats them into attractive pill-shaped elements. The component rende ...

htmlreactjsnext.js

Use jQuery to assign a fresh class to the navigation panel

I'm currently making changes to a WordPress site locally. I'm utilizing jquery.dropotron from ajlkn for the menu, which is working well. However, I'm facing an issue when trying to assign a new class to the 7th child of the navPanel. Somethi ...

jquerycss

Populate your website with both a Bootstrap Popover and Modal for interactive user engagement through hover

Here's the situation: I want to showcase a user's name with a popover that reveals a snippet of their profile information. I've got that part down, where it dynamically generates and displays the popover content as needed. The popover functi ...

javascripthtmlcsstwitter-bootstrapmodal-dialog

Adjust page to fit any size of screen resolution

Currently, I am in the process of designing a print template for my website. Everything seems to be going smoothly except for one issue that has arisen. The screen resolution on my device is 1600x900, so I have designed the page specifically for this resol ...

htmlcss

The placement of controls is not aligned properly when the validation summary is displayed at the top of the web page

Encountering an unusual issue with a custom validator function in my ASP.NET page when trying to display a validation summary at the top of the webpage using CSS styles... Here is the screen shot before clicking the submit button and making changes: Upon ...

javascriptjqueryasp.nethtmlcss

Adding an image to a jQuery class name on the fly

I am attempting to add an image before a div by using its className with jQuery. function insertImage(obj) { var dynamicClass = $(obj).prop("className"); After retrieving the classname, I now encapsulate it in single quotes and add a dot to access t ...

javascriptjqueryhtml

When context.getImgData() is invoked, it triggers a noticeable flickering effect on the canvas

Currently, I am integrating a webcam feed into a video element and then projecting it onto a canvas element. Subsequently, I am implementing face detection on the canvas to highlight faces with a square. The issue at hand arises when I call the context.ge ...

javascripthtmlcanvashtml5-canvas

Permanently dismiss Bootstrap 4 alert using a cookie

Recently, I came across a bootstrap 4 alert that I found quite useful. Here is the code snippet for it: <div class="alert alert-warning alert-dismissible fade show" role="alert"> <button type="button" class="clo ...

javascriptjquerybootstrap-4

Restrict form submission when minimum and maximum requirements are not met using JavaScript

I'm currently using JavaScript to show an error message when a user clicks on the form submit button and the entered number is not within the specified min and max range. The problem I am facing is that even when the submit button is clicked, the form ...

javascriptjqueryhtml

Getting the value of an HTML tag returned from an Ajax request

After making an AJAX call in VBScript, I am receiving the following HTML: <html> <body> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="100%" ...

javascriptjqueryhtmlajax