This may seem like a basic question, but I'm having trouble figuring out how to set the table width to 100% on a YUI datatable.
I tried doing
#dtContainer {
width: 100%;
}
#dtContainer table {
width: 100%
}
but none of these approaches work.
To clarify, I am trying to set the datatable width to 100% when the table is empty and the empty message is displayed.
The generated table is an HTML table; so, I thought this should work.
Dont use .yui-dt table { width:100%;} , It doesn't appear to set the column widths correctly. Use myDataTable.setAttributes({width:"100%"},true); after table render
It turns out the solution is really simple:
.yui-dt table
{
width: 100%;
}
this is an ugly solution. but it works
<script>
window.onload = function() {
setTimeout('document.getElementById("NAME OF CONTAINER DIV").childNodes[1].style.width
= "100%"',1000);
};
</script>
the problem is applying the style pre render is pointless, the javascript is building the table, post render is all I could get to work.
looks like this little style tag works magic:
.yui-dt table { width:100%;}
To maintain aspect ratio across various screens with different resolutions, I had to manually set the column width as percentages that summed up to 100%.
<style type="text/css">
/* YUI Individual Column Width */
#dvAutoWidthList .yui-dt-col-Col1{width: 35%;}
#dvAutoWidthList .yui-dt-col-Col2{width: 10%;}
#dvAutoWidthList .yui-dt-col-Col3{width: 15%;}
#dvAutoWidthList .yui-dt-col-Col4, .yui-dt-col-Col5, .yui-dt-col-Col6, .yui-dt-col-Col7 {width: 10%;}
</style>
PS: Might not be the best way to do this, but it solved my problem!
Kwex.
var dataTable = new Y.DataTable(
{
columns: cols,
data: remoteData,
width: '100%',
}
).render('#dataTable ');
This should do the trick. Worked for me AUI 2.5.1
Related
Hi my kendo datepicker shows two month while change the month of a date picker.Please see the screenshot. I found the below solution Kendo datepicker shows two months during animation . but no luck .Can anyone help to this issue ?
My Code:
#(Html.Kendo().DatePicker().Name("datepicker").Max(DateTime.Today).Events(e => { e.Change("SearchonClick"); }).HtmlAttributes(new { style = "width: 100%", #placeholder = "dd/mm/yyyy", onkeydown = "javascript:return false;" }) )
The observed problem is surely caused by CSS code that enforces one of the following styles to the popup Calendar's table elements:
/* any other selector that influences Kendo UI Calendar tables */
table {
width: 100%;
/* or */
float: none;
}
The Kendo UI Calendar applies and requires the following styles:
.k-calendar .k-content {
width: 100%;
float: left;
}
The 100% width style is then overridden by a calculated inline pixel width style.
So, if any of the two styles are overridden by non-Kendo UI styles, the Calendar navigation will break. Please check and modify your selectors, so that they do not target Kendo UI Calendar tables.
Finally i found answer
bootstrap.css affect the datepicker table. Add the below css is exact solution.
#datepickerid_dateview table.k-content
{
border-collapse: inherit;
}
Im using jsGrid, not jqGrid..
I have bug problem on column.
here is the picture
Add the following css rule:
.jsgrid-cell {
overflow: hidden;
}
See the working fiddle https://jsfiddle.net/tabalinas/kL291xp5/
I have kendo MVC Grid and I have to set my page size to 50, so I need to freeze the column header while scrolling.
The question is : How can I freeze the column header while scrolling ?
When you create the Grid you should define the height in pixels as well as define scrollable as true.
Example:
var grid = $("#grid").kendoGrid({
dataSource: ds,
scrollable: true,
height : "150px",
columns : [
...
]
});
See this working here : http://jsfiddle.net/OnaBai/uuPW5/
Maybe this is something you were looking for:
https://github.com/jmosbech/StickyTableHeaders
Works quite well and you don't have to have scrollbars in your grid which makes it easier to work with.
You simply link provided script to your view and call this method on load:
$('#grid').stickyTableHeaders({
cacheHeaderHeight: true,
leftOffset: 1,
fixedOffset: ...
});
Parameters are optional but cacheHeaderHeight improves performance and I had to add leftOffset because of custom grid header borders and fixedOffset because of other sticky elements.
Just set the css of the grid header like this :
.k-grid-header {
position: sticky;
top: 0;
}
This answer has already been given for kendo UI, but here is how it's implemented for kendo MVC:
.Scrollable(scr => scr.Height(400))
It will give you a vertical scroll bar, allowing the user to scroll through the data while constantly seeing both the header and footer of the table. You can read more about it here: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/overview.
Trouble with this solution, however, is that the grid will be 400px tall, even when there is only one row of data. You can solve this like so
.Scrollable(scr =>
{
if (data.Count() < 10)
{
scr.Height("auto");
}
else
{
scr.Height(400);
}
})
How can I set the width of an autocomplete using css? I know I can set it up when I set up the width when I declare it, like so.
#(Html.Kendo().AutoComplete().Name("test").HtmlAttributes(new { style="width:400px"}))
But I want to know how to do it in css. I tried the following and it didn't work
.k-autocomplete .k-header
{
width: 300px;
}
Simply do this:
.k-autocomplete.k-header {
width: 300px;
}
Remove the space between CSS class selectors.
Taken from their documentation
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
Seems a bit odd that this isn't part of the configuration when you initialize.. maybe that's just me.
For me in 2020, the answer was simply:
.k-autocomplete {
width: 300px;
}
I think I have found a bug in the kendoui grid when column resizing is enabled (version 2013.1.319). All columns but one disappear when resizing.
I'm testing this in IE9 and IE8. Chrome does not have the bug (maybe other browser also don't)
Here is a jsbin that displays the problem:demo
Has anyone has a workaround for this bug?
Give the column a width, we using the same Kendo build and it works in IE, but we have a width on every column :
columns: [
{
title: "one", width: "50px"
},
I Just did this
.k-grid td {
max-width: 200px;
}
after javascript initialized grid