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?
Related
i'm trying to make a react project with styled components, and i want to use a radio button, but when i try to add css to the radio when it's checked it didn't work as i expected, can you help me?
const RadioGroup = styled.div`
border: solid 3px #332f35;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: lighten(#332f35,40%);
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked + label{
color: lighten($bg,60%);
background: #ff9000;
}
input[type=radio] + label {
border-left: solid #a1a1a1;
}
`
this is the styled component i'm trying to use in the Radio button, thanks guys!
I'm new using styled-components and I been trying to create an input using google material design standards but I haven't been able to recreate the animation that makes the label move when the input is focused.
const Input = styled.input`
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
&:focus {
outline: none;
}
`;
const Label = styled.label`
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
${Input}:focus & {
top:-20px;
font-size:14px;
color:#5264AE;
}
`;
So in resume, I want the label to move 20px up, change its font-size and color when the label is focused, I'm not really sure if my approach is the correct or it will be better just to implement a normal CSS class in this case.
You are missing the ~ sign to target the label element on input focus
const Label = styled.label`
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
${Input}:focus ~ & {
top:-18px;
font-size:14px;
color:#5264AE;
}
`;
Working demo
Boostrap dropdown is hidden inside other elements. When I try to click on pencil icon it shows dropdown but some other elements are overriding it. I made position of dropdown relative but it increases site of Div tag. attaching screenshot.
new
Christeen
Last modified 4-5-2016 at 23:16
Share
Edit
Delete
CSS
.listing-body ul.listbody {
margin: 0;
padding: 0;
display: block;
list-style: none;
}
.listing-body ul.listbody li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 100%;
background: #FFF;
border: 1px solid #dadada;
border-top: none;
}
.listing-body .fourthli {
width: 25%;
float: left;
margin: 0;
padding: 0 1%;
color: #000;
font-family: 'robotoregular';
font-size: 12px;
line-height: 45px;
color: #333;
text-align: left;
box-sizing: border-box;
overflow: hidden;
max-width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}
The overflow:hidden in the .listing-body .fouthli was cropping off the dropdown menu. Removing it fixed it.
This is my question ..
How can keep ng-grid column width?
When I click a row on the first grid, the columns in the other grid appear "closed" even though they have the same style.
And they only "open" when I click on the column headers of the second grid.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 100% !important;
height: 250px;
text-align: left;
font-family: "Arial";
font-size: 13px;}
I show you an example to better understand.
http://plnkr.co/edit/Lbmw2X5IurRhebPrDCwY?p=preview
I changed the width=100% in the gridStyle css to width=430px and that worked.
http://plnkr.co/edit/JNEjasHdL7VhQtF3ggEO?p=preview
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 430px;
height: 250px;
text-align: left;
font-family: "Arial";
font-size: 13px;
}
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.