tooltip to dynamic position to show the data in the table - javascript

i have a table with data and when i mouse over on one of the column in the table, it has to show the tooltip at top right position, issue is for the first row in the table the tooltip data is getting hidden as table header has to show up. How to resolve it.
Thanks in advance.

Add a class name to the first and second rows and for those rows only adjust the popup to desired position:
.firstRow a.tooltip:hover span,
.secondRow a.tooltip:hover span {
bottom:auto;
top:10px
}
fiddle
if you cannot add class names to your rows, then use css nth-child:
.GridviewScrollItem:nth-child(3) a.tooltip:hover span,
.GridviewScrollItem:nth-child(2) a.tooltip:hover span {
bottom:auto;
top:10px
}
fiddle

Related

How to delete border-bottom in kendo grid selected row

I have grid with kendo when i changed selected row background-color but when i selected row it has also shows me border-bottom as in image
I want to delete that blue line.Also i tried the css like this but not worked.
.k-grid .k-state-selected tr {
border-bottom: none;
}
How to solve this?
From looking at the Kendo Grid's page on grid selection, it looks like it is the row (tr) which has the class k-state-selected.
The above CSS selector that you've attempted to use says that the element you're trying to style is a tr tag that is an ancestor of the element with the class k-state-selected.
This is not true as the row itself is what has that class. You can fix it like so:
.k-grid tr.k-state-selected {
border-bottom: none;
}

Horizontal scrollbar does not show when content in the table cell overflows

I am working with dgrid tables. I have a table with single column, and each column cell have some contents within it. When my cell content is really big, i would like to show a scrollbar, so the user can scroll and view the rest of the content. However in my table, the scrollbar does not show in this case, but if i use the dgrid columnResizer to expand the column, then the scrollbar shows up till the expanding width. If the width is less than the content, then the rest of the content will still remain invisible. Here is the jsFiddle.
http://jsfiddle.net/vrwe7dn5/
This is my CSS-
#grid{
width: 20%;
height: auto;
}
.dgrid-scroller{
overflow:auto;
position: relative;
}
.dgrid-content{
white-space: nowrap;
}
Please let me know if i am doing anything wrong.
The class you are using, .dgrid-scroller{} is only for the column. To make the content scrollable, you would have to apply overflow-x:scroll on the td's themselves.

tooltip displaying at random position

I have a requirement where i have multiple tables in a page and when i mouse over on one column it has to show tooltip at the top position with some data in it. Issue is tooltip is showing randomly. Thanks.
first off, make sure you're correctly terminating your spans (you're missing the ending bracket).
change this:
a.tooltip:hover span {
position: fixed;
to this
a.tooltip:hover span {
position: absolute;

Vertically align div content, that substitutes tr element on mouseover (using jQuery)

I'm working on a html table where I show more information on a row using jQuery.
The following is an example of how I'm doing it:
http://jsfiddle.net/rMXAp/7/
The jQuery essentially fades the row in question, by setting the opacity to 0, and adds an overlay containing the following div:
<div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div>
The jQuery then sets the div text based on the "desc" attribute of the tr/row.
The problem I'm having lies in vertical alignment of the text shown (in a div) in place of the table row, when hovering over it.
Things I've tried.
"vertical-align:middle;" for the tr element, as well as the div.
"min-height: 10em;" for the div.
"position: absolute; top: 50%;" for the div.
I cannot set the div's "display" property to anything other than none, or else it would display below the table (see jsfiddle).
I'm aware there are many questions on vertical alignment, but given I'm showing a div using jQuery, and setting the html dynamically, would they be used the same way? Or how?
I've got the feeling I've completely missed something here...
Ahh.. verical aligning...
I think the best method is using the table-cell display.
The problem is that for display:table-cell; to work properly, the parent must have display:table;
So I'd suggest something like this:
HTML
<div id="divOverlay">
<div class="content" style="display:table-cell;vertical-align:middle;">
</div> <!-- the content div will hold the content -->
</div>
Javascript:
// inside onmouseover...
$divOverlay.css({
position: 'absolute',
display: 'table', //set parent's display to table
....
});
//set the html to the child content holder
$divOverlay.find(".content").html($(this).closest('tr').attr('desc'));
check out this jFiddle:
http://jsfiddle.net/SpacePineapple/4T42H/
I guess you don't have any problem by keeping content of "desc" data into a span.
Have took a span having line-height:normal and vertical-align:middle and added the line-height for div.
Edited your fiddle here
Please let me know if you want something else.
EDIT
If you don't want to change the content of "desc" then you can implement like this too.
$divOverlay.html("<span style='vertical-align:middle;display:inline-block;line-height:normal'>"+$(this).closest('tr').attr('desc')+"</span>");

HTML Table Wrap Column

I have a table where users input data into columns. Each time the user enters data a new column is created. After a while they have a TON of columns and I need them to wrap.
I know how to wrap the text inside the columns, but I need the entire column to wrap below the first column and so on.
You shouldn't use tables for this.
You should use divs with "float: left" CSS style.
Here is a working example: http://jsfiddle.net/3MEJ5/
Instead of using table columns, try having each input data be a table on its own, wrapped inside a <div class="datainput">, using the following CSS:
.datainput {display: inline-block; vertical-align: top;}
Now, instead of adding a new column, duplicate the container. This will place it next to the existing ones, and wrap if/when needed.
Should it fail to wrap, apply this CSS to the element containing all these containers:
word-break: break-all;
it is actually not simple. The table/row/column structure is quite rigid. To achieve what you describe, you have to create each cell as a single-celled table in a giant outer cell. Then they will wrap. But then, they may not align well.
A good solution for this now is to use CSS3 Columns.
You can set the CSS properties on the container and the children will flow down and across.
You have the options:
div {
/* Make columns with a min width of 100px, create multiple columns as space permits */
column-width: 100px;
column-count: 3; /* Divide the text in a <div> element into three columns */
column-gap: 40px; /* Specify a 40 pixels gap between the columns */
/* Specify the width, style, and color of the rule between columns */
column-rule: 4px double #ff00ff;
}
For more details see: https://www.w3schools.com/cssref/css3_pr_columns.asp
For browser support see: https://caniuse.com/#search=css3%20columns

Categories

Resources