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
Related
I want to hide the header row from appearing, being visible on the table. (Both when viewed from desktop and mobile)
I tried:
"drawCallback":function(settings ){$("#mySelection thead").remove();} ,
While this code seems to render the table the way I want (header-less), it also effects the output of the buttons used here. The buttons are set to output whatever is visible (toggled by column visibility).
And unfortunately this code removes not just the theader in the export output, but also all the data that was in the tables.
The same thing happens when I try:
$("#mySelection thead").hide()
Is there anyway to keep the output as it was before and only hide the table headers from view, as in just the row with the column titles? I want to keep the buttons (copy, excel, pdf, colvis) working on the table data.
https://jsfiddle.net/287fum2q/
EDIT:
Using the following code in the CSS results in the problem I mentioned in the first part of my question:
.ui.table thead { display: none !important; }
As does this:
thead { display: none!important; }
If you could include a saved jsfiddle that shows the solution, that'd be all the more helpful.
It appears the DataTables Jquery plugin may possibly have a bug. DataTables assumes the header display will not be set to none. When you set the header display:none it prevents the DataTables buttons from working as expected.
Here's your workaround:
.ui.table thead {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
This removes the header from sight, but the DataTables buttons still have what they need to work correctly. I just learned this can be good practice (surprisingly) because display:none makes content "inaccessible" to screen readers.
thead css was conflict with semanticui.min.css so used !important to overwrite css
.ui.table thead {
display: none !important;
}
So I have a Bootstrap modal I've created and I am trying to make it resizable using jquery. I have the resize working horizontally but if you try to resize vertically its like the content inside of the modal is not contained within the element I am trying to resize.
I tried using the 'alsoResize' property on the .resizable() and included all the divs within the modal but that seems to cause other issues.
$('.modal-content').resizable({
alsoResize: ".modal-header, .modal-body, .modal-footer"
});
Here is my example: https://jsfiddle.net/p7o2mkg4/
You actually did everything right! But the default overflow behaviour of HTML elements is visible. So if the parent element's content gets overflowed, they break out of the modal and that doesn't look good! So, you need to set the CSS overflow property to scroll or hidden to fix breaking on small size. Try adding:
.modal-content.ui-resizable {
overflow: scroll;
}
This will ensure scrolling on overflow of the element.
Link to JSFiddle: https://jsfiddle.net/p7o2mkg4/1/
This works (css)
#myModal>div{
overflow-y: hidden;
overflow-x: hidden;
}
In case anyone stumbles across this like I have, make sure you have both jQueryUI.js and jQueryUI.css.
I thought having only jQueryUI.js was enough, but it turns out adding the stylesheet is why it wasn't working for me.
What is the best practice for creating specific page breaks in SAPUI5 and is it actually possible?
Classical CSS atributes page-break-after and page-break-beforedoesn't seem to work in my case. For example, I have two sap.m.VBox elements and I attached them a CSS class which specifies page-break-after: always !important;when printing, but nothing happens. If I add
* {overflow-x: visible !important; overflow-y: visible !important;} then it will break and continue to draw the content in next page if it doesn't fit in one page, but it doesn't work in IE.
I have tryed also adding an empty div element that would work as a page break indicator, but still CSS wouldn't do anything. I guess that's because everything in SAPUI5 is put into one content div.
You can solve this by adding an empty element in between.
If you want a break that is 200 pixels high, your page content can look like this:
return new sap.m.Page({
content:[
oVBox1,
sap.m.Panel({height: "200px", width: "100%}),
oVBox2
]
});
ofcourse you might want to set your panel background-color to transparent ;)
The "page-break-after" is ignored because the property display of SAPUI5 views is set to inline-block.
Simply override the CSS style for the corresponding class with a custom CSS and it should work:
.sapUiView {
display: block;
}
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
I currently have a table that has a width of 94%, and the following toggle set to it:
$(document).ready(function(){
$("#moreinfo").hide();
$("#toggleinfo").click(function () {
$("#moreinfo").toggle('normal');
});
});
It toggles fine, but as soon as you toggle, the width goes really small and I have no idea why. If I remove the hide() it's the right width, but again as soon as I start toggling it, the width automatically resizes.
Just tried the following CSS too:
#moreinfo { width: 94% !IMPORTANT; }
Edit: it seems to completely remove any width applied through CSS when I toggle it
Edit2: Wrapping it inside another div works! Not ideal, but not a bad solution I guess.
Any way to stop this please?
The jQuery toggle() function sets your target element ('#moreinfo' in this case) to display: block. It's just a guess without seeing your CSS or HTML, but I'm picking that the table, when having its display property changed, is being positioned or laid out incorrectly.
You may be able to work around this by wrapping your moreinfo element in another div with display: inline or position: relative? But that's just a guess. Do different browsers show the same result?