Dilen Pat
asked on
Javascript let variable hold multiple CSS properties
I have some CSS properties that have been repeated 3 times. I want to have a Let variable hold the properties so I wont need to repeat the same thing over and over. But for some reason it does not work, can anyone help?
Example code below:
My attempt to create a let variable to hold all the common CSS properties
However, when the webpage refreshes, the columns lose their width and aligment properties
Example code below:
...
let defaultCommonWidth = 200;
_columns.push({
width:defaultCommonWidth,
textAlign:'left'
})
_columns.push({
width:defaultCommonWidth,
textAlign:'left'
})
My attempt to create a let variable to hold all the common CSS properties
...
let defaultCommonWidth = 200;
let myvariable=[{
width:defaultCommonWidth,
textAlign:'left'
}];
_columns.push({
style: myvariable
})
_columns.push({
style: myvariable
})
However, when the webpage refreshes, the columns lose their width and aligment properties
Is it working?
ASKER
Ah sorry, I should add that this is part of a bigger function to manipulate _columns variable (for a React datagrid table). There is a return already at the bottom of the function which just returns _column
This looks like a configuration that something else is consuming - what is it that uses _columns?
Are you sure that the style property is being used correctly?
We are not exactly comparing apples with apples here - your first snippet of code and the second are completely different.
Unless you can show us what uses _columns we cannot help you.
Are you sure that the style property is being used correctly?
We are not exactly comparing apples with apples here - your first snippet of code and the second are completely different.
Unless you can show us what uses _columns we cannot help you.
ASKER
_column is an empty array which will contain properties that will populate an existing React-datagrid table (which I'm learning how it works). Pushing CSS properties seems fine when done directly or with a variable with a single CSS property value like in the below example:
However, if I want to have the variable hold multiple CSS properties (i.e. the property AND it's value), then I believe I need to use the style property and use the variable as the value i.e.
But this doesn't work. I don't understand why. I even used a single property in the variable like
let defaultCommonWidth = 200;
_columns.push({
height: 200,
width: defaultCommonWidth
}]
However, if I want to have the variable hold multiple CSS properties (i.e. the property AND it's value), then I believe I need to use the style property and use the variable as the value i.e.
_columns.push({
style: myvariable
})
But this doesn't work. I don't understand why. I even used a single property in the variable like
let myvariable = {width:200};
but even this simple example doesn't work. Am I using style wrong?
Can you post a link to documentation that describes this?
ASKER
The code related to the React-datagrid is shown here: https://github.com/zippytech/react-datagrid/blob/master/README.md
The issue as I understand is how to use a variable for a CSS property value so I don't know if this is going off on a tangent?
The issue as I understand is how to use a variable for a CSS property value so I don't know if this is going off on a tangent?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sadly it still doesn't seem to be working for me unless I'm doing something wrong. Below is what I used. Refreshing the page did not have the correct width reflected. I've included a few commented lines of code. The bottom two work fine, and yet something simple like style: {width: 200}, doesn't. I feel like I am doing something stupid but I can't see what.
let myvariable={
width:300,
textAlign:'left'
};
_columns.push({
style: myvariable,
//style: {width: 200},
//width:200,
//textAlign: 'left',
name: 'Match Key',
title: 'Match Key'
});
Shouldn't that be
{width: '200px'}
Width style requires a unit
Open in new window