My task description is very long and when I'm exporting to .pdf the text is hide (I cannot make task column too much wide): how can I divide text into 2 or 3 lines inside the grid? Is it possible to force the text to new line?
you can use DHX Gantt templates for grid columns https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#settingthetemplateofdatapresentation
Then set and define a new class to the task text element. Something like this
gantt.config.columns = [
{name:"wbs", label:"WBS", width:40, template:gantt.getWBSCode },
{name:"text", label:"Task name", tree:true, width:170, template: function(task) {return "<div class='gantt_multiline'>" + task.text + "</div>"} },
{name:"start_date", align: "center", width: 90},
{name:"duration", align: "center" , width: 60},
{name:"add", width:40}
];
Then define CSS for this class
<style type="text/css">
.gantt_multiline {
white-space: normal;
background-color: #FFE0F9;
line-height: 110% !important;
font-size:8pt !important;
}
I've put the BG color just to indicate the area we are working with.
Then. When exporting to PDF, you just need to send this CSS definition into the header
https://docs.dhtmlx.com/gantt/desktop__export.html#customstylefortheoutputfile
gantt.exportToPDF({
name: "My Page.pdf",
header: "<div><style type='text/css'>.gantt_multiline{white-space:normal;background-color:#FFF0F9;line-height:110% !important;font-size:8pt !important;}</style></div>"
});
Also it's possible to set row height at DHX Gantt, for example
gantt.config.row_height = 40;
Here I found the live example of multiline at task's bars https://docs.dhtmlx.com/gantt/snippet/213a0e27
Note that at this example the class is being applied only for large task names
Best regards!
Related
I have this less code, this is working just fine. I just want to save some spaces when the less cli compiles it.
.secondary-content {
background: #ffcc80;
color: white !important;
label, i {
background: #ffcc80;
color: white !important;
}
}
When I run less from the command prompt, the output looks like this.
.secondary-content {
background: #ffcc80;
color: white !important;
}
.secondary-content label,
.secondary-content i {
background: #ffcc80;
color: white !important;
}
as you can see they are separated on each block. I would like to have them on the same block. How could I easily merge the parent and child style properties? Like this.
.secondary-content,
.secondary-content label,
.secondary-content i {
background: #ffcc80;
color: white !important;
}
I'm still learning less, so any help would be much greatly appreciated.
Thanks in advance
You can make use of the parent selector (&) like in the below snippet. Usage of parent selector would mean that the same rules apply for .ghost .secondary-content selector as well as its child label and i tags.
.ghost .secondary-content {
&, label, i {
background: #ffcc80;
color: white !important;
}
}
Of course the solution provide by #Harry works. When you are learning Less you should keep in mind that Less helps you to write your CSS code DRY and more efficient. Less does not help you to solve issues, that you can not solve in common CSS, Less compiles into CSS and does not add any feature to the compiled CSS.
To reduce the size of your CSS for selectors which share some properties you should consider the extend feature of Less: http://lesscss.org/features/#extend-feature-reducing-css-size:
.selector1 {
color: red;
}
.selector2:extend(.selector1) {}
outputs:
.selector1,
.selector2 {
color: red;
}
To solve your issue you should reconsider the desired CSS code instead of the Less code. You can not use extend due to the nesting of the label, i, but why should you nest them to set the color and background-color?
The default value for the background-color is transparent so when you set the background-color for the parent you do not have set the background-color for the child elements (when using the same value).
Possible you override the default transparent with an other style rule with a higher specificity, see also http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
An example which gives your nested label the wrong background-color:
label {
background-color:green;
}
.secondary-content {
background-color:red;
color: white;
}
The same for the color property which always inherit from its parent, unless applied in an anchor.
You are also using !important, see: https://css-tricks.com/when-using-important-is-the-right-choice/
I've got an inline-block element that contains a very long word. When I resize the viewport until I reach the breakpoint of the text wrapping to the next line, I get a substantial amount of space. However, I would like the inline-block element to wrap immediately to the width of its contents.
I found it hard to explain exactly what's going on, so below an animated gif to illustrate my issue:
Upon resizing the viewport:
To be clear, the image above is me continuously resizing the viewport.
Does anybody know a way to achieve what I'd like? Even with CSS hyphenation the white-space still remains (which I don't want).
JSFiddle. Resize the frames to see what I mean.
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
The inline-block indeed extends on resizing as your animation shows, so that it keeps place for the long word to go into that space again.
One simple solution would be to add text-align: justify, but I'm afraid it may not exactly be what you want (see demo).
Another one would be the use of media queries, as #Parody suggested, but you would have to know the dimentions of the containing div, and that would not be very scalable as you mentionned.
The word-break: break-all suggested by #yugi also works but causes the words to to collapse letter by letter, regardless of their length.
The only way to achieve the exact behavior is (as far as I know) to use javascript. For example, you would have to wrap your text into a span element inside the div, and then add something like this :
var paddingLeft = parseInt($('#foo').css('padding-left')),
paddingRight = parseInt($('#foo').css('padding-left')),
paddingTop = parseInt($('#foo').css('padding-top')),
paddingBottom = parseInt($('#foo').css('padding-Bottom')),
cloned = $('#foo span').clone(),
cloned_wrap = document.createElement('div');
$(cloned_wrap).css({
paddingLeft : paddingLeft,
paddingRight : paddingRight,
display : 'inline-block',
visibility: 'hidden',
float: 'left',
});
$(cloned_wrap).insertAfter('#foo');
cloned.appendTo(cloned_wrap);
$(window).on('resize', function(){
$('#foo').css('width', cloned.width() + 1);
$(cloned_wrap).css('margin-top',- $('#foo').height() - paddingTop - paddingBottom);
}).resize();
Please see the jsfiddle working demo. (← edited many times)
That's quite a lot of code, but it works ; )
(PS : I assumed jquery was available, if not, quite the same is achievable in pure JS)
I don't think this is possible only with CSS for the one element. The reason for your behavior is that the width of the element is still 100% of its container. The only way I could think to accomplish this is by doing something a little bit "creative"...try setting the style to inline so you get the shrink-wrap behavior, but to get around the background color issue, also put it in a container that shares the same background. That should work.
If im understanding you correctly you could use the #media type to decide what css to use depending on the width of the screen
here is an example of what i mean
#media(min-width:0px) and (max-width:200px){
div {
display: block;
background-color: black;
color: white;
padding: 5px;
}
}
#media (min-width:200px){
div {
display: inline-block;
background-color: black;
color: white;
padding: 5px;
}
}
I am still very appreciative of #lapin's answer (which I accepted and awarded bounty to), I found out after the fact that it didn't quite work on multiple elements next to each other (that has nothing to do with #lapin, I just didn't mention it in my original question as I thought it would be irrelevant information).
Anyway, I've come up with the following that works for me (assuming the elements it should be applied to are .title and .subtitle):
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $(document.createElement('span')),
bar = $(document.createElement('span'));
inner.addClass('inner');
bar.addClass('bar');
el.wrapInner(inner)
.append(bar)
.css({
backgroundColor: 'transparent'
});
});
function shrinkWrap() {
$('.title, .subtitle').each(function(i, el) {
var el = $(el),
inner = $('.inner', el),
bar = $('.bar', el),
innerWidth = inner.width();
bar.css({
bottom: 0,
width: innerWidth + parseFloat(el.css('paddingLeft')) + parseFloat(el.css('paddingRight'))
});
});
}
shrinkWrap();
$(window).on('resize', function() {
shrinkWrap();
});
Basically what I do is:
put the text in an inner wrap element
create an additional absolutely-positioned background element
get the width of the inline inner wrap element
apply said width to the background element (plus padding and whatnot)
The CSS:
.title, .subtitle {
position: relative;
z-index: 500;
display: table;
padding-left: 10px;
margin-right: 10px;
background-color: red;
}
.title .bar, .subtitle .bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: -10;
background-color: red;
}
Basically, I have a kendo UI gri with InCell editing. This is what it looks like.
This is what it looks like when I edit a cell.
And this is what I want it to look like.
I don't even know if that's possible, but it's on my requirements list. Any ideas?
Yes You Can , Use the editor property
columns: [
{
field: "Your Field",
title: "Your Field Name",
width: "20%",
editor: function (container, options) {
$('<textarea data-bind="value: ' + options.field + '"></textarea>').appendTo(container);
}
},
as the Text area behaviour you can drag right and bottom to disable dag to bottom use below css
textarea {
min-height: 75px;
resize: vertical !important;
}
I am using a non-editable objectPicker and setting the empty text:
this.statePicker = Ext.create('Rally.ui.picker.MultiObjectPicker', {
modelType: 'State',
id: 'statePicker',
matchFieldWidth: false,
editable:false,
emptyText: "Select...",
placeholderText: "Select...",
width: 80,
listeners: {
select: this._getFilter,
deselect: this._getFilter,
scope: this
},
});
I want to format the emptyText (emptyText: "Select...",) to be white with a background color. Using the below CSS, the background color displays perfectly, but the text color stays gray.
.x-form-empty-field {
color: #FFFFFF !important;
background-color: #085478;
}
Ihave tried other classes but none change the font. It stays gray! Please help?
The 'emptyText' is applied to the field using the 'placeholder' HTML5 attribute. The answer is going to vary depending on which browser you are using.
Here is a guide that demonstrates how to style the placeholder text in the various browsers that support it: http://css-tricks.com/snippets/css/style-placeholder-text/
Here is some useful information about the placeholder attribute in general (also includes styling examples): http://www.hongkiat.com/blog/html5-placeholder/
Hope this helps!
When we start sorting or other things datatables has option to show 'Process' message. All is fine , only when it hides 'Processing' there is still stay space where 'Processing' is placed. So html table jumping down when Processing showing then when data have been loaded Processing hidding but html table isn't jumping back up so there is stay visible place for it.
Question, how to make datatable to remove Processing tag instead of just hide. Thanks
EDIT. I add html code
<div id="search_table_processing" class="dataTables_processing" style="visibility: hidden;">Processing...<img alt="< <" src="/themes/third_party/linkedin_search/img/165.gif"></div>
Well drat, I just ran into this and had to dig into it myself.
In version 1.9.0 you can search for this snippet:
an[i].style.visibility = bShow ? "visible" : "hidden";
(Found after searching for visibility.)
In the minified version it's currently this (using the NuGet package):
c[d].style.visibility=b?"visible":"hidden";
The problem is we neglected to style .dataTables_processing, as per the sample CSS files. Here's what one of the samples has for styling:
.dataTables_processing {
position: absolute;
top: 0px;
left: 50%;
width: 250px;
margin-left: -125px;
border: 1px solid #ddd;
text-align: center;
color: #999;
font-size: 11px;
padding: 2px 0;
}
Once it's styled (or bProcessing is set to false), there shouldn't be an issue.
If you're comfortable changing the functionality of the plug-in (if you think you can remember to change it back), then you could switch it to use display instead of visibility.
In case you are using Internationalisation - "oLanguage" attribute in your datatables constructor
replace the old sProcessing value with this in your localization file in order to place a custom image while processing :
"sProcessing": "<img src='/themes/third_party/linkedin_search/img/165.gif'/>",
and here is how you link your datatables to a localization file (which can be downloaded from the datatables website Internationalisation of datatables)
.
.
.
"oLanguage": {
"sUrl": "../../jQuery/dataTables/media/MyLanguageFilesFolder/en_US.txt"
}
.
.
.
If you not using the Internationalisation of datatables you can always set the "sProcessing" value with the suggested above...
here an example :
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sProcessing": "<img src='/themes/third_party/linkedin_search/img/165.gif'>"
}
} );
} );
Changing
an[i].style.visibility = bShow ? "visible" : "hidden";
to
an[i].style.display = bShow ? "block" : "none";
didn't work for me. However, I accomplished it by changing the statement to
if (bShow == false) {
an[i].style.display = "none";
}
else {
an[i].style.display = "block";
}
Hope this helps anyone who doesn't want to add any css code and just go right to the source!
For the Datatables version 1.9.4, just edit the file jquery.dataTables.js line 3005, and change the following:
an[i].style.visibility = bShow ? "visible" : "hidden";"block" : "none";
to
an[i].style.display = bShow ?
Worked for me!
If you want the text to go away while the backdrop should be there, why not just add:
div.dataTables_processing{ color: transparent; }