React App build isn't displaying all elements on the webpage

My experience with create react app has been interesting lately.

When I run npm run dev, everything in my application looks great:

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

The button texts are coming from an API call, and all seems to be in order.

But when I tried a production build by running npm run build followed by serve -s build, things took a strange turn. The console directed me to http://localhost:5000, where the buttons were no longer visible:

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

Surprisingly, the buttons were still there - I could hover over them, click on them, and even see the expected console.logs displaying the button titles.

No errors appeared in the console on http://localhost:5000, and the API response was correct. All files loaded without issue in the network tab.

I've tested this in Chrome, Firefox, and Safari, with each browser experiencing the same problem.

Any thoughts on what could be causing this peculiar behavior?

javascriptcssreactjscreate-react-app

Answer №1

Challenge

It appears that you have set the opacity to a very low value, making the questions section almost invisible.

#questions.visible {
    left: 0;
    opacity: 1%;
}

Resolution

The opacity value should typically be between 0 and 1, although percentages may still work (at least in Chrome). Based on the initial CSS rules, it seems like you intended to set this value to 1 when adding the visible class.

#questions.visible {
    left: 0;
    opacity: 1;
}

Make sure to apply the same change for your chat area as well.

#chat-area.visible {
    left: 0;
    opacity: 1;
}

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

Connect ng-models with checkboxes in input field

I am facing an issue with binding ng-models using ng-repeat in an input checkbox tag. Let me share my code and elaborate further. app/main.html: <div ng-repeat="feature in features"> <input type="checkbox" ng-model="features[$index].name"> ...

javascripthtmlangularjscheckboxangular-ngmodel

How to position a div in the center on top of a full-width slideshow using CSS

I am facing a challenge with positioning the banner slideshow controls div in the middle of the screen on top of a full-width slideshow. The main container's width is set to 100%, which is causing issues with centering the controls div. I have attemp ...

htmlcss

What is the ideal way to iterate a loop in jQuery while using setTimeout?

Currently, I'm working on a table and attempting to develop a bookmarklet that will automatically click on each row and perform some actions based on a timer. The loading time for each tab is quite long, but when I focus on just one row, the code work ...

javascriptjquery

Issue encountered: Error in Node.js watchFile - "Undefined is not a function"

Just delving into the world of Node.js and experimenting with some basic code. I currently have the Node.js windows binary version 0.5.8 installed. Below is a snippet of my JavaScript code: var fs = require("fs"); fs.readFile('message.text ...

javascriptnode.jsfile-iodom-events

Having difficulty sizing specific <td> elements in an HTML table

Is there a way to increase the size of a TD cell without adjusting the height of the entire row? I tried using inline styling with "rowspan= 7", but it only centers the data in the middle of the cell. I am attempting to create a table similar to the one s ...

htmlcsshtml-tablebootstrap-table

"Uncovering the Best Ways to Obtain Date and Time Formatting in Angular.js and JavaScript

Can someone assist me with generating a date time format similar to how PHP does it with the method date("YmdHis") in Angular.js or JavaScript? Your help would be greatly appreciated. ...

javascriptangularjsdatetime

I need a counter in my React application that is triggered only once when the page scrolls to a specific element

I've encountered a challenge with a scroll-triggered counter on a specific part of the page. I'm seeking a solution using React or pure JavaScript, as opposed to jQuery. Although I initially implemented it with states and React hooks, I've ...

javascriptreactjscounter

Issue with idangero.us swiper: resizing problem occurs when image exceeds window size

Having an issue where resizing my window causes the image to become larger than anticipated. As a result, the current image is partially cropped on the left side while the previous image starts to show through. Here's a description of what's happ ...

javascriptswiper.js

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

javascripthtmlparameters

Transfer an URL parameter from the URL to the server using PHP or JavaScript

My goal here is to pass the URL as a parameter named "web_url". The code snippet above shows an AJAX request being sent to a PHP server on the backend. On the PHP side, I'm attempting to capture this parameter using: $web_url = $_GET["web_url"]; H ...

phpjavascriptajaxurl

Storing dynamic field data in React JS: Tips and Tricks

I need help figuring out how to save dynamic field values in a specific format to the database. Here is an example of the format I am looking for: "items": [ { "item_id" : 6, "description" : "", ...

javascriptreactjsreact-native

Determine whether a value within one array is present within an object contained in another array

I am attempting to determine if a value from array1 exists within an object in array2. array1: [2,5,1] array2: [ { value: 1, name: 'Monday', isSelected: false }, { value: 2, name: 'Tuesday', isSelected: false }, { value: 3 ...

javascriptarraysreactjs

Different ways to adjust the height of the date picker in Material UI

I am attempting to customize the mui date picker, but I am facing issues with applying CSS styles to it. I have tried using both inline styles and external styling by assigning classes, but nothing seems to work. I specifically want to adjust its height. ...

cssreactjsmaterial-ui

What is the best method to extract information from an ever-changing external JSON file?

I am currently in the process of developing a discord bot using discord.js, and one of the features I am trying to implement is a command that displays the current bitcoin price. To achieve this, I am utilizing the CoinDesk API which provides the necessary ...

javascriptjsonweb-scrapingdiscorddiscord.js

I am experiencing an issue where the CSS file is not being loaded in my HTML file while using the Netbeans IDE

I am a beginner in HTML and CSS and I have been trying to link my CSS file to my HTML code after reading various solutions on Stack Overflow. Unfortunately, I am facing difficulty as the CSS file is not loading in my HTML code. If anyone can offer assistan ...

htmlcss

Obtaining a variable from within a function in Angular.js

Utilizing a service, I am retrieving data from the server through this function: LeadsSrv.async().then(function (d) { results = d.data; }); The goal is to access the results outside of this function and assign them to the scope like so: $scope.All_L ...

javascriptangularjs

Methods for smoothly animating an image to move up and down using CSS

I'm new to CSS and I was wondering if it's possible to create a smooth vertical movement effect for an image using CSS. Something like shown in this link: .... ...

htmlcss

I am encountering an issue where my codeigniter controller is unable to load my model

Below is the code for my controller: defined('BASEPATH') OR exit('No direct script access allowed'); class Welcome extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('User_model') ...

phpjqueryhtmlcsscodeigniter

NextJS Deployment on Windows Server with IIS 10

After creating a NextJS application, I used the command "npm run build" to compile the app, resulting in the files being stored in the .next folder. Now, I am looking to host the app on my own servers using IIS (either version 7 or 10). Despite my efforts, ...

node.jsreactjsiisnext.jsweb-hosting

How can I implement the self-clearing feature of a timer using clearInterval in ReactJS?

I am a newcomer to the world of React and I am currently working on creating a React component with multiple features. Users can input a random number, which will then be displayed on the page. The component includes a button labeled 'start'. W ...

javascriptreactjssetintervalclearinterval