I have to apply a particular style on the kendo grid headers. I did come across
headerAttributes
in the kendo documentation which I tried getting to use here to make the background white and the font to the required but I am not able to remove the borders accompanying the header. Anyone can help me with an idea to get the same implemented. Including the dojo that I created to demonstrate a similar case
http://dojo.telerik.com/OXUTE
Edit: This is the kind of end result I am looking for
Thanks in advance
This is not pretty...because of the borders all belonging to different elements and the top-right grey corner needing to be gone, but this works:
.k-grid-header-wrap {
border: 0;
}
.k-grid-header {
padding-right: 0px !important;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #fff;
border-left-style: solid;
border-left-width: 1px;
border-left-color: #fff;
border-right-style: solid;
border-right-width: 1px;
border-right-color: #fff;
margin-left: -1px;
margin-top: -1px;
margin-right: -1px;
}
http://dojo.telerik.com/#Stephen/ErORO
It adds a border to the header that is the same colour as the background and then sets the margins to -1px so that the border is on top of the grid's border. Otherwise, you have to figure out how to remove just the portion of the grid's left/right border on the top row without removing it from the rest of the grid.
It also forces the right padding to 0 to get rid of the grey block.
It works...but I feel dirty.
Update...I was thinking about it some more
Instead of hacking the borders off the header row, another way would be to completely hide the header and "replace" it with a label styled however you want, i.e.:
.k-grid-header
{
height: 0;
border-bottom-width: 0;
display: none;
overflow: hidden;
}
http://dojo.telerik.com/#Stephen/UWoZU
Related
I want to give more left to the element "SerialNumberTooltip" and more z-index after the hover in the following thread, so that my tool-tip appear over the scroll and body. But Z-index seems not working here.
eg:
.SerialNumberTooltip {
position: absolute;
top: 10px;
left: 40px;
background-color: #FFF;
border: 1px solid #CCC;
display: none;
}
How can I fix the position of tooltips within a scrolling <div>?
http://jsfiddle.net/vw6naxmr/
The above solution is more likely to my problem. Please help..
How do you get a nice outline? This is similar to the question:
CSS/Javascript: How to draw minimal border around an inline element?
However, the accepted solution to that question results in jagged textboxes, as seen here:
http://jsfiddle.net/z9THQ/2/
/* p {
text-align: justify;
} */
.wrapped {
outline: 2px solid black;
box-shadow: 0px 0px 0px 2px rgba(0,0,0,1);
}
.wrapped span {
border: 1px solid white;
background-color: white;
position: relative;
z-index: 1000;
}
Even with justified text, the right edge is still jagged; it should look like a single line, like in the image below.
A pure CSS solution would be ideal, but if Javascript is necessary, that would be fine too.
A related symptom which a solution would ideally solve is the fact that the :hover attribute is not activated by the region in between two lines of text. Ideally, the whole section should feel like a text-area, only it is non-rectangular since it is inline with other text.
I have a some picture with border add with photoshop but these border are dirty.
I would overwrite these border without doing it with photoshop again (Can not use a script because almost every picture are too specifics), because my client gave me about 15000 pictures with this error..
Then, I though about css border.
So, how can I make the border around the image to fill the inside of it ?
Is it possible ? Have you a better idea ?
EDIT
List of ideas which don't work for my case:
css attribute : border-style: inset (thank you anyway Abdul Basit)
css attribute : clip
Thank you in advance.
you can give inset border
border-style: inset;
can add a width that covers approx of all borders
border-width: 5px;
or you can use image as a border for all.
You can use box-shadow with inset to simulate a border. However the box-shadow does not work directly on the image element, because it will render behind.
You can solve this by making an .image-wrapper class with a box-shadow on.
And to make this shadow render in front of your image you just need to set the z-index to -1.
* { box-sizing: border-box; }
.img-wrapper {
box-shadow: inset 0 0 0 20px red; // Fake border on the inside
display: block;
margin: 50px auto;
width: 90%;
}
.img-wrapper img {
display: block;
position: relative;
width: 100%;
z-index: -1; // Render the image behind the box-shadow
}
Demo
I'm currently having a of problem with my Phonegap application on Playbook. It consists of a button and a circle that moves across the screen. The circle is re with a black border, but the playbook renders it as just a red square. Does anyone know of how to fix this? I've tried changing the image type and adding in a background color tag, but that didn't work.
You can use a simple div with css 3 properties to create a simple circle without images.
background: red;
width: 10em;
height: 10em;
-moz-border-radius: 5em;
-webkit-border-radius: 5em;
border: solid 1px #000;
border-radius: 5em;
I'm trying to make a highlighter on a simple line graph, and no matter what I do, the pointlabel keeps being above the tooltip and hides the content
anyone has an idea of how to make it happen?
You must modify the jqplot css file:
.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
border: 1px solid #cccccc;
font-size: 0.75em;
white-space: nowrap;
background: rgba(208,208,208,0.5);
padding: 1px;
z-index: 3;
}
Adding a z-index greater than the .jqplot-point-label has, must solve the problem.