I know there are ways to draw borders around the entire legend in Highcharts. How to draw a border around each legend item in Highcharts 5.0?
This seems trickier than I first thought. One thing that I think is a potential solution is adding useHTML: true to the legend and then styling using CSS and Pseudo-elements.
With useHTML you could then style it using CSS like this:
.highcharts-legend-item {
padding: 1em;
}
.highcharts-legend-item > span {
position: relative;
overflow: visible!important;
}
.highcharts-legend-item > span:after {
content: "";
position: absolute;
width: 110%;
border: 2px solid #ddd;
padding: 1em 1em 0.5em;
top: -2px;
left: -25px;
border-radius: 10px;
}
Please see this JS Fiddle for an example.
I'm sure you'll need to adjust the styling but it should be a start.
Hope this helps.
Yes. Highcharts has a piece of documentation titled Style by CSS which details how to do this.
By the look if it, you'll want to do something like:
.highcharts-legend-item {
border: 1px solid tomato;
}
Related
How can I remove the arrow appear in frone of tags input as shown in image
demo here: https://colorlib.com/polygon/gentelella/form.html
I see that on other page here, that the Daily active users '.tag' has the arrow that's been bothering you.
I suggest that you extend the .tag class and add the pseudo code for the arrow
ul{
&.timeline{
li{
.tag{
#extend .tag;
&:after{
/* add code for arrow here */
}
}
}
}
}
or
simply hide the tag by selecting a specific parent like this:
.tagsinput .tag:after {
display: none;
}
By using the inspector / developer console on your browser you can see that the arrow is generated by:
.tag:after {
content: " ";
height: 30px;
width: 0;
position: absolute;
left: 100%;
top: 0;
margin: 0;
pointer-events: none;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 11px solid #1ABB9C
}
Inspector claims this is part of custom.min.css beginning at line 2,922.
This arrow was probably supposed to appear directly adjacent to the actual tag, but it looks like position:relative is missing from key elements as well as other aspects of .tag being re-defined throughout the CSS.
I have a series of CSS hexagons. I would like to apply CSS scale transform for different viewport widths, though gaps are appearing within my hexagon shapes.
This problem is most evident on Firefox at any scale value. It also appears in Chrome if scaled to non-integer values. Firefox additionally shows baffling horizontal lines in the :before and :after pseudo elements, though these lines are in the centre of a border and not at the edge of any shape.
Snippets
A simplified version of my markup and styles is below, and also on JS Fiddle.
HTML:
<div class="scale">
<div class="hex"></div>
</div>
Styles:
.scale {
margin: 8em auto;
text-align: center;
-webkit-transform:scale(2.5, 2.5);
-moz-transform:scale(2.5, 2.5);
-ms-transform:scale(2.5, 2.5);
-o-transform:scale(2.5, 2.5);
transform:scale(2.5, 2.5);
}
.hex {
position: relative;
display: inline-block;
margin: 0 30px;
width: 60px;
height: 104px;
background-color: #000;
&:before, &:after {
position: absolute;
width: 0;
border: 1px solid transparent;
border-width: (52px) (30px);
content: "";
}
&:before {
border-right-color: #000;
right: 100%;
}
&:after {
border-left-color: #000;
left: 100%;
}
}
Screenshots (Linux Mint)
Chrome: scaled at x2 (no gaps evident at integer values)
Firefox: scaled at x2 (gaps, plus horizontal lines)
Is there help?
My guess is that these lines are appearing because of some numerical rounding, but I really am out of ideas. Is it possible to fix this? Is there another approach I could use for this scaling? Thanks in advance for any responses.
I am a bigger fan of using top/bottom methods of creating hexagons, because they're just very simple. Check out the one I threw in your jsfiddle.
Just fix up the actual measurements and the method I used should get rid of your problem.
.hexagon{
margin-left: 8em;
height: 4em;
width: 4em;
-webkit-transform:scale(2.5, 2.5);
-moz-transform:scale(2.5, 2.5);
-ms-transform:scale(2.5, 2.5);
-o-transform:scale(2.5, 2.5);
transform:scale(2.5, 2.5);
position: relative;
}
.top{
top: 2em;
border-bottom: 2em solid black;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
}
.bottom{
top: 4em;
border-top: 2em solid black;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
}
It seems to be a scaling bug as the gaps seem to stay when the item is transformed by other means, such as rotation.
The best way I can get around it is by adding the element to the .hex class instead of the .scale class, and repositioning. I hope this helps to lead you toward a better solution.
Good luck!
Is it possible to somehow create the following in CSS? (See attached image)
What i want to achieve is to be able to change the background-color of the bubble with CSS.
One solution would be to save the background bubble in a bunch of different colors and depending on the color chosen display the correct background image. However this would not be as dynamic as i wish.
Any ideas here?
Something like this was done over at CSS Tricks using pseudo-elements. The only limitation I can think of or foresee is the border that goes around the object... CSS Round-out borders
Using the :after and :before pseudo elements I was able to take the same concept and apply it to create your shape. Again... The only catch is the border. Also... it requires the background behind it to be solid, so that you can mimic the background color... No patterns or transparency here. Try changing the colors of the :after and :before elements and you'll see how its done.
JSFiddle Example
<div class="bubble">
<span>Some Text</span>
</div>
body { background: #999;}
.bubble {
position: relative;
width: 150px;
height: 60px;
border-radius: 10px 10px 0 10px;
border: 1px solid #fff;
background: #444;
}
.bubble:before {
content: " ";
position: absolute;
width: 30px;
height: 30px;
bottom: 0;
right: -30px;
background: #444;
}
.bubble:after {
content: " ";
position: absolute;
width: 60px;
height: 60px;
bottom: 0;
right: -60px;
background: #999;
border-radius: 100%;
}
The other options are nice css approaches but with the border on a shape like that will not be possible with just css.
In my approach I am going to use an svg image.
This is a path in the image and as you can see classes and ids are possible to use on an svg image.
<path class="bubBg" fill="#7C7C7C"
Here is a JSFIDDLE you can play around with.
(currently I believe this is the best option to have that exact design but Michael's answer is pretty good)
Here's what I did: Not exactly the same bubble but similiar, Check it out
Fiddle: http://jsfiddle.net/zD3bV/1/
CSS
#speech-bubble {
width: 120px;
height: 80px;
background: purple;
top: 2px;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid purple;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}
#talk-bubble {
width:120px;
height:80px;
background:blue;
position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#talk-bubble:before {
content:"";
position:absolute;
right:100%;
top:26px;
width:0;
height:0;
border-top:13px solid transparent;
border-right:26px solid blue;
border-bottom:13px solid transparent;
}
Also, search for css shapes you'll more likely to get the best results and then you can modify them according to your needs
I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
But the width property of the h2 element is still 238px, no matters where the line breaks are.
I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
Thanks
I think this is what you need:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
h2 span {
position: relative;
padding-bottom: 5px;
}
h2 span::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
content: ""
}
Working demo in jsFiddle
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2. This method would allow the control of the actual line though rather than setting display: inline if needed
This works on Chrome.
h2 {
width: fit-content;
}
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).
Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert   to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Maybe display: inline-block; Or display: inline; is what you need?
Why not try:
text-decoration:underline
?
EDIT
Just make a span around "OPPORTUNITÉS" with the underline.
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
text-decoration: underline;
text-underline-position: under;
All you can do is put your h2 element text into span like this:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
and in css remove border-bottom from .zone_33 h2 {} and put it like this:
.zone_33 h2 span{ border-bottom: 1px solid grey;}
by this border-bottom will come under full text.
Try this, (I think it will help you)
.heading {
position: relative;
color: $gray-light;
font-weight: 700;
bottom: 5px;
padding-bottom: 5px;
display:inline-block;
}
.heading::after {
position: absolute;
display:inline-block;
border: 1px solid $brand-primary !important;
bottom: -1px;
content: "";
height: 2px;
left: 0;
width: 100%;
}
You could put a border-bottom and change the width of your h2 so that the border length matches your h2 length. Adjust the width to the width of your h2, taking into consideration it's font-size. Then add a padding-bottom to your h2 and set it to your liking.
<h2>Cats</h2>
h2{
border-bottom: 5px solid black;
font-size: 16px;
padding-bottom: 5px;
width: 64px;
}
I'm trying to override a CSS class which is used to display an arrow. I want to make the arrow disappear. This class is found in the Liferay theme.
this CSS class:
.v-tabsheet-tabitem-selected:after {
border: 10px solid;
border-bottom-width: 0;
border-color: #333 transparent transparent;
bottom: -6px;
content: '-';
display: block;
height: 0;
left: 50%;
margin-left: -10px;
position: absolute;
text-indent: -9999px;
width: 0;
}
I did:
.v-tabsheet-tabitem-selected:after{
content: none;
}
It does not seem to work, is there any other way?
It looks like the arrow is being drawn with CSS borders, so try overriding it with this:
.v-tabsheet-tabitem-selected:after {border: none;}
For the CSS you have provided, your cursor position should not be relevant. That means you either have a :hover selector applying elsewhere or JavaScript that applies based on mouse events.