I'm searching some ways to change the default code like this one _palette(highlight) but I'm unable to find which file I can change to make effect everywhere in my website.
&:hover {
border-bottom-color: transparent;
color: _palette(highlight) !important;
}
i found a file named _vars.scss, so here i can change every thing
Related
Does anyone know why my project is like this when small tabed,
enter image description here
But when full screened like this:
enter image description here
My grid has the css of:
.table{
position: absolute;
margin-top: 37em;
margin-left: -42em;
min-width: 1015px;
}
Your style will depend on how it was created in your workflow, but you can try this class
const useStyles = makeStyles({
table: {
minWidth: 650,
},
});
or
.table {
min-width: 650px !important;
}
But this limitation on the size of the table may be related to the element or container that is related to the table.
You also do not need to declare the table's position since it is inherent to your parent and is not placing it in a specific place.
Could you show us how you are applying these classes in your code. You only showed us a small piece of code and did not present the application for that class.
You can also see class applications and table usage on the Material-UI page
https://material-ui.com/styles/basics/
It would be interesting to publish with your question the code where it is generating this situation, just seeing images is difficult to understand your problem
change your css like
.table{
width: 100%;
margin-top: 37em;
margin-left: 0;
}
I'm using this CSV to HTML table library, and it's working great. My problem is that, when i upload a csv that does not contain headers, the first row is displayed as the header row instead. I would like the header row displayed only if there is a header obviously. Any idea how?
This is the library i'm using:
<CsvToHtmlTable
data={this.file}
csvDelimiter={this.delimiter)}
tableClassName="table"
tableColumnClassName="tableColumn"
tableRowClassName="tableRow"
header="th"/>
And this is the css for 'th', if it is necessary:
th {
/*background-color: rgb(177, 176, 176); */
background-color: #222222;
color: white;
font-size: 13px;
font-weight: 400;
border-right: 1px solid #ddd;
height : 38px;
}
According to Wikipedia, CSV doesn’t have a standardized way to tell if the file has a header or not. You could of course come up with some way to detect the header’s presence, applicable to your data set.
For your convenience, the NPM package you are using has a prop called hasHeader. By setting it, you tell the component whether to render a header or not. The default value is true.
So, you can remove the header from the element simply by giving your <CsvToHtmlTable /> element a false as its hasHeader prop.
Like this:
<CsvToHtmlTable
data={this.file}
csvDelimiter={this.delimiter}
hasHeader={false}
tableClassName="table"
tableColumnClassName="tableColumn"
tableRowClassName="tableRow"
/>
Hope I could be of help! Ask away if you have any further doubts!
I am using polished which documentation can be read about and here github repo here.
When writing styles in JavaScript, many people need Sass-style helper functions to be productive. ✨ polished brings them to you in a nice, lightweight package tailor-made for styles in JavaScript.
I am using the tint function, an example of how it is used can be found in the documentation link above:
Tints a color by mixing it with white. tint can produce hue shifts, where as lighten manipulates the luminance channel and therefore doesn't produce hue shifts.
I have a theme object which stores all my colors, it is something like this:
const object = {
colors: {
myDesiredColor: '#0000FF',
...otherColors
},
};
I am then exporting a some styles which I intent to reuse. Like below:
export const containerStyles= css`
color: ${tint(0.5, object.colors.myDesiredColor)};
padding: 17px;
margin-bottom: 10px;
margin-top: 10px;
`;
But I am receiving the following error:
Uncaught Error: An error occurred. See https://github.com/styled-components/polished/blob/master/src/error/errors.md#5 for more information.
Unfortunately the above is returning a 404 Error so I can not see what it says.
I came across this stackoverflow post enter link description here which does work but it's not quite what I'm looking for, as I also use this approach elsewhere, and would not be appropriate for use in those situations. So Ideally I just want to pass in a variable after extracting theme object color.
const getMyColor = ({ object }) => object.colors.myDesiredColor;
export const containerStyles= css`
color: ${tint(0.5, getMyColor)};
padding: 17px;
margin-bottom: 10px;
margin-top: 10px;
`;
The above is ideally what I'd want. So that I can easily call it in other use cases. But I get the same error.
I know (believe) it has something to do with how i'm passing in the second argument. I know it expects a string, and I'm assuming that it is not receiving a string, but I don't know how to fix.
I have came across this post, here, but again not sure if this is what I'm looking for.
Any help would be greatly appreciated
Super late to the party on this, but your issue is getMyColor is a function and tint is expecting a string as you've stated. We don't evaluate functions passed to any of the color modules, so you must evaluate getMyColor when you pass it in. So something like this:
const getMyColor = ( object ) => object.colors.myDesiredColor;
export const containerStyles= css`
color: ${tint(0.5, getMyColor(myTheme)};
padding: 17px;
margin-bottom: 10px;
margin-top: 10px;
`
A working example
Try calling your function (getMyColor()) and see the response, if it is not a string, there is your fix.
I'm using Froala editor in AngularJS 1.6, When I add HTML from code view and try to edit from view mode, editor getting a crash.
It's working fine in my local system where I using WampServer with Window 10, When I deploy on NGINX with centos 7, It will be crash
For more details please check the video
editor version: froala_editor v2.8.1
I'm also facing with your problem, and today I had a trick to handle it.
You can refer my answer for my question on StackOverflow here
I guess you've use CSS to hide the unlicense banner of Froala, so it will be crash after model changed 11 times. This is my simple demo to detect this problem
https://stackblitz.com/edit/react-froala-editor?file=style.css.
div.fr-wrapper>div>a {
/* display: none !important; */
/* position: fixed; */
/* z-index: -99999 !important; */
font-size: 0px !important;
padding: 0px !important;
height: 0px !important;
}
In the CSS code, if we use display: none, it will be crash after 11th change. You can try if you use display: none, after you edit, it will crash after 11 times.
I found a trick how to handle this problem, I don't hide banner, but I set it is invisible by font-size: 0 and padding: 0 as my code above.
I'm using text shadows for most text site wide, but when you highlight / select the text - the text looks fuzzy. So in order to remove the text shadow I use this css from here.
::-moz-selection,
::-webkit-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
The problem is that for some reason moz-selection doesn't seem to work (anymore?) in mozilla (Firefox).
Here's the jsFiddle
It seems like the problem was due to grouping multiple css rules (for the vendor specific css) together in conjuntion with the ::selection pseudo element.
I originally thought that it was sufficient to write each statement on a separate line.
I was mistaken.
So if I replace this code:
::-moz-selection,
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
..With this code:
::-moz-selection
{
text-shadow: none;
background: #333;
color: #fff;
}
::selection {
text-shadow: none;
background: #333;
color: #fff;
}
.... bingo, it works.
FIDDLE
Support is also very good (for desktop): Caniuse
Also, if you use LESS or SASS - you could easily write a mixin to get around the repitition.
The following is documented on Mozilla Developer Network:
Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).
The ::selection pseudo-element currently isn't in any CSS module on the standard track. It should not be used in production environments.