Tree built with Twitter Bootstrap and Backbone.js? - backbone.js

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.

Related

Issue with border radius of scrollbar in textarea in React

I wanted to put some space between scrollbar and edge of textarea and have this code:
export const Textarea = styled.textarea`
font-family: Open Sans, sans-serif;
font-size: 16px;
line-height: 24px;
border-radius: 14px;
width: 600px;
height: 200px;
border-width: 0px;
border: 1px solid #DCDCDC;
padding: 14px 16px;
left:-100px;
resize: none;
box-sizing: border-box;
::-webkit-scrollbar {
width: 8px;
height: 60px;
}
::-webkit-scrollbar-thumb {
background-color: #3AA4A4;
border-radius:2px;
border-right: 4px white solid;
background-clip: padding-box;
}
::-webkit-scrollbar-track {
margin-top: 20px;
margin-bottom: 20px;
}
:focus {
outline: none;
}
:placeholder {
color: #96a2ac;
}
`;
but the problem is the space was added but border radius of scrollbar of top right and bottom right is not added and visible.

Codename one TextComponent

trying to use the TextComponent but I failed to style it as shown in the image below;
TextComponent username = new TextComponent().labelAndHint("UserNmae").constraint(TextField.ANY);
FontImage.setMaterialIcon(username.getField().getHintLabel(), FontImage.MATERIAL_PERSON);
The TextComponent doesn't allow for that particular design at the time. The round border is pretty easy:
TextField {
border: 1pt solid blue;
border-radius: 0.5mm;
padding: 2mm;
}
But the text overlay that sits on the border itself is problematic with the current API. This is probably something that can be enhanced by adding another on-top mode to the TextComponent that would use CENTER_BEHAVIOR_TOTAL_BELOW for the BorderLayout there.
However, at this time we recommend using a slightly different design e.g.:
TextComponent login = new TextComponent().
label("Login").
descriptionMessage("Enter your email").
constraint(TextArea.EMAILADDR).
action(MATERIAL_ARROW_FORWARD).
actionClick(e ->
SigninStep2Form.create().show());
The CSS is:
#Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
textComponentOnTopBool: true;
textComponentAnimBool: false;
textCmpVAlignInt: 0;
textComponentFieldUIID: TextComponentField;
}
Form {
background: white;
}
TextComponentField {
background: #EDEDED;
padding-left: 1mm;
padding-bottom: 1.5mm;
padding-top: 0.5mm;
padding-left: 3mm;
margin: 0px;
font-family: "native:MainRegular";
font-size: 3mm;
color: black;
border: none;
border-bottom: 0.25mm solid #9a9a9a;
}
InputComponentAction {
padding: 1mm;
background: transparent;
border: none;
}
FloatingHint {
font-family: "native:MainRegular";
font-size: 2mm;
color: #5e5e5e;
margin: 0px;
padding-top: 1.5mm;
padding-right: 1mm;
padding-bottom: 0px;
padding-left: 3mm;
background: #EDEDED;
border-top-left-radius: 1mm;
border-top-right-radius: 1mm;
}
TextComponent {
background: white;
border: none;
padding: 1mm;
margin: 0px;
}
ErrorLabel {
padding-top: 0.5mm;
background: transparent;
padding-left: 3mm;
}
DescriptionLabel {
padding-top: 0.5mm;
padding-left: 3mm;
background: transparent;
}
The resulting text components look like this:

CSS module `:hover .child` not working

I have the following scss:
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
padding: 3em;
.d-none {
display: inline-block !important;
}
}
&:hover .d-none {
display: inline-block !important;
}
}
On hover, I get the padding:3em but both the nested, and inline child rule didn't work, ie .d-none class wasn't overridden.
What's the right way of writing the rule with CSS module?
I'm trying out CSS module with CRA and custom-react-scripts with sass and modules turned on (REACT_APP_SASS_MODULES=true).
Or perhaps I should use styled components instead? Was trying to figure out which one to go for for react apps.
you can try this code to solve your problem
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 3em;
background: red;
&:hover {
&.d-none {
background: black;
color: #fff;
padding: 20px;
}
}
}
.d-none {
background: green;
color: #fff;
padding: 20px;
}
<div class="skillBox">
Parrent
<div class="d-none">Childred</div>
</div>
Exmaple :: https://codepen.io/anon/pen/yqQNJXCodePen
There's nothing wrong with your CSS. See the demo below.
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
.d-none{
display: none;
}
&:hover {
padding: 3em;
.d-none {
display: inline-block;
}
}
}
https://codepen.io/paulcredmond/pen/djQoow
In case if element with skillbox and d-none class are siblings below is the css for that
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
padding: 3em;
}
}
.dnone {
display: none;
}
.skillBox:hover ~ .dnone {
display: inline-block;
}
http://jsbin.com/hixamotuku/edit?html,css,output
So I realise CSS Modules created a customised classname for .d-none and applying that classname worked.
So I changed the classname altogether making it an entirely new class that overrides .d-none.
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
.dNone {
display: inline-block !important;
}
}
}
And applying by adding them as an array then joining them together:
<i className={['fas fa-times-circle d-none', styles.faTimesCircle, styles.dNone].join(' ')} onClick={this.onDelete} />

Bootstrap dropdown is hidden behind other elements - Stacking Context issue

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.

how to give margin between li using css?

]I am trying to make a breadcrumb as shown in the image below. I am able to make this thanks to some Google searching, But I have few issues:
It is not responsive. Why? when I decrease window width breadrumb also decrease as same as header which work on all resolution .In other words when we decrease width it fontsize and width according to screen resolution
There is a margin between two li as shown in image. I used the margin property, but it doesn't seem to be effective.
here is my code
http://codepen.io/anon/pen/eNPExE
/* Styles go here */
.breadcrumb_nav_div{
top:44px;
position:absolute;
width:100%;
background-color:lightgrey;
padding:0.8em 0em 0.5em 1em;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 14px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
margin-left:5px
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0px 10px 55px;
background: grey; /* fallback color */
background: grey;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid grey;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: grey; }
.breadcrumb li:nth-child(2) a:after { border-left-color: grey; }
.breadcrumb li:nth-child(3) a { background: grey; }
.breadcrumb li:nth-child(3) a:after { border-left-color: grey; }
.breadcrumb li:nth-child(4) a { background:grey; }
.breadcrumb li:nth-child(4) a:after { border-left-color: grey; }
To increase the spacing between the icons use:
.breadcrumb li a:before {
margin-left: 5px; /* Increase this number for thicker space */
}
But your question is unclear as to the responsiveness. What exactly do you want to achieve?

Resources