Hi I want a kendo Grid without any border i.e. plane background with no Outer border and also no border to 'tr','th' and 'td's
Can we have CSS for this?
Try adding this CSS:
.k-grid, .k-grid div, .k-grid table, .k-grid thead,
.k-grid tbody, .k-grid th, .k-grid tr, .k-grid td{
border: 0 !important;
}
Related
im using recharts for my graph, i added a cartesian grid, and YAxis with ticks.
but recharts adds additional top and bottom lines.
i tried to add css to my styles file as stated here:
https://github.com/recharts/recharts/issues/861
but im not sure how to pass those styles to recharts , and is it to the yAxis or to the cartesian grid.
tickLine={false} - didnt help
axisLine={false} on <xAxis ... /> - also didnt help
also saw somewhere:
.wrapper {
background-color: aliceblue;
width: 70%;
height: 70%;
box-shadow: 20px 8px 20px grey;
transition: box-shadow .2s ease-in;
display:block;
margin: 20px auto;
}
.wrapper:hover{
box-shadow: 30px 8px 30px grey;
transition: box-shadow .2s ease-in;
}
but it also didnt help , not sure how to apply those styles to recharts.
my cartesian grid:
<CartesianGrid class={styles.horizontal} horizontal={true} vertical={false} />
lines image:
so, any idea how ?
thnx alot
.recharts-wrapper .recharts-cartesian-grid-horizontal line:first-child,
.recharts-wrapper .recharts-cartesian-grid-horizontal line:last-child,
.recharts-wrapper .recharts-cartesian-grid-vertical line:first-child,
.recharts-wrapper .recharts-cartesian-grid-vertical line:last-child {
stroke-opacity: 0 !important;
}
I use the Kendo UI grid in my project to present my data.
I have a trouble about the its row height. When the grid is initialized; the row seems very odd. I tried to give some informations about the grid's back. The console screen contains some informations about the grid's initialization. You can glance through the enclosed picture.
.k-grid tr td {
border-style: solid;
border-width: 0px 0 1px 1px;
border-color: #c5c5c5;
}
My html page has a fieldset and inside that div I am rendering a table on the fly.
This table can have just 1 row or 1000 row.
Outer Div's height is 75% and I do not want table to go pass through that.
The HTML code looks like this
<fieldset>
<div>Some text and some HTML Elements </div>
<<h4>Field Permissions </h4>
<table class="mytable">
// Dynamically populate rows. Number of rows can be 1 or 100 or 1000
</table>
</fieldset>
Now, I wish to keep this table within outer field set but it renders past across the field set.
In the attached image, DOM element with red border is the table and with blue border is the outer fieldset.
This is my css:
.mytable{
font-size: 12px;
margin: 10px;
width: 95%;
border-spacing: 5px;
text-align: center;
position: absolute;
height: 100%;
}
fieldset {
margin: 0;
font-size: 12px;
overflow-y: auto;
overflow-x: auto;
width: 100%;
height: 100%;
}
Try adding overflow:auto; to the fieldset
fieldset{
overflow:auto;
}
Ahh wait. If i remove 'position: absolute' and it works.
Thank you all for help though
I have created a custom drop-down element, which is listed on this page:
http://jsfiddle.net/spryno724/2snUH/3/
Click on the drop-down menu in the "Result" secion, and you will see the problem. By rolling over the choices in the expanded drop-down list, you notice the roll-over indicators don't stretch to the available width.
While still maintaining the width of the menu when it was collapsed, how can I stretch the background color of each menu item? I'd also like each of the menu items to remain on their own line. A couple of adjustments that I made the CSS caused some of the list items to wrap their own text.
Thank you for your time.
Use negative margins with width: auto instead of width: 100% for items:
UL.dropdown.open LI {
margin: 0 -23px 0 -10px;
padding-right: 23px;
padding-left: 10px;
position: relative;
width: auto;
}
See http://jsfiddle.net/2snUH/4/ .
Or get rid of horizontal padding for UL (and specify horizontal padding for LI instead), and then you will not need negative margins for LI items.
To fix the width of the li elements use:
ul.dropdown.open {
padding: 5px 0;
}
ul.dropdown.open li {
display: block;
padding: 5px;
text-wrap: none;
width: 100%;
box-sizing: border-box;
}
I want to change JQGrid "Loading..." message to something with animated gif image. Looked everywhere but couldn't find a way. Anyone please.
Try to use
.ui-jqgrid .loading { background: url(ajax-loader.gif); }
it should work. Some animated gifs can be loaded for example from here. By the way, the div having "Loading..." message has the form
<div id="load_list" class="loading ui-state-default ui-state-active">Loading...</div>
where the id "load_list" will be constructed from the prefix "load_" and the id of the table element.
UPDATED: To remove the text "Loading..." you can either use loadtext:'' jqGrid option or overwrite $.jgrid.defaults.loadtext global setting from the grid.locale-en.js:
$.jgrid.defaults.loadtext='';
If you need to adjust width, height or any other CSS parameter of the loading div you can do it in the same way. For example,
.ui-jqgrid .loading
{
left: 45%;
top: 45%;
background: url(ajax-loader.gif);
background-position-x: 50%;
background-position-y: 50%;
background-repeat: no-repeat;
height: 20px;
width: 20px;
}
This is perhaps a more modern answer to the question using FontAwesome rather than a gif. I couldn't find where this has been answered anywhere and had to piece it together from various places including the answer above by #oleg.
Hopefully this will be helpful to others searching.
<style>
.ui-jqgrid .loading {
background-color: transparent;
border: 0px;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
.ui-jqgrid .loading:before {
content: "\f110";
font-family: FontAwesome;
font-size:40px;
}
</style>
And then place the following (exactly like this) after $(document).ready(function() {
$.jgrid.defaults.loadtext='';