I am using jstree plugin to populate my tree based on xml file. Some nodes text are greater than the container div. Is there any way to text wrap jstree node texts?
$(document).ready(function(){
$("#tree").jstree({
"xml_data" : {
"ajax" : {
"url" : "jstree.xml"
},
"xsl" : "nest"
},
"themes" : {
"theme" : "classic",
"dots" : true,
"icons" : true
},
"search" : {
"case_insensitive" : true,
"ajax" : {
"url" : "jstree.xml"
}
},
"plugins" : ["themes", "xml_data", "ui","types", "search"]
}).bind("select_node.jstree", function (event, data) {
$("#tree").jstree("toggle_node", data.rslt.obj);
This worked for 3.0.8
.jstree-anchor {
/*enable wrapping*/
white-space : normal !important;
/*ensure lower nodes move down*/
height : auto !important;
/*offset icon width*/
padding-right : 24px;
}
And for those using the wholerow plugin;
//make sure the highlight is the same height as the node text
$('#tree').bind('hover_node.jstree', function() {
var bar = $(this).find('.jstree-wholerow-hovered');
bar.css('height',
bar.parent().children('a.jstree-anchor').height() + 'px');
});
For 3.1.1, and for it to also work with select_node.jstree use this function instead:
function(e, data) {
var element = $('#' + data.node.id);
element
.children('.jstree-wholerow')
.css('height', element.children('a').height() + 'px')
;
}
Try adding the following style to the child anchors of your jsTree div:
#jstree_div_id a {
white-space: normal !important;
height: auto;
padding: 1px 2px;
}
I also have a max-width on my jsTree div styling:
#jstree_div_id
{
max-width: 200px;
}
#tree_id {
.jstree-anchor {
white-space: normal;
height: auto;
}
.jstree-default .jstree-anchor {
height: auto;
}
}
Putting together answers from Hashbrown and TwiceB to get it to work with the wholerow plugin and preselected data.
Enable text wrapping
.jstree-anchor {
/*enable wrapping*/
white-space : normal !important;
/*ensure lower nodes move down*/
height : auto !important;
/*offset icon width*/
padding-right : 24px;
}
Enable highlighting of wrapped text on hover and select
$('#tree').bind('open_node.jstree', function () {
let bar = $(this).find('.jstree-wholerow-clicked');
bar.css('height',
bar.parent().children('a.jstree-anchor').height() + 'px');
});
$('#tree').bind('hover_node.jstree', function () {
var bar = $(this).find('.jstree-wholerow-hovered');
bar.css('height',
bar.parent().children('a.jstree-anchor').height() + 'px');
});
I found the answer by coincedence and it worked for me ,but , i had another css rule that was preventing the code from functioning well
I removed the css rule (min-height:200px) "in my code" and the following answer worked for me as i expected.
#tree_div_id a {
white-space: normal;
height: auto;
padding: 0.5ex 1ex;
margint-top:1ex;
}
This issue is resolved below.
https://www.npmjs.com/package/treeview-sample
According to this sample, the folder DOM will be output with the following contents.
<a class="jstree-anchor jstree-anchor-formatted" href="#" tabindex="-1" role="treeitem" aria-selected="false" aria-level="3" id="grandchild2_anchor" title="Human">
<i class="jstree-icon jstree-themeicon" role="presentation"></i>
<span class="jstree-anchor-text">Human</span>
</a>
Related
As the title, it's possible to to apply a default color to all text of a TextFlow component?
TextFlow textFlow = new TextFlow();
textFlow.setId("supertextflow");
// Somewhere else in the code
textFlow.getChildren()
.add(new Text("Dynamic added text! OMG!"));
I tryed different solution but none of them works
#supertextflow {
-fx-text-fill: red;
}
#supertextflow * .text{
-fx-fill: red;
}
#supertextflow > * > .text {
-fx-fill: red;
}
I know that Text is another component, but why i can't style it from it's parent?
Well you can't do that with Text cause it's style class doesn't have fill css rule if you look at the JavaFX CSS Reference Guide. So I would suggest to leave the Text and use Label instead. If you do then you could use the css rule below :
#supertextflow > .label {
-fx-text-fill: blue;
-fx-font-size : 20px;
}
In case you want to keep using Text you will have to set each element (Text) inside the FlowPane a specific id (ex. #customText) and then use it to set the CSS rule like below :
#supertextflow > #customText {
-fx-fill: red;
-fx-font-size : 20px;
}
Edit : As James_D mentioned on the commends below you should use Type Selector (I am guessing that's the correct term) on the CSS rule in order to style all the Text nodes inside your TextFlow without needed to set any ids on them :
#supertextflow > Text {
-fx-fill: red;
-fx-font-size : 20px;
}
I'm using the :valid and :invalid pseudo-classes, so the users can see if the input is correct in each form. I'm able to style them with CSS, but I have yet to find a solution where I can use an iconfont on the right side of the form, to display a valid or invalid input. Anyone knows how to do this?
Also some forms should not display valid or invalid before the user starts to type (like signup email). Can I bypass that code/css and just activate it when the user starts to type in the form?
You could realize what you want like this:
jsfiddle
input {
border: #666 1px solid;
padding: 0.5em;
}
label {
display: block;
margin-top: 8px;
}
input + i:before {
display: none;
}
input:focus + i:before {
display: block;
}
input:focus:invalid {
background: red;
}
input:focus:valid {
background: lightgreen;
}
input:focus:valid + i:before {
content: "\f14a";
}
I've used the fontawesome iconfont here.
EDIT
To make the icons inside the form elements you can add this rule:
input + i {
position: relative;
left: -20px;
}
I'm having problems with IE9 ignoring the select borders when printing a multiple select.
Here's how to recreate the problem:
Open IE9 on Windows 7.
Go to w3schools's multiple select edit page.
Now highlight the options and copy/paste until there is a long list of duplicates.
Then remove the size attribute.
Click on "Edit and Click Me" so that the page reloads and you now have your modified select in the second panel.
Now, print the document (even using the XPS viewer).
For me, all of the options are printed on the page, even though the select is only 4 option elements tall. This still happens to some degree if you leave the "size" attribute at the default value of 2, but it's far more obvious when it is changed or removed.
Is anyone else experiencing this? Is this an IE bug? Does anyone know of a workaround?
You can work around this by viewing the site in IE9's compatibility mode. Usually IE will determine that it cannot display a site properly and give you the option to turn on compatibility mode from within the address bar but sometimes you need to explicitly set it.
How to turn on compatibility mode - http://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html - I used the first one in method 2.
There doesn't seem to be any CSS solution for this. Instead, I wrote a small jQuery script that copies the <select multiple> contents into a <div>, so that it can be printed. Then I applied some CSS to make it look like a select, and only show the copy when actually printing.
Script:
//jQuery required
$(function() {
if(!$.browser.msie) return false;
$('select[multiple]').each(function() {
$lPrintableDiv = $('<div data-for="' + this.id + '" />').addClass($(this).attr('class')).addClass('printable');
//update printable on changes
$(this).after($lPrintableDiv).change(function($aEvent){
updatePrintable($aEvent.target);
});
//run once on load
updatePrintable(this);
});
});
function updatePrintable($aTarget) {
var $lSelect = $($aTarget);
var $lSelected = $($aTarget).val();
var $lPrintable = $('[data-for="'+$aTarget.id+'"]');
$($lPrintable).width($lSelect.width()).height($lSelect.height());
$($lPrintable).html('');
$($aTarget).children().each(function($lElm){
$lVal = $(this).val();
$lLabel = $('<label />').text($lVal);
$lOption = $('<input type="checkbox" />').val($lVal);
if($(this).is(':selected'))
$lOption.prop('checked', true);
$lPrintable.append($lOption).append($lLabel);
});
}
CSS:
.printable {
border: 1px solid grey;
display: none;
overflow: auto;
}
.printable label {
display: block;
font: .8em sans-serif;
overflow: hidden;
white-space: nowrap;
}
.printable [type="checkbox"] {
display: none;
}
.printable [type="checkbox"]:checked + label {
background: #3399ff;
color: white;
}
#media print {
select[multiple] { display: none; }
.printable { display: inline-block; }
.printable [type="checkbox"]:checked + label { background: grey; }
}
Also see the jsFiddle and original post about this fix
I have a div with class="centerMessage" . This div is inserted into the DOM at a point after the page is loaded. I would like to change the CSS on this div to center it. I tried the CSS function below, but it did not work. Does anybody know a way to do this?
function centerPopup() {
var winWidth = $(window).width();
var winHeight = $(window).height();
var positionLeft = (winWidth/2) - (($('.centerMessage').width())/2);
var positionTop = (winHeight/2) - (($('.centerMessage').height())/2);
$('.centerMessage').live( function(){
$(this).css("position","absolute");
$(this).css("top",positionTop + "px");
$(this).css("left",positionLeft + "px");
});
}
If my assumption of what you're trying to achieve is correct, you don't need any Javascript to do this. It can be achieved by some simple CSS.
.centerMessage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px; /* half of the height */
margin-left: -300px; /* half of the width */
width: 600px;
height: 300px;
background: #ccc;
}
Demo: http://jsbin.com/awuja4
.live() does not accept JUST a function. If you want something to happen with live, it needs an event as well, like click. If you want something to happen always for every .centerMessage, you will need the plugin .livequery()
I believe that the following works in FF & Webkit.
div.centerMessage{
position: absolute;
width: /* width */;
height: /* height */;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
I know this is already answered, but I thought I'd provide a working jsFiddle demo using JavaScript like the OP originally wanted, but instead of using live(), I use setInterval():
First, we need to declare a couple variables for use later:
var $centerMessage,
intervalId;
The OP's issue was that they didn't know when the div was going to be created, so with that in mind we create a function to do just that and call it via setTimeout() to simulate this div creation:
function createDiv() {
$('<div class="centerMessage">Center Message Div</div>').appendTo("body");
}
$(function() { setTimeout("createDiv()", 5000); });
Finally, we need to create a function that will check, using setInterval() at a rate of 100ms, to see if the div has been created and upon creation, goes about modifying the div via jQuery:
function checkForDiv() {
$centerMessage = $('.centerMessage');
if ($centerMessage.length) {
clearInterval(intervalId);
var $window = $(window),
winHeight = $window.height(),
winWidth = $window.width(),
positionTop = (winHeight / 2) - ($centerMessage.height() / 2),
positionLeft = (winWidth / 2) - ($centerMessage.width() / 2);
$centerMessage.css({
"display" : "block",
"position" : "absolute",
"top" : positionTop.toString() + "px",
"left" : positionLeft.toString() + "px"
});
}
}
$(function() { intervalId = setInterval(checkForDiv, 100); });
Try Use this
$('.centerMessage').live('click', function(){
Try this
$('#foo').on('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
OR
$('#foo').live('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
I'm using the jQuery UI Autocomplete plugin (version 1.8), and I'd like to customize the way the suggestions show up. Specifically, I want to display not only some text, but an icon as well. However, when I send the <img> tag, it just gets rendered as plain text in the results list.
Is there some way to change this behavior? Alternatively, can you suggest a different way to include images in the returned results and have them show up in the suggestions?
Taken from here
$("#search_input").autocomplete({source: "/search",
minLength: 3,
select: function (event, ui) {
document.location = ui.item.url;
}
})
.data("autocomplete")._renderItem = function (ul, item) {
//As per recent documemtation above line should be
//.autocomplete( "instance" )._renderItem = function (ul, item) {
return $('<li class="ui-menu-item-with-icon"></li>')
.data("item.autocomplete", item)
.append('<a><span class="' + item.type + '-item-icon"></span>' + item.label + '</a>')
.appendTo(ul);
};
And the CSS:
.ui-menu .ui-menu-item-with-icon a {
padding-left: 20px;
}
span.group-item-icon,
span.file-item-icon {
display: inline-block;
height: 16px;
width: 16px;
margin-left: -16px;
}
span.group-item-icon {
background: url("/image/icons/group.png") no-repeat left 4px;
}
span.product-item-icon {
background: url("/image/icons/product.png") no-repeat left 7px;
}