I'm using jstree to create a multi-level tree, and I want to be able to set a larger line-height than you usually see, so that I can have some large headings. (If I set the font larger, the lines simply overlap.)
I've tried setting the line-height CSS property on the li and a elements, but neither have an effect; jstree seems to be programmatically overriding those values. (I even tried using jQuery to re-set those values after the tree is created, but that didn't help.)
To make things more complicated I would like to have different levels have different spacing, so that the top levels can be larger than the deeper levels.
I've tried the theme plugin but I can't find anything to control line height.
Thanks...
FWIW, this worked nicely for me. It won't give you super-large heading-size, but it increases the size perfectly for my liking.
Setup my tree with variant: large
//jstree config
$("#tree").jstree({
"core" : {
"themes" : {
"variant" : "large"
}
}
// ...
});
and then also change the font-size for all nodes:
/* CSS */
.jstree-node {
font-size: 13pt;
}
Does it help to increase the height of the element?
.jstree-leaf {
font-size: 37px;
height: 50px;
}
.jstree-leaf a.jstree-hovered {
height: 50px;
}
.jstree-leaf a.jstree-clicked {
height: 50px;
}
On its own, MMeah's solution did not work for me. Combining this with the code here and changing the height to auto worked for me. See full answer here.
.jstree-default a {
white-space:normal !important; height: auto;
}
.jstree-anchor {
height: auto !important;
}
.jstree-default li > ins {
vertical-align:top;
}
.jstree-leaf {
height: auto;
}
.jstree-leaf a{
height: auto !important;
}
Related
I tried to use the maxlength attribute of an input element as a CSS width, but it does not seem to work:
input[maxlength] {
width: attr(maxlength em);
}
According to Mozilla I thought this might be the intended use case. Yes I saw the note. Is there any other way to get it working?
This works, but scales too much.
input[maxlength="2"] {
width: 2em;
}
input[maxlength="3"] {
width: 3em;
}
I am using ui-grid. I have a lot of rows and that is why I use scrolling. Everything works perfectly ok until I try to change the height of the rows. Then the scrolling becomes a mess. I have added an example here http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview
This is one of the tutorials from the ui-grid website - the only thing I have changed is the CSS. I have added these rules.
.ui-grid-cell-contents {
padding: 1px 1px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
.grid .ui-grid-row,
.grid .ui-grid-cell,
.grid .ui-grid-cell .ui-grid-vertical-bar {
height: 22px !important;
font-size: 12px;
line-height: 20px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
ui-grid-header-cell {
height: 55px !important;
}
.ui-grid-filter-container {
padding: 1px 3px;
}
Scrolling works perfectly ok if the above CSS rules are removed.
So I either need to add more CSS rules or I need to use some API of the grid in order to set row height properly.
Any help will be much appreciated.
How do I change row height and keep scrolling smooth?
UPDATE:
Here is a comparison between a default grid and one with modified CSS:
http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview
try to scroll the rows up and down for each grid. The difference should be pretty obvious.
Take out the:
height: 22px !important;
from the css and add:
rowHeight:22
to the gridOptions.
I have the feeling that this is much smoother.
Forked Plunker
scope.gridOptions = {
rowHeight: 33
}
The best way of changing the row height is from the grid options.
Try add this to your css:
.ui-grid-viewport .ui-grid-cell-contents {
word-wrap: break-word;
white-space: normal !important;
}
.ui-grid-row, .ui-grid-cell {
height: auto !important;
}
.ui-grid-row div[role=row] {
display: flex ;
align-content: stretch;
}
Just alter grid class accordingly.
.grid{
height: 70vh;
}
When using the jsTree plugin, I need to have a node which displays its full content. Right now, the nodes only display approximately one line of text each. How can I get the nodes in a jsTree to display all of the text in the node without truncating the node's content?
The following CSS code will do the trick:
.jstree-default a {
white-space:normal !important; height: auto;
}
.jstree-anchor {
height: auto !important;
}
.jstree-default li > ins {
vertical-align:top;
}
.jstree-leaf {
height: auto;
}
.jstree-leaf a{
height: auto !important;
}
This is a modification of the solutions here (height changed to auto) and here, neither of which worked for me on their own.
I have the following code to style custom scrollbars, but when the scrollbar is not needed because the content is not very long, I would like to hide the scrollbar. Is this possible?
Here's the code I have so far...
.myscroll::-webkit-scrollbar {
width: 15px;
}
.myscroll::-webkit-scrollbar-track {
border-radius: 3px;
background-color:#D4D4D4;
}
.myscroll::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color:#0085bf ;
}
Assuming that the element is having class myscroll, you can try following css
.myscroll{
overflow:auto;
}
It might solve your issue.
i'm building a custom theme for wordpress and saw this in the default 2010 style.css file:
#wrapper {
margin: 0 auto;
width: 940px;
}
#wrapper {
background: pink;
margin-top: 20px;
padding: 0 20px;
}
now this is the default code (except the pink). when i try and collapse it, which seems logical, it makes quite a difference.
what i can't figure out is WHY you'd declare the same element twice like that? i've never seen that before...
WR!
It proves useful when you want to apply shared properties at multiple elements. Another useful application is adding stylesheets from multiple sources Example:
#head, #foot {
height: 100px;
}
#foot { /*Another foot*/
color: red;
}
Second example: CSS from multiple sources:
/* External stylesheet: common.css */
body {
background: yellow;
}
/* Inline stylesheet, overrides external stylehseet */
body {
background: pink;
}
When two properties have the same specificity, the lastly declared property will be applied.
It just overrides previously declared properties.
wrapper will now have margin:20px auto 0 auto (Top Right Bottom Left).