I'm using jqGrid JS v5.3.0, with styleUI set to Bootstrap. On edit form, the checkbox (created by setting edittype option. also set editoptions: {value:"true:false"}) is aligned to the center of the form. Is there a way to make it align to the left?
Thanks in advance.
The reason for this is the setting in the bootstrap css
.EditTable td input,
.EditTable td select,
.EditTable td textarea {
width: 98%;
display: inline-block;
}
i.e this is caused from width:98%
To correct this there are a lot of ways.
The first one is to use editoptions to set a manual auto width with style options.
edittype : 'checkbox',
editoptions : {value:"true:false", "style":"width:auto"},
The second one (more elegant IMHO) is to set this in css for all check-boxes in the edit form like this:
<style>
.EditTable td input[type="checkbox"]
{
width :auto;
}
</style>
after loading the jqgrid bootstrap css file.
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;
}
Is it possible to set the textcolor of kendo grid when edit mode is clicked on "inline" edit?
I know kendo theming can do this somehow, but I would like to set myself if I can.
Define a CSS style as:
#grid tbody .k-input {
color: red !important;
}
For setting the color or the text to red while editing.
I use #grid to apply the style only to the Grid with id equal to grid and I use tbody to narrow the styling only to the body of the table (preventing other inputs from being formatted).
I have a jqgrid in which I have implemented the filter toolbar on top of the grid. Now I want to increase the height of all filter toolbar columns but I am not getting exact idea. I searched it on the web and got to know that it can be done by changing in .css file of the grid but not getting the exact code snippet.
Also I have to increase the height of grid rows.
$('#mytable').jqGrid('filterToolbar', {autosearch: true});
The height of the filter toolbar are set by some lines of ui.jqgrid.css. Default height is 20px. To increase it for example up to 30px you can add additional CSS style definitions to your page which overwrite the settings from ui.jqgrid.css. For example the following demo (and another one which uses no searching operations) uses the following styles
.ui-jqgrid .ui-search-table { height: 30px; }
.ui-jqgrid .ui-search-table .ui-search-oper { height: 30px; }
.ui-jqgrid .ui-jqgrid-htable .ui-search-toolbar th { height: 32px; }
It displays
I added to the demos the style described in the answer too just to improve the visibility of the input fields.
What I want to do is when i click on my image, i want the kendo dorpdownlist to propose me some options. Is it possible ?
I tried to replace the defautl template of dropdownlist with CSS without success.
Here i try simply to replace the default black arrow of the dropdownlist, with no success.
SOURCE : http://docs.kendoui.com/getting-started/web/appearance-styling?x=54&y=12
-----------------------------HTML
<select id="customList" class="k-widget k-dropdown"></select>
-----------------------------Javascript
$("#customList").kendoDropDownList().data("kendoDropDownList");
-----------------------------CSS
#customList .k-icon .k-i-arrow-s
{
background-image:url('../../resources/img/components/addtab.png');
}
But what i really want to achieve is to replace completely the default template of the kendo dropdownlist and to have instead my image.
There are a couple of question to keep in mind:
The HTML element that contains the arrow is not a descendant of customList but descendant of a sibling. This is because KendoUI decorates original elements with others.
You are only re-defining background-image but you there is two additional CSS attributes that you need to redefine: background-position and background-size since it is defined in Kendo UI CSS files for offsetting k-i-arrow-s icon.
So, you should either do:
span.k-icon.k-i-arrow-s {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
if you are ok with redefining every additional elements OR you do it programmatically defining a CSS:
.ob-style {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
and a JavaScript:
var list = $("#customList").kendoDropDownList({...}).data("kendoDropDownList");
$(list.wrapper).find(".k-icon.k-i-arrow-s").addClass("ob-style");
I'm trying to get the dropdown styles option in CKEditor V4 configured. My test, shown below, does not work as expected. The dropdown style menu its self does display the "Green Check" option (label and the image used in the style) but its not applied to content of editor instance when used. I'm using the new inline editing feature (way cool it is too).
config.stylesSet = [
{ name: 'Green Check', element : 'ul li',
styles :
{
'background' : 'url(/images/bullets/greencheck.png) no-repeat top left;',
'list-style-type' : 'none;'
}
}
];
I specified the element element : 'ul li', because 'ul' obviously targets the ul element but when 'li' is specified, I get nothing in the dropdown menu or applied to content.
Here's more or less the complete style that I'm trying to configure...
ul.greencheck li{
list-style-type:none;
line-height:18px;
background: url(/images/bullets/greencheck.png) no-repeat center left;
padding-left:30px;
}
Any help gratefully received.
'ul li' isn't a valid element, you can use either 'ul' or 'li' but not both
You should remove also the ending semicolon in the styles 'none;' isn't valid, 'none' is the correct one
and instead of setting the inline styles it would be better to just apply a class to the UL and leave the styles to a separate css file.