ReactStrap: Transparency issue with DropDown items on mobile devices

I've encountered an issue with my dropdown menu that works perfectly on desktop:
https://i.sstatic.net/73Z0X.png
However, on mobile devices, it appears to be transparent for some reason:
https://i.sstatic.net/dhtOw.png

Here is the code snippet responsible for implementing the dropdown:

<UncontrolledDropdown>
                <DropdownToggle
                  aria-expanded={false}
                  aria-haspopup={true}
                  caret
                  color="danger"
                  data-toggle="dropdown"
                  href="#pablo"
                  id="dropdownMenuButton"
                  nav
                  onClick={(e) => e.preventDefault()}
                  role="button"
                >
                  {this.state.category == "" ? "category" : this.state.category}
                </DropdownToggle>
                <DropdownMenu
                  aria-labelledby="dropdownMenuButton"
                  className="dropdown-danger"
                >
                  {categoryDropDownItemsNames.map((categoryDropDownName) => (
                    <DropdownItem
                      tag="span"
                      name="category"
                      value={categoryDropDownName}
                      // onClick={(e) => e.preventDefault()}
                      onClick={this.onCategoryChosen}
                    >
                      {categoryDropDownName}
                    </DropdownItem>
                  ))}
                </DropdownMenu>
              </UncontrolledDropdown>
       

Can anyone provide insights into why this unexpected behavior is occurring?

Answer №1

It seems like there's a small issue with the template I've implemented. However, I managed to resolve it by making the following adjustment:

 <DropdownItem
                      tag="span"
                      name="category"
                      value={categoryDropDownName}
                      onClick={this.onCategoryChosen}
                      /** To ensure visibility on mobile devices, I had to add this style */
                      style={{
                        backgroundColor: "rgba(256, 256, 256, 1)",
                      }}
                    >
                      {categoryDropDownName}
                    </DropdownItem>

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 method for using CSS/HTML to showcase text at a height of 2mm consistently across various devices with varying screen resolutions and dimensions?

Designing a basic webpage to showcase the text "Hello, World!": <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta charset="utf-8"> </head> <body> <p>Hello, Wor ...

Submit button in contact form SVG not functioning correctly due to incorrect button tag usage instead of input tag

I am using an SVG animated button as the submit button for my contact form. I initially found a solution with the label tag here, but discovered that it does not allow divs inside of it. After some research, I tried implementing a button tag instead, which ...

Tips for resolving cors error on static website deployed on aws s3 hosting?

I currently have a static website hosted on an AWS S3 bucket and am attempting to make a POST request to my backend that is running locally. However, I'm encountering the following CORS error: Access to XMLHttpRequest at 'http://localhost:5000/lo ...

SurveyJs Input component with additional feature

Currently working on a project using ReactJS and surveyjs. I am interested in incorporating an input element for capturing percentage values (%). I am curious if there is a solution for this: Integrating a bootstrap addon or similar feature with surveyjs ...

What are the best practices for utilizing the onLeave() function in fullpage.js?

My goal is to make the user scroll through 4 sections. Upon reaching the fourth section, if the user scrolls down again, instead of going to the fifth section, the view should loop back to the first section. (The fifth section only contains the imprint and ...

The typewriter effect is configured to appear as a separate layout,

<div className= "HomePage-typewriter"> I do{'\u00A0'} <Typewriter options={{ strings: [ '<span> this </span>', '<span> that </span>', '<span&g ...

Incorporate a bootstrap button into a dynamically generated bootstrap table

I have a dynamic bootstrap html table generated from a database. Here is the table design template I'm using: This is the button I am trying to add to the "del" columns: https://getbootstrap.com/docs/4.0/components/buttons/ (Danger) void main() { ...

Adjust the size of H1, H2... tags based on their own specifications, rather than the surrounding element

I have run into a bit of a conundrum with my code and cannot seem to find the right solution. Here is what I currently have: <div id="bloquetexto4" class="bloquetexto"> <H2><b>TITULO</b></H2> <p>Texto bla bla bla.</p ...

How can Play framework be used to display static HTML pages with static JavaScript and CSS files?

I'm currently exploring options for rendering or routing to static web apps stored in the Play's public folder. Here is my project structure: myapp + app + conf + modules + public | + webapp1 | + css | + ...

Problem with selecting odd and even div elements

I have a div populated with a list of rows, and I want to alternate the row colors. To achieve this, I am using the following code: $('#PlatformErrorsTableData').html(table1Html); $('#PlatformErrorsTableData div:nth-child(even)').css(" ...

Is there a way to adjust the height of an image to be responsive in tailwind css?

<!-- this is the section with the services description and an image of an egg --> <!-- this is the first section with the description --> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> &l ...

Best practices for managing useStates and useEffects in a Reactjs trivia game application experiencing double rendering

In my React quiz app, a random Korean hangul character is displayed from a set of 40 items in Data.json. Users are presented with 5 buttons containing different answers also sourced from Data.json. Just to clarify, all components in my application are sib ...

What is the best way to conceal the jqgrid entirely while it is still loading?

Having an issue with my jqgrid. As I load the table and fetch a large amount of data from the database, the loading process naturally takes a few seconds. However, during this time, I can see the column headers without any rows or styles applied to the jqg ...

Getting started with html2canvas: A beginner's guide

So here's a seemingly simple question... I'm diving into new territory and stumbled upon http://html2canvas.hertzen.com with a straightforward tutorial. After successfully running the command npm install -g html2canvas, I hit a roadblock. Where e ...

How to test onSubmit with react-testing-library on react-final-form

I put together a form using react-final-form, yup, and Material-ui. My testing tools include Jest, and @testing-library/react. Summary: Is there a method to mock and test just the onSubmit function without dealing with the validate functionality? Is there ...

Issue: Module './App' not found in webpackSolution: Check if the module path is

I've decided to switch my .js files to .tsx in order to start using TypeScript. To incorporate TypeScript, I used the following command: yarn add typescript @types/node @types/react @types/react-dom @types/jest and began converting first index.tsx fo ...

Having difficulty altering the font in the WordPress tinymce editor

I've been attempting to update the font in the WordPress tinymce editor, but I'm running into issues. First, I created a tinymce-custom-editor.css file with the following code: @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,7 ...

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

I'm facing a challenge trying to blend a few elements together: My goal is to have two columns take up 100% of the browser width with a height that adjusts relative to this width. I want these columns to switch to one column when the viewport is sma ...

Searching for and replacing text that spans across multiple nodes in HTML can be accomplished using C# programming language

Here is the HTML code to consider. The term 'response' was modified to 'reason', by removing 'sp' (<del> tag) and adding 'as' (<ins> tag), while also removing 'se' (<del> tag). <div &g ...

Insert a hyperlink button using InnerHtml

I am facing an issue with displaying a list item that contains a tab and a link button: <li runat="server" id="liActivityInvoices"><a href="#tabActivityInvoices">Invoices</a><asp:LinkButton runat="server" ID="btnLoadInvoice" OnClick=" ...