I am using CSS module along with react. I want to change the border-radius dynamically from react. In the box.css , i set the border-radius as radiusValue. My goal is to modify the value of radiusValue from a react component. Is that possible? I couldn't find any solution related to updating the #value variable.
Thank you
inside box.css:
#value radiusValue:0px
.box{
height: 200px;
width: 300px;
border: 10px solid #595252;
border-radius: radiusValue;
padding: 100px;
margin: 50px;
}
You can not do that with CSS pre-processors, because they generate static files that can not be changed on the fly,
but you can do this with pure CSS - specifically with CSS Custom properties.
CSS file:
:root {
--radius-value: 0px;
}
.box {
height: 200px;
width: 300px;
border: 10px solid #595252;
border-radius: var(--radius-value);
padding: 100px;
margin: 50px;
}
JS file
element.addEventListener("click", () => {
root.style.setProperty("--radius-value", "20px")
})
Related
I have a StackBlitz here https://stackblitz.com/edit/react-ts-jefhjh?file=App.tsx,styled.ts
It's a simple react app with Typescript
I have a style component that uses flex-box to position two columbns next to each other.
I'm passing the widths of the columns into the wrapping container like <FlexContainer width={['60%', '40%']}>
And then using the values in the component like
export const FlexContainer = styled.div<IProps>`
border: 1px solid red;
height: 500px;
display: flex:
// align-content: stretch;
.divOne{
border: 2px solid pink;
height: 500px;
width: ${(p) => p.width[0]};
}
.divTwo{
border: 2px solid green;
height: 500px;
width: ${(p) => p.width[1]};
}
`;
Only one the second column is being displayed.
I know the first column is getting a value because if I use align-content: stretch the first column displays but the layout is wrong.
I'm sure the mistake the way I'm using flex-box
How can I get the layout to work ?
There was a colon instead of a semicolon. Use display: flex; instead of display:flex:. See https://stackblitz.com/edit/react-ts-quu5ce?file=App.tsx,styled.ts
import styled from 'styled-components';
interface IProps {
width?: string[];
}
export const FlexContainer = styled.div<IProps>`
border: 1px solid red;
height: 500px;
display: flex;
.divOne{
border: 2px solid pink;
height: 500px;
width: ${(p) => p.width[0]};
}
.divTwo{
border: 2px solid green;
height: 500px;
width: ${(p) => p.width[1]};
}
`;
I am fairly new to CSS and I can't seem to figure out why my editors are responding the way they are to float: left. I am trying to get the below editors next to each other horizontally:
With the following CSS:
.form-container {
margin: 0 auto;
max-width: 95%;
background: white;
border-radius: 10px;
display: flex;
height: 50hv;
flex-direction: column;
border: 1px solid #ddd;
}
.left-editor, .right-editor {
margin: 10px;
}
Once I add float: left to .left-editor, .right-editor the editor disappears and looks like this:
Any idea as to why?
I inspected the code in the browser inspect. I know which specific property needs to be changed but I thing I need to point its key to a different class name.
I would like to change the overflow property to hidden and i would mike to remove the border and border-radius.
.dzu-dropzone {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 120px;
overflow: scroll;
margin: 0 auto;
position: relative;
box-sizing: border-box;
transition: all .15s linear;
border: 2px solid #d9d9d9;
border-radius: 4px;
}
If it is not already created, create index.scss file in your project repo.
there , add the code like this:
.dzu-dropzone {
overflow: hidden;
}
This will override the css while rendering. You can do the same for the border properties too.
Youc can create two CSS files, a basic.css file with some minimal styling, and a more extensive dropzone.css. I added both and the style of my component was overriden.
Is it possible to define primary and hover images for an <input type="image"> element in CSS in JS? I'm trying to implement a different image on hover, but can't get the syntax correct.
margin: 40,
background: "url(/btn_google_signin_light_normal_web.png)",
"&:hover": {
background: "url(/btn_google_signin_light_focus_web.png)"
}
}
You can try
IN your CSS
.yourClass {
width: 200px;
height: 200px;
background: url("images/iamge1.jpg") no-repeat;
display: inline-block;
}
.yourClass:hover {
background: url("images/image2.jpg") no-repeat;
}
Is there a simple modular tree built with Twitter Bootstrap and Backbone.js that provides common tree control functionality?
Here's a Bootstrap tree widget (from "Trees in Twitter Bootstrap"):
Building on Vitaliy's CSS and Mehmet's jQuery, I changed the a tags to span tags and incorporated some Glyphicons and badging into my take on a Bootstrap tree widget.
Example:
For extra credit, I've created a GitHub project to host the jQuery and LESS code that goes into adding this tree component to Bootstrap. Please see the project documentation at http://jhfrench.github.io/bootstrap-tree/docs/example.html.
Alternately, here is the LESS source to generate that CSS (the JS can be picked up from the jsFiddle):
#import "../../../external/bootstrap/less/bootstrap.less"; /* substitute your path to the bootstrap.less file */
#import "../../../external/bootstrap/less/responsive.less"; /* optional; substitute your path to the responsive.less file */
/* collapsable tree */
.tree {
.border-radius(#baseBorderRadius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
background-color: lighten(#grayLighter, 5%);
border: 1px solid #grayLight;
margin-bottom: 10px;
max-height: 300px;
min-height: 20px;
overflow-y: auto;
padding: 19px;
a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 90%;
}
li {
list-style-type: none;
margin: 0px 0;
padding: 4px 0px 0px 2px;
position: relative;
&::before, &::after {
content: '';
left: -20px;
position: absolute;
right: auto;
}
&::before {
border-left: 1px solid #grayLight;
bottom: 50px;
height: 100%;
top: 0;
width: 1px;
}
&::after {
border-top: 1px solid #grayLight;
height: 20px;
top: 13px;
width: 23px;
}
span {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #grayLight;
border-radius: 5px;
display: inline-block;
line-height: 14px;
padding: 2px 4px;
text-decoration: none;
}
&.parent_li > span {
cursor: pointer;
/*Time for some hover effects*/
&:hover, &:hover+ul li span {
background: #grayLighter;
border: 1px solid #gray;
color: #000;
}
}
/*Remove connectors after last child*/
&:last-child::before {
height: 30px;
}
}
/*Remove connectors before root*/
> ul > li::before, > ul > li::after {
border: 0;
}
}
I recently published my backbone.js tree widget.Check it out at https://bitbucket.org/dnation/bbtree/ and see if it meets your needs.