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;
}
Related
I am trying to use tagged template literals along with styled components in VS code, like so:
const Component = styled.div`
margin: 0.5rem 0;
& label {
font-weight: bold;
display: block;
margin-bottom: 0.5rem;
`
VS code displays everything inside the tag as a string (so all the code inside is one color). I see lots of tutorials online that render the content inside the tags like normal code (where you have different colors for the various elements) but I cannot figure out how to do that. Can someone help?
It looks like you are looking for - vscode-styled-components
I apologize if this question is super simple. I have been trying to use a third party website builder for a client for ease of access/editing later on but he really wants a responsive site that resizes and centers itself no matter what browser/resolution it's displayed on. I am pretty sure I will need to just start from scratch and build him something completely customized. I'm struggling to even know where to start with this as coding responsive sites is still new to me. Any help or guides that someone could point me to would be greatly appreciated.
#page {
margin-left:auto;
margin-right:auto;
width:960px;
}
#stage {
margin: 1em auto;
width: 360px;
height: 540px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 0px;
border: 0px solid #ccc;
background: #fff;
}
Do you want the body to be always centered so it doesn't have layout problems on different devices or do you want every element to be center aligned?
I think it's the first one.
You could use width:95vw; on the body element and margin:auto;.
You could work with media queries.
It's also important to add the viewport meta tag in the head.
Let me know if I understood the question
I have a problem with one page on my gatsby site.
If I go to that page from any other then it renders fine. But if I follow a link directly to it, or refresh the page once loaded then it does not render correctly. All of the other pages render fine. The one thing different about this is the use of flex display layout.
Looking at the page structure, it's rendered differently. HTML looks pretty much the same, but the classes and class attributes set by gatsy are different.
This is the page in question: https://www.hazardousfrog.com/contact-us/
If someone could take a quick look and let me know if this is a gatsby issue or something I have done wrong, I'd very much appreciate it.
After looking at it I believe it may be an error on your end. I look at both pages in separate tabs, one rendered correctly and one not. With the developer tools I inspected the form components and saw that they were loading completely different styles. I wouldn't be able to tell you exactly what is causing this, but if I had to guess it could be that you have styles or classes that are overriding one another.
//the form style when it is NOT rendered correctly
.jss9 {
margin: 0;
border: 0;
display: inline-flex;
padding: 0;
position: relative;
min-width: 0;
flex-direction: column;
vertical-align: top;
}
//form styles when it IS rendered correctly
.jss357 {
display: flex;
flex-wrap: wrap;
}
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.