I am trying to validate a css file at w3c css validator. When it is tested it returns an error stating that "Property flex-wrap- doesn't exist : wrap". This is my part that css validator sees wrong.
.row {
width: 100%;
display: flex;
flex-wrap-: wrap;
}
Any suggestion how to solve this problem?
Thanks
flex-wrap- indeed doesn't exist...but flex-wrap exists. See documentation on Mozilla Developer Network
Replace your CSS with the following :
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}
Related
I'm trying to style my react frontend for a project, and want the Form and Display components to be next to each other in a flex container. It works when I do an inline style as below, but has no effect when I use the App.css file. Could somebody explain this to me? Here is the project: https://github.com/GeorgeCGarman/tip-calculator-react
<div className="container" style={{ display: "flex" }}>
<Form />
<Display />
</div>
Your CSS syntax in App.css is incorrect, but you're on the right track.
Instead of:
.selectTip {
display: "flex";
flex-direction: "column";
}
.container {
display: "flex";
}
.Form {
display: "flex";
}
You need to remove the quote marks:
.selectTip {
display: flex;
flex-direction: column;
}
.container {
display: flex;
}
.Form {
display: flex;
}
CSS uses keywords, meaning they do not require quotes, but in React, it must be given as a string (or for things like padding, it may be given as a number)
CSS can be a minefield, so make sure you check out some kind of tutorial
So I'm building a website in Wordpress and I want the header to be full screen but I'm getting problems with responsiveness so I wanted to make it so the code I use only applies to desktop PC's and Tablets; however I keep getting these expected brace & unexpected token errors. Does anybody know how to solve this? Maybe there is a better way to fix my issue, if so please let me know.. This is the code I'm talking about:
#media only screen and (min-width:768px){
min-height: 100vh;
display: flex;
flex-direction: column;
}
You have to select an element to style and you haven't done that.
Something like
#media only screen and (min-width:768px){
header {
min-height: 100vh;
display: flex;
flex-direction: column;
}
}
Is there a short hand method in CSS to combine
display:flex;
flex-direction: row / column?
into one line instead of two?
I know flex-flow, does flex-direction and flex wrap.
I don't know if you are versed in Sass, however if you are, this is a quick way on how to make your idea work, you could also polish this further whith #if statements and #error directives, but here's the quick and easy way:
Here's a Codepen to demonstrate.
The mixin:
#mixin fd($flex, $direction) {
display: $flex;
flex-direction: $direction;
}
This is how you include it:
#include fd([display], [direction]);
.flex-1 {
#include fd(flex, row);
// whatever goes next
}
.flex-2 {
#include fd(inline-flex, column);
// whatever goes next
}
This is what it compiles to:
.flex-1 {
display: flex;
flex-direction: row;
}
.flex-2 {
display: inline-flex;
flex-direction: column;
}
I am using Wolox's chat widget
https://github.com/Wolox/react-chat-widget
And I am trying to make a horizontal row of multiple chat widgets along the bottom of the screen. I am trying to override the class .rcw-widget-container
.rcw-widget-container {
bottom: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
margin: 0 20px 20px 0;
max-width: 370px;
position: fixed;
right: 0;
z-index: 1;
}
I have two chat Widget's that I want to put side by side, but I want to do it inline with React. Because my number of widgets will grow depending on how many user chats I open. So the right positioning needs to be dynamic. I just don't know how to accomplish this. Or if it's possible
https://codesandbox.io/s/vvnjyr9r30
EDIT
Something like this may work, but I don't think I am getting the syntax right.
.chat1 .rcw-widget-container {
right: 350px;
}
.chat2 .rcw-widget-container {
right: 400px;
}
Component
<Widget className="chat1" handleNewUserMessage={(e) => this.handleNewUserMessage(e, new Date().getTime())} />
<Widget className="chat2" handleNewUserMessage={(e) => this.handleNewUserMessage(e, new Date().getTime())} />
as I can understand probably you are looking for something like this:
In this case you can try:
.App {
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: row;
}
.rcw-widget-container {
border: 2px red solid;
position: initial;
}
Also, try to reorder the imports in index.js to override the styles.
import "react-chat-widget/lib/styles.css";
import "./styles.css";
While not inherently possible in CSS modules alone, the author of the react-toolbox library has actually solved this particular problem very nicely
Read their github docs which are more in depth on the subject at https://github.com/react-toolbox/react-toolbox#customizing-components
A list of the themeable classes for a particular component is given on the component demo page on their site too
I'm using grunt-uncss to cleanup my css selectors in a bootstrap / angularjs project I'm working on. I'm using the urls option because I need uncss to parse css at runtime since it's an angular app. I'm also using the files option because I can't get uncss to work without it. This is causing some duplicates in my css. Here's my configuration:
uncss: {
dist: {
options: {
urls: ['http://127.0.0.1:8282/build/index.html#/dashboard',
'http://127.0.0.1:8282/build/index.html#/servicedesk',
'http://127.0.0.1:8282/build/index.html#/email',
'http://127.0.0.1:8282/build/index.html#/calendar',
'http://127.0.0.1:8282/build/index.html#/customers']
},
files: {
'build/css/raw/tidy.css': ['build/index.html']
}
}
}
index.html has two css files, site.css which contains all my application specific selectors and classes, and bootstrap.css
When uncss runs it duplicate many selectors. For example, in site.css there is exactly one
servicedesk {
display: flex;
width: 100%;
height: 100%;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
flex: 1;
margin: auto;
padding: 1em;
}
after it runs there are 2. I'm not sure why this happens, but I think it is because it processes twice, once at runtime and once using static files. Not sure how to fix that
Found open issue and work around here after much searching: https://github.com/addyosmani/grunt-uncss/issues/66