We Keep Coding

Remove kendo grid header borders

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

How to deal with non-rectangular sections of multiline inline text?

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.

How to remove the default border radius ,Select2

I'mm using https://select2.github.io/examples.html but I don't want the border radius.
How can I remove border radius to make the search box as well as the sliding area ?

You can add this css :
[class^='select2'] {
border-radius: 0px !important;
}
fiddle : http://jsfiddle.net/jEADR/1537/

Well I've just tried to do a trick basically in jquery as below and yea it works!!
Execute below 2 lines once you initialize your select2
$('.select2-selection').css('border-radius','0px')
$('.select2-container').children().css('border-radius','0px')

I really appreciate all the answers in this thread, as they helped me find a good solution.
I'm using Ruby on Rails 5.2.0, and I felt that any JQuery or JavaScript solutions felt a little hacky and after-the-fact especially since it should be doable in vanilla CSS - but I felt that using the CSS !important tag isn't best practice. Not trying to rag on anyone!
So, my CSS is as follows, and works well!
.select2-container--bootstrap .select2-selection{
border-radius: 0px;
}

Add this to your HTML Header:
<style type="text/css">
.select2-container {
box-sizing: border-box;
display: inline-block;
margin: 0;
position: relative;
vertical-align: middle;
}
.select2-container .select2-selection--single {
box-sizing: border-box;
cursor: pointer;
height: 28px;
user-select: none;
-webkit-user-select: none;
display: contents;
}
</style>

Open file select2.min.css located dist/css/select2.min.css. locate the border radius you wish to change. example change "border-radius:4px" to "border-radius:0px"
section of code from select2.min.css below
.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051;}
After a quick look through the CSS I can see 11 "border-radius:4px" change each one to "border-radius:0px" or just change the ones to the areas you wish. check CSS file.
Regards
Ben

How to set a tooltip width dynamically?

I want to create a tool-tip that will have flexible size according to the text length. For example, I have the following tool-tip:
Now, for this text, the width is OK (fixed in the css). But, when I have a very smaller string:
the tool-tip looks too big. My question is: how do I make the tool-tip flexible according to the text length? Is there a way to do this in the .css maybe? I work with d3.js, so an answer from this point of view would be acceptable too.
Thank you in advance for your answer!
EDIT: I use this tutorial in order to accomplish my goal, my code is something like that (not exactly, but close enough). It would be best to provide an answer based on that example, since my code is too big to post here.

You can do that with CSS, just use min-width and max-width together instead of width
Also you can simply remove width from your CSS or change it into width: auto;

the css for the tooltops looks like this (according to your link)
div.tooltip {
position: absolute;
text-align: center;
width: 60px; /* Width and Height are fixed */
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
Try removing the width property of the CSS. Above you can see that this is set to a fixed-width of 60 pixels.

This may be best CSS for this. It will adjust its size according to text inside it
div.tooltip{
position: absolute;
white-space: pre-line;
pointer-events: none;
visibility: visible;
background-color:White;
text-align: left;
padding: 5px 0;
display: block;
z-index: 1;
border: 0.5px solid black;
}

Anyone know how to get a browser status bar like the one in Digg.com?

If you have a look at digg.com, there is a persistent status bar (i.e. the Digg version number etc).
I have played with a few jQuery plugins, but they don't anchor fully to the bottom like that one in Digg.. I have tried to look at the CSS, but can't quite understand what bits are needed..
Any ideas/pointers very welcome?
<--- EDIT: SOLUTION --->
Thanks to the answer/comments below, I have ended up with the follow (just in case anyone else wants a basic working version to get going..):
The CSS is:
.footer-bar {
background: -webkit-gradient(linear,left top,left bottom,from(#F3F3F3),to(white));
background: -moz-linear-gradient(top,#F3F3F3,white);
background-color: white;
border-top: 1px solid #AAA;
bottom: 0;
color: #333;
font-size: .833333333333em;
font-family: Arial Narrow;
height: 12px;
padding: 5px 0;
position: fixed;
right: 0;
text-align: left;
width: 100%;
z-index: 5;
}
Obviously you can change the relevant bits, and then of course in my case I just have the following HTML:
<span class="footer-bar">Some text in the footer/status bar that stays there even when you scroll</span>
So there you are - thanks to all the others and of course the guys who originally created it.. CSS is still a bit of a mystery in some cases to me!

You want position: fixed on the element. No JavaScript.
Fixed positioning makes the element relevant to the viewport.