Kendo Grid do not play nice with Bootstrap dropdown or tooltips - javascript

I'm trying to use certain Bootstrap elements inside a Kendo Grid, for example Bootstrap dropdown buttons and tooltips.
The problem is the dropdown or tooltips are always positioned below the row below or above. I've tried adjusting the z-index of the displayed elements, but this doesn't fix it.
Has anyone managed to find a solution to this?

The .btn-group class, which is the container for the dropdown-menu is positioned relatively so altering the z-index of the dropdown-menu class won't do any good. You can position is absolutely and then adjust the positioning from there. Something like this should get you started:
.k-grid-content .btn-group {
position: absolute;
}
.k-grid-content .btn-group .btn {
top: -10px;
}
Link to a jsFiddle that demonstrates it in action.

The problem is to do with the Grid content being permanently set to overflow-y: scroll which it doesn't really need (unless you are a fixed height with the virtualization feature).
By changing the CSS of the grid content to remove the scroll bar, setting overflow: visible and adding extra padding to account for the missing scrollbar, it now works.
I've updated the jsFiddle to demonstrate.
Thanks for all the help.

For future reference, in case you have other grid cells that might contain data that will overflow into other columns with the above fix, you can set a class to the custom grid action column like so:
columns: [
{
field: "Actions",
title: " ",
filterable: false,
attributes: {"class": "actions-column"},
template: <your action button template or template link here>
}
]
Then in the styling for the page add the following CSS:
.k-grid-content tr td.actions-column {
overflow: visible;
}
edit: small css selector change

Related

Make cursor turn to pointer on .jqxgrid column headers

I'm working with a jqxgrid and I need to change the cursor to a pointer when hovering on a column's header name. I've tried to use CSS on the .jqx-grid-columngroup-header, .jqx-grid-column-header, and the .jqx-widget-header.
#jqxWidget .jqx-grid-columngroup-header:hover,
.jqx-grid-column-header:hover,
.jqx-widget-header:hover {
cursor: pointer;
}
All this seems to do is have the cursor turn into a pointer around the header but not on the header itself. I would like the pointer to appear when hovering on the words of the header, not the space around it.
I inspected the element on the webpage and it shows me this:
<span style="text-overflow: ellipsis; cursor: default;">Column Name</span>
Clearly, the CSS on the span is overriding anything I do and creating my issue. I tried to search my CSS files for this and could not find it.
Could someone clear this up for me?
EDIT: I'm tagging javascript too. Maybe there's something I could do when the grid is rendering with javascript?
After trying just about everything I could think of I came up with a clunky solution.
In the jqx grid itself, I added a new class to each column header label and that class changes the cursor to a pointer.
In the grid for each column header:
columns: [{ text: "Header Name",
datafield: "Data",
width: 160,
menu: false,
rendered: function (header) {
header.html("<span class='jqxheaderlabel'>Header Name</span>")
}
}]
In my CSS:
.jqxheaderlabel {
cursor: pointer !important;
}
If anyone can come up with a cleaner solution, it would be much appreciated.

floatThead and bootstrap downdrop

So I am trying to have a dropdown in a fixed header. floatThead works well for fixing to the top, but the dropdown can only display the elements that fit in the header of the table because of the wrapping overflow:hidden as part of floatThead. Here is a jsfiddle. I tried upping/downing the z-index to no avail. Is it possible or should I get rid of the dropdown? (It isn't all together necessary, but a nice bonus if it could work).
$(document).ready(function() {
$('.sticky-header').floatThead({zIndex: 1001});
});
You could set .floatThead-container to have overflow: visible and use !important to override the inline styling.
div.floatThead-container {
overflow: visible !important;
}
JSFiddle

jQuery - slide down panel

I want to create a website where the user has to enter soma data. To make this as easy as possibble, i just show the main input elements and let a helper panel slide down if needed. As possible, these panels should be draggable (i am looking for javascript for that in the moment). My main problem is that when the panel slides down, the content at the top is shown first, but i want to slide down like shown below:
Is there any way to make this?
Thanks in advance.
Look at this JSFiddle.
This should show the principle to achieve this effect. You need a container div with overflow: hidden; and a child positioned to the bottom of the container div, then you can change the height of the container with jQuery to show/hide the content.
Also, to make the panels draggable, jQuery UI has a great function called draggable which works great. Give it a try.
Quick access: Fiddle: http://jsfiddle.net/VuPyL/1/ (updated) , BTW: I made it toggle-like.
Generally it seems to be only solve-able with animate,
if you dont want to have any wrapper element you would really like to use DOM's native property "scrollHeight" - that allows you to scroll always to bottom, in combination with a height toggle, it does exactly what you need.
Overflow: hidden dont have to be in the CSS - jQuery is adding it itself while toggling height.
This solution may seem a bit longer, but is more clear in what is actually happening :) :
HTML
<div id="helper-panel">
Here's
<br />
My
<br />
Content
</div>
<button id="show-helper">Show/hide Helper Panel</button>
CSS
#helper-panel{
height: 70px;
width: 375px;
position: relative;
overflow: hidden; /*optional - jQuery is adding it*/
display: none;
}
JS/jQuery
$('#show-helper').click(function(){
var $helper = $('#helper-panel');
$helper.animate({
height: "toggle"
},{
duration: 800,
progress: function(){
$helper.scrollTop( $helper[0].scrollHeight );
}
});
});
As suggested by #Andrew Pope to have item draggable/droppable it is best to use jQuery UI's draggables&droppables.
Also check sortable if you just want to change the order of the helper-menu items using drag&drop ;)
jQuery UI is not a standard part of jQuery - so dont forget to include it.
When using these it is good to wrap each draggable element. So the HTML would be:
<div id="helper-panel">
<div>Here's</div>
<div>My</div>
<div>Content</div>
</div>
And the jQuery (with jQuery UI):
$('#helper-panel').sortable() //make the items inside #helper-panel sortable
.disableSelection() //when sorting, you dont want selecting
.css('cursor','default'); //looks better with default cursor

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>");

sliding up/down form in bootstrap

I am creating a from with sliding up/down animation in a bootstrap template.
Here is the code : http://bootply.com/94382
When You click on the add button, the form will slide down and when You will click it again, it will slide up.
But if i am adding new elements on the page after the buttons, the new elements are not moving down instead the form is coming over the elements.
i want to achieve that the new elements will slide down and then form will come. But this is not happening now. Please help me out.
First of all remove position:absolute, position:fixed from your css where it actually not required. Also, use spans or ul li list with proper styles to render the icons, buttons, images in <div id="bottom-header">. Then remove position:absolute from your form and give proper margins width etc. so that you will get what you expected.
Replace your #sliding_form CSS properties to :
#sliding-form {
display: none;
background-color: #eee;
width: 45%;
margin-top: 60px;
overflow: hidden;
}
Updated Bootply

Categories

Resources