I am having trouble getting the box-shadow to appear on my

Currently experiencing a problem with css box-shadow while working with material ui and react base table in our project.

The challenge lies in replacing the react virtualized table with react base table, specifically regarding the styling of the header row.

Initially, I had the following box-shadow styling that worked well with the ReactVirtualized__Table:

 .ReactVirtualized__Table {
        .ReactVirtualized__Table__headerRow {
            background-color: #ffffff;
            box-shadow: 0 3px 3px -2px rgba(36, 36, 36, 0.12), 0 3px 4px 0 rgba(36, 36, 36, 0.14),
                0 1px 8px 0 rgba(36, 36, 36, 0.2);
   }
}

However, upon implementing react base table with JSS styling, I tried adding the shadow in the following way:

 root: {
    '& .BaseTable__header': {
      boxShadow:
        '0 3px 3px -2px rgba(36, 36, 36, 0.12), 0 3px 4px 0 rgba(36, 36, 36, 0.14), 0 1px 8px 0 rgba(36, 36, 36, 0.2)',
      fontWeight: 'normal',
      position: 'relative',
    },
}

Additionally, I attempted a different approach with the box-shadow property:

 boxShadow: [
        [0, 3, 3, -2, 'rgba(36, 36, 36, 0.12)'],
        [0, 3, 4, 0, 'rgba(36, 36, 36, 0.14)'],
        [0, 1, 8, 0, 'rgba(36, 36, 36, 0.2)'],
      ],

Despite these efforts, the shadow only appears below the header row and not above it. The cause of this issue remains elusive to me.

javascriptcssmaterial-uijss

Answer №1

Interesting. It's strange how React Virtualized was able to display it correctly without any adjustments, but in this case I had to manually adjust the margin top to make the header row appear properly.

Answer №2

The structure of the box-shadow CSS property is as follows:

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color ;

If you want the box-shadow to appear above an element, make sure to set the `offset-x` value with a negative sign.

For instance:

box-shadow: -2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Answer №3

format for creating box shadows

box-shadow: -15px -15px 25px #ffffff;
box-shadow:   horizontal-offset vertical-offset blur-radius color

Answer №4

The format being used is incorrect. For accurate results, consider utilizing online resources such as StylishCoding to efficiently generate shadow styles and verify their syntax. If you wish to incorporate multiple shadows within your element, you can follow this syntax:

box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

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

Arranging xml information in chronological order using jQuery

I need help sorting and displaying date information extracted from a RSS feed. Can someone assist me with this? Thank you! $('#feedContainer').empty(); $.ajax({ type: 'GET', ...

javascriptjqueryhtmlxmlsorting

Fixed navigation menu at the top of the screen

Can anyone help me with my navbar issue? I want it to stay on top of the page, but there's a huge gap between the top of the page and the nav bar. I've tried running a JS file, but it doesn't seem to fix the problem. Any ideas on how to make ...

javascripthtmlcss

Is the IF statement executed every time the condition is met, or only once?

Can you explain how the "if" statement works in JavaScript? Does it check for conditions only once, or does it execute whenever the condition is met, regardless of whether it was initially false but later became true? For instance, if the condition is bas ...

javascriptnode.js

Observing the vertical dimension of a VueJS element

Can a VueJS watcher be used to monitor changes in the height of an element? I'm currently working on improving the filters section of a search results page. However, I'm facing difficulty in detecting when the results change so that the filters ...

javascriptdomvue.jsvuejs2vue-component

Tips for increasing the font size using html and css?

I am encountering an issue with my HTML code: <div class="a"><font size="40"><font color="black">A</font></font></div> No matter what I try, I cannot seem to increase the font-size. Even adjusting the value in the co ...

htmlcsswordpress

Assign a value to the input field based on changes made in another input field

I am brand new to the world of JavaScript and currently grappling with setting a value in an input field based on the onchange event of another input field. Here is my code sample for input field 1: <input type='text' onchange='methodTh ...

javascripthtmldom-eventsonchange

How can one determine the proper size for a border?

Can the border of a div be larger than the actual dimensions of the div itself? For instance, if the div is 10x10 in size, is it possible to have a border that is 20x10? ...

cssborder

Incorporate New Element into the Express Request Object

I am attempting to enhance the Express request object by adding a property called "forwardingUrl". To achieve this, I utilized declaration merging in a file named ./typing.d.ts: declare namespace Express { export interface Request { forwardingUrl: ...

javascripttypescriptexpressnestjs

What is the best way to trigger the code within my useEffect React hook to execute again upon refreshing the page?

I'm encountering an issue where the value of states is becoming 'undefined' after refreshing the page. Within my useEffect hook, I am generating a random number to select a question object from an array. Everything works smoothly on the ini ...

javascriptreactjsreact-hooks

How should FormData be structured?

After trying to upload the test JSON to arweave, I encountered an issue when attempting to append bufferTest. The error message displayed was: Unhandled Rejection (TypeError): Failed to execute 'append' on 'FormData': parameter 2 is not ...

javascriptreactjsajaxform-data

Is it possible to create a sticky element that stays fixed to the window without using JavaScript?

Using position: sticky has been a game-changer for me. It resolves many issues without the need for JavaScript. However, I've encountered a roadblock. I am trying to create a sticky element that is nested inside multiple <div> elements. Since po ...

javascripthtmlcss

Expand the width of the div by a specified amount with each click

Greetings Everyone! I've scoured the internet high and low in search of a solution, but I have yet to come across exactly what I need. The Issue at Hand My goal is to expand the width of my Div every time I click on my Button. All I have is my DIV ...

javascripthtmlcss

How can you ensure an image is centered properly when padding is applied?

Is there a way to center an image without affecting padding around it? Check out this sandbox for reference HTML <div class="imageParent"> <figure id='img-div'> <img class='image card' ...

htmlcss

Is there a way for me to receive numerical values instead of NaN?

I'm currently facing a challenge in creating a Fibonacci number generator and I've hit a roadblock. It seems like I have a solution, but the appearance of NaN's is causing me some trouble. function fibonacciGenerator (n) { var output = [ ...

javascript

Improving basic collision detection using velocity-based 2D motion

Check out this CodePen demo where you can control the movement of the "player" square using arrow keys. You can also place a light by pressing the spacebar and the player is supposed to be prevented from crossing over the blue lines by getting pushed in ...

javascriptthree.jscollision-detection

Issue with Mongoose not triggering callback

This particular function is the one that we are discussing function matches_password(password) { var modified = false; var matched = false; User.count({password : password}, function (err, result) { modified = true; console.log('hey& ...

javascriptnode.jsmongodbasynchronousmongoose

After the rendering process, the React Component member goes back to a state of

One issue I encountered is related to a component that utilizes a separate client for making HTTP requests. Specifically, when trying to use the client within a click event handler, the call to this.client.getChannel() fails due to this.client being undefi ...

javascriptreactjstypescript

Steps to substituting characters within a date string

Create a function called normalize that changes '-' to '/' in a given date string. For example, normalize('20-05-2017') should output '20/05/2017'. This is my attempt: let d = new Date('27-11-2021'); fun ...

javascript

Tips for handling an empty jQuery selection

Below is the code snippet: PHP CODE: if($data2_array[7]['status'] == "OK"){ $degtorad = 0.01745329; $radtodeg = 57.29577951; $dlong = ($lng - $supermercado_lng); $dvalue = (sin($lat * $degtorad) * sin($superm ...

javascriptphpjquery

What could be causing ngif to disregard priority levels?

I have developed a unique custom directive with a priority of 1000. Within the compile function of the directive, I am removing the ng-if attribute from the element. My belief is that since ng-if has a lower priority of 600, it should not undergo compilati ...

javascriptangularjsangularjs-directiveangularjs-ng-if