Kendo ASP.NET-MVC
Our designer wants a grid that has no borders or frames and no alternating row backgrounds. Basically a white box without lines. It's for financial reports. plain and simple.
There should be a monocolored header and footer row where the column names and paging go.
Is this achievable? We don't want to edit too much the main CSS as the rest of the controls on the site should have borders and colors. It's just the grid.
Try:
.k-grid, .k-grid * {
background: white !important;
border: 0 !important;
}
This forces all background for k-grid to white removing gradients and background images and sets borders to 0px (no border).
Related
How to disable blue highlight from this kendo list :
Thank you in advance
You can do it with some creative style overriding to get the effect you want.
i.e.
<style>
.k-item.k-state-selected.k-state-focused:not(:hover) {
background-color: transparent;
color: inherit;
}
</style>
will get rid of the blue highlight colour but still show the grey highlight when hovering and it also fixes the font colour back to black. So you get black on transparent instead of white on blue.
http://dojo.telerik.com/#Stephen/EtUXE
But it can be difficult to get the CSS selector just right to only change the particular styling you want without affected other kendo widgets on the page that use similar styling selectors.
Getting the correct style rule is particularly difficult in this case because the list portion that pops up is a disconnected popup that is not a child of the dropdownlist so you can't use a child selector to only target dropdownlist popups...as you can see in my dojo example, both dropdownlists are affected, as would an comboboxes and any other kendo widgets that use the same style rules.
I have a Singularity layout that puts padding either side of a 'container' like proposed in the Singularity issues here: https://github.com/Team-Sass/Singularity/issues/91
.container {
// Sets a max width. Site will be fluid until it reaches 960px, then stick there.
max-width: 960px;
// Centers the container.
margin: 0 auto;
// Sets padding equal to a gutter.
padding-left: gutter-span();
padding-right: gutter-span();
// Might as well clearfix it as well.
#include clearfix;
}
The basic want for this is so there's a gap either side so it looks cushioned on smaller screens.
What I don't understand is on what element I would show the grid using the #include background-grid whilst developing.
If I put it on the .container then the grid will display under the padding, which is not really part of the grid. Of course, I could create an element inside that, but that element is purely for visual development purposes and so is redundant once I switch the grid display off.
You can see on the image below how the black line goes out to the edge of it's parent .container but the grid is going beyound that.
So you use padding to add gutters to container. Backgrounds happen to stretch to padding gutters, so your grid is off.
The head-on solution is to use a subcontainer. Apply padding to the outer container. Apply clearfix and grid background to the inner container.
background-clip: content-box is indeed a better solution. You don't need debug grid background in IE8 anyway.
I want to accomplish a preview of an image gallery that is wider than the screen, using overflow: scroll (or auto).
To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.
Here is a Fiddle: http://jsfiddle.net/SBdLg/
First, I thought: Easy, give that image gallery a box-shadow: inset. But that will be shown behind the images.
Now, with an overlapping div that has position: absolute, I reach the desired effect BUT the box-shadow also moves when scrolling to the right.
IMHO, this problem would also occur when using an image containing the shadow instead of the div on top.
Is the desired effect possible by CSS at all?
Removing position: relative from the outer DIV and positioning the shadow precisely where you need it (this is the ugly bit) will help you achieve this.
Check the demo: http://jsfiddle.net/SBdLg/11/
I'm quite new to CSS and web programming. What I'm trying to do is add a hovering effect for a button. I'm doing this by using 2 images.
There is a button called download and in hover code I add:
.button:hover{
background-image:url(images/button2.png);
}
The problem is the button takes time to load ie: on hover there is a delay to show the button. How can i solve this?
EDIT: I tried using preloading,but there is also a kind of delay
div#preloadedImages
{
width: 0px;
height: 0px;
background-image: url(images/button2.png);
}
You should use an image sprite to get rid of the delay. A sprite is one larger file that contains multiple images. Your button will have it's background set to sprite.png file. You can then change the background-position property to shift the positioning of your sprite.
On the other note - why do you use images for buttons? Most buttons can be done in pure CSS with some fallbacks for older browsers.
Create a single image out of the two images (which is called a sprite)
Here is a working example with an animation as well to show you how it works.
Click here >>> FIDDLE
Then set your background position to to show the normal state of the background image
.button {
width: 150px;
height: 50px;
background-image: url('image-sprite.jpg');
background-position: left top;
}
Then on your hover css, just move the background image to show the lower part of it
.button:hover {
background-position: left bottom;
}
Keep your current css and other stuff as they are and add an <img> component at anywhere of your page and make it hidden to load the image initially.
<img src="images/button2.png" style="display:none;"/>
I have quite large text (font size 28) I'm trying to align vertically in a fixed-height container.
I'm doing this by eye and just setting a margin-top so that it gets to the right spot. However, when in Firefox, I need a margin-top of 20px, in Safari I need like 15px (else it's too far down). I saw that the discrepancy was because in Safari the text element is taller than in Firefox and includes a slight amount of whitespace on top that doesn't show up in Firefox (in Firefox, the top of the text element is exactly when the text starts).
I've tried all kinda of display combinations with line-heights and perhaps adding a width/height for the text and whatnot. Nothing works.
What can I do to make this consistent? I'd hate to use JS but it seems like the only option...
For cross-browser CSS normalization I'd recommend a reset - YUI3 has a good one, Twitter Bootstrap is another good one. It basically sets paddings and margins to 0 so all browsers will behave and only adhere to YOUR css rules and not their own default rules.
For vertically aligning text to containers, if it's a single line of text, use the line-height property, and set it to equal the height of the container.
For example:
CSS:
div {
height:300px;
width: 400px;
line-height: 300px;
font-size:28px;
background-color:#F0F0F0;
}
HTML:
<div>
Some vertically centered text
</div>
Example: http://jsfiddle.net/Djvv7/
You need to apply a css reset. Good practice to use one on all projects. The most famous I know of is: http://meyerweb.com/eric/tools/css/reset/