I'm using tooltipster with custom styling. But I need the arrow to be bigger (30px in stead of default 7/8px). But when I create the custom css the arrows look great, but the position of the tooltip is wrong and overlaps the hotspot. (still based on the original 'small' arrow).
I styled the arrows by overriding the .tooltipster-arrow-left/right span with:
.tooltipster-arrow-left span {
border-top: 30px solid transparent !important;
border-bottom: 30px solid transparent !important;
border-left: 30px solid;
top: 50%;
margin-top: -30px;
right: -30px;
}
.tooltipster-arrow-right span {
border-top: 30px solid transparent !important;
border-bottom: 30px solid transparent !important;
border-right: 30px solid;
top: 50%;
margin-top: -30px;
left: -30px;
}
Is there a way to tell tooltipster what the size of the arrow will be?
Or can I set an offset?
I tried adding a margin to the .tooltipster-base, but this doesn't work well. It only works for either left positioned tooltip or right positioned tooltip and not for both.
Thanks for your help.
Use Tooltipster v4 (experimental) on the v4 branch of the project and you will be able to change the size of the arrow. Some of the packaged themes change the size of the arrow of the default style, see how it's done there.
I used this css style for my themed tooltipster to increase arrow size for top and bottom align
.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {
border-left: 12px solid transparent !important;
border-right: 12px solid transparent !important;
border-top: 12px solid;
bottom: -12px;
}
.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {
border-bottom: 12px solid;
border-left: 12px solid transparent !important;
border-right: 12px solid transparent !important;
top: -12px;
}
Related
I am wanting to create inline-block divs in CSS that have diagonal sides by having a top width of lets say 200px and a bottom width of 100px. Is this possible? If so, how? Or what would anyone suggest as a better alternative?
The box model of HTML implies that divs are always rectangles. However you can get a very decent result using some techniques. The simplest one is too use css to tint just the part of your background needed. You set the width to the wider side and then use the border-left right and bottom properties to adjust the shape. For example:
.myDiv {
border-bottom: 50px solid #555;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
You can see it working here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid
The w3school also have a very interesting page with a lot of shapes you can create with css. Check it here: https://www.w3schools.com/howto/howto_css_shapes.asp
Are you looking to create a trapezoid?
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
.trapezoid {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
<div class="trapezoid">
</div>
Open Layers map overlay popup does not take background color value.
Only one line of text is white.
The rest (2-4 lines) is transparent.
div.ol-popup {
display: -moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
background: white !important;
background-color: white !important;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
//https://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents
}
//on Click
var element = popup.getElement();
$(element).html(istr); // $(element).text(istr); //
$(element).addClass('ol-popup');
$(element).css('.ol-popup', 'background-color: white !important;');
popup.setPosition(coo);
putting your code up on Codepen and then sharing might help to better understand what the problem is, however from my understanding of your post, I think you want the text to be a certain color and it's not complying.
If that is the case,
add color: white; to you code, and then you might want to set the background color to something else, say background-color: red;
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
I have a fixed header on my site that I'm working on. So the content of my page flows under the header and the header stays fixed at the top of the page. I can't use the border-radius function in css to create my rounded corners that I want because the page content background color shows on the outside of my rounded corners. So I have implemented two rounded corner images, one for the left and one for the right. My problem is, the images move a total of 1px when I zoom. No matter how much I zoom, it only moves a total of 1px and for the life of me, I can't seem to figure out the problem. I'm going to post a link to my site and maybe somebody can go through the html and css and try to figure this out. I also put a link to download my VB project to look at in Visual Studio. Any help would be appreciated thanks a lot.
Link to Webpage
http://aspspider.info/speeddemon8406/Default.aspx
Link to download VB project
http://www1.datafilehost.com/d/46288e83
#header {
background-color: #ddd;
height: 125px;
left: 50%;
margin-left: -480px;
position: fixed;
width: 960px;
}
#header-top {
background-color: #fff;
border-left: 1px solid #aaa;
border-radius: 25px 25px 0 0;
border-right: 1px solid #aaa;
border-top: 1px solid #aaa;
height: 85px;
width: 958px;
}
#nav-wrapper {
background-color: #fff;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
width: 958px;
}
#nav {
background-color: Orange;
border-radius: 15px 15px 0 0;
height: 40px;
margin: 0 1px;
width: 956px;
}
#topleftcorner,#toprightcorner,#nav-corner-left,#nav-corner-right{display:none;}
The basic idea is that I put a #ddd color on #header (the page background color). I then use border-radius on #header-top to round the corners. I also apply a white background to #nav-wrapper. Then I just fix up the borders, and remove the unnecessary images.
As for your 1px off problem, it's a rounding error. I removed left:0;right:0 from #header and replaced it with left:50%;margin-left: -480px so that it doesn't happen.
I have inherited a legacy app for a rewrite and have run across a curious problem. There is tabular data displayed on the page where the title of the table is within a trapezoidal shape that resembles a manila envelope tab. At the bottom of such tables, there is usually a button row that is the same shape as the table title but rotated 180°. Currently, this effect is being pulled off by using a square image with a white triangle in one half on a transparent background as a background image in the corner of a rectangular block to achieve the look of a trapezoid. However, this technique is prone to flickering when the page is refreshed.
As an exercise, I have tried to see if I can replace this with a pure CSS technique. I found this link to different shapes in CSS and have emulated the trapezoid to look as I need. I am able to place the table title text within a trapezoid correctly. However, when I need the look of the 180° rotated trapezoid, I am unable to get the text to place within the shape. My code is included below and here is a jsFiddle showing what I have accomplished so far. I understand that the text shows below the rotated trapezoid because the height is set to 0 and I'm using border-top to build the shape. Is there anything I can do to get this to work correctly?
Please keep in mind that I need this to display in IE8 (and possibly also IE8 in compatibility mode -- IE7). Also, I'd like to keep additional HTML elements to a minimum because I want to keep this as semantic as possible. I know I can place a span inside the div and absolutely position that span so that it displays the text within the shape, but when I do that I have to manually set a width on the trapezoid and when the width can vary from button row to button row, I'd rather not go down that path.
Thanks.
HTML:
<div class="trap">Title Text</div>
<div class="trap180">Button Row</div>
CSS:
.trap {
color: black;
font: normal bold 13px Arial;
border-bottom: 27px solid #F00;
border-right: 27px solid transparent;
height: 0px;
float: left;
line-height: 27px;
padding: 0 4px;
}
.trap180 {
clear: both;
color: black;
font: normal bold 13px Arial;
border-top: 27px solid #F00;
border-left: 27px solid transparent;
height: 0px;
float: right;
margin: 20px 0 0 0;
line-height: 27px;
padding: 0px 4px 0;
}
It's possible with pseudo-elements. But I don't have access to those old browsers to test.
.trap, .trap180 {
color: black;
font: normal bold 13px Arial;
float: left;
line-height: 30px;
height: 30px;
padding: 0 4px;
background: salmon;
position: relative;
}
.trap180 {
float: right;
margin: 20px 0 0 0;
}
.trap:after,.trap180:after {
content: '';
position: absolute;
height: 0px;
width: 40px;
top: 0;
}
.trap:after {
right: -30px;
border-bottom: 30px solid salmon;
border-right: 30px solid transparent;
z-index: -10;
}
.trap180:after {
left: -30px;
border-top: 30px solid salmon;
border-left: 30px solid transparent;
z-index: -10;
}
Demo
Frankly, if you need to still support IE7, I would just use images or allow a little graceful degradation.