i'm trying to give a td an overflow class if its width exceeds normal width.
fnDrawCallback: function(oSettings) {
docstable.DataTable().column(0).nodes().each(function (cell, i) {
var $this = $(this).get(0);
console.log('this ',$this.scrollWidth)
});
from here i want to be able to measure the td, $this, using $this.offsetWidth & $this.scrollWidth. Unfortunately both are returning 0.
secondly, I don't seem to be able to add classes to the DOM elements even though i can view them in this function. if i console log $this i can see that its a td and i can get the correct value when i run .html().
i need to find out which cells require a tooltip and which don't
Related
By default Ag-grid sets a fixed column menu width. Their documentation has an example of setting the column menu width to a different fixed value. The issue with this approach is that every column will have the same menu width.
Is there a way to dynamically set the column menu width based upon the column's filter list values? The following has no effect:
.ag-set-filter-list {
width: auto;
}
Similarly word wrapping could also solve this issue, but is also not working:
.ag-set-filter-list {
overflow-wrap: break-word;
}
I also tried using the postPopup callback to adjust styling after rendering, with no luck:
created() {
this.postProcessPopup = (params) => {
if (params.type !== 'columnMenu') {
return;
}
params.ePopup.style.overflowWrap = "break-word";
params.ePopup.style.width = "auto";
}
}
Digging into Ag-grid's filter list styling more, I realized that the filter items are absolutely positioned and use top values for placement. This made it difficult to wrap filter values without having them collide with each other.
I contacted Ag-grid support and they confirmed that dynamic filter list widths are not supported. They did mention their tooltips feature though, which works for my use case.
I modified that example in two ways:
Only show tooltips for filter list values that are longer and will be cut off by the edge of the filter menu.
Only show tooltips for values in the filter list, not for rows in the grid.
Here's my version of a custom tooltip with the above modifications:
export class GridColumnFilterTooltip {
init(params) {
const FILTER_VALUE_CHARACTER_LIMIT = 28;
this.tooltip = document.createElement("div");
if (
params.location === "setFilterValue" &&
params.value.length > FILTER_VALUE_CHARACTER_LIMIT
) {
this.tooltip.classList.add("grid-column-filter-tooltip");
this.tooltip.innerHTML = params.value;
}
}
getGui() {
return this.tooltip;
}
}
I have a a web page where various fields are shown or hidden by toggling between "display:block" and "display:none". However, I added some extra stuff to the page and discovered that I needed to special-case several tags: TD needs to use "display:table-cell:, TR needs to use "display:table-row", and so on...
Is there any general off-the-shelf solution to this (i.e. look up the "natural" display type based on the tag name) or am I stuck with creating a JS object by hand which lists tag names and the corresponding display types?
You can apply revert to display property to set the element to it's original value and get the original value by Javascript.
const getOriginalDisplayProperty = (elem) => {
const modifiedDisplayProperty = getDisplayProperty(elem); //store modified display property
elem.style.display = "revert"; //revert to original display property
setTimeout(() => {
elem.style.display = modifiedDisplayProperty; // Again set original display property
}, 0);
return getDisplayProperty(elem);
};
const getDisplayProperty = (elem) =>
window.getComputedStyle(elem, null).display;
getOriginalDisplayProperty(document.querySelector(".test"));
getOriginalDisplayProperty(document.querySelector(".test-span"));
div {
display: inline;
}
span {
display: flex;
}
<div class="test"></div>
<span class="test-span"></span>
i have a dynamically generating div which is not in the time of loading. It is generating later in the document. So how can i target that div and hide it after specific time. The div is as follows:
<div class="message-sent">Your Message has been sent</div>
Important: I refer so many articles but everyone is talking about 'onclick'. I don't want click event. I just want hide this div when it is appearing in the docuemnt. Thanks in advance!
you can add a style display:none.
you can add the style after time out (3000ms) like so:
setTimeout(function(){
document.getElementsByClassName("message-sent")[0].style.display="none";
}, 3000);
note: it is better if you use an id instead of a class to identify your div.
You should try looking into the setTimeout function.
Also if that div is the only member of the DOM-tree that has that class, use an ID. It's better IMO.
Anyway, assuming you want to hide every member of the message-sent-class,
it goes something like this:
setTimeout(function(){
$('.message-sent').hide();
}, 2000)
In which the 2000is the variable that indicates the time (milliseconds)
You can try DOMNodeInserted,
$(document).bind('DOMNodeInserted', function(event) {
var element = document.getElementsByClassName("message-sent"); // get all elements with class message-sent
var lastchild = element[element.length - 1]; // get the last one (others are hidden)
if(lastchild != null){
lastchild.style.visibility = 'hidden'; // set visibility to hidden
}
});
Working demo
Hope helps,
I have a simple Html element, that I am accessing from within a directive:
<div scroll-item ng-repeat="post in posts">
...
app.directive("scrollItem", function($window){
return {
link : function($scope, $element, $att) {
console.log($element[0].clientHeight);
console.dir($element[0]);
}
}
});
The two different logs produce different results. When I look through the object found in the second log, clientHeight returns 166; which is correct, In the first log however it returns 201. How can it possibly produce such inconsistent results?
I am not able to reproduce the issue in this simple fiddle: http://jsfiddle.net/9noo4uc5/1/
What could cause an issue like this?
Any element's client height return inner height of element so it is not necessary that every time it will return same value. Each element which has more text inside it which means more clientHeight.
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
source:https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight
myApp.directive("scrollItem", function(){
return {
link : function($scope, $element, $att) {
$element.on('click',function(){
console.log(this.clientHeight);
})
}
}
});
See this fiddle it is returning different innerHeight when you click on last element :
http://jsfiddle.net/9noo4uc5/6/
How can I make the drop down show all the content of one option when it is expanded? If an option in the drop down is, for instance, a whole sentence and select tag width is small, the user in IE will not be able to read whole option. This is not the case in Mozilla where the whole content is shown when drop down is expanded.
Is there any way to avoid this behavior in IE8,
Thanks
I had a similar constraint when working against IE8 and the oh so famous drop down list truncating. I have multiple drop down lists on my page, one after another, some inside top nav content, and IE8 decides to cut off my attribute option text properties. Now, like many of us, I don't want to set the width obscurely large, so this option is out of question.
After a lot of research, I couldn't find a great answer, so I went ahead and fixed it with jQuery and CSS:
First, let's make sure we are only passing our function in IE8:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
//fix me code
}
Then, to allow the select to expand outside of the content area, let's wrap our drop down lists in div's with the correct structure, if not already, and then call the helper function:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
$('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');
//helper function for fix
ddlFix();
}
Now onto the events. Since IE8 throws an event after focusing in for whatever reason, IE will close the widget after rendering when trying to expand. The work around will be to bind to 'focusin' and 'focusout' a class that will auto expand based on the longest option text. Then, to ensure a constant min-width that doesn't shrink past the default value, we can obtain the current select list width, and set it to the drop down list min-width property on the 'onchange' binding:
function ddlFix() {
var minWidth;
$('select')
.each(function () {
minWidth = $(this).width();
$(this).css('min-width', minWidth);
})
.bind('focusin', function () {
$(this).addClass('expand');
})
.change(function () {
$(this).css('width', minWidth);
})
.bind('focusout', function () {
$(this).removeClass('expand');
});
}
Lastly, make sure to add this class in the style sheet:
select:focus, select.expand {
width: auto;
}