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;
}
Related
I'm working on a PWA for a chromebook(schools) and I'm wondering what the most best way to have dynamic sizing of dialog boxes.
I have methods set up for each HTML element that we can use and pass the values we need for this (input/checkbox/label) etc - so I have multiple dialog boxes with the same classes but required different sizing.
I have some basic stuff like
.modal {
min-width: 390px;
max-width: 600px;
display: none; /* Hidden by default */
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 0px;
border: 1px solid #888;
width: 40%; /* Could be more or less, depending on screen size */
border-radius: 6px;
font-size: 14px;
}
I also thought of adding a width value to send when creating the dialogs but I don't like that solution. Something that gets the width of the largest element and adds 10px padding to that or something?
Is there something that I'm missing that could be an easy solution? (It's also ideally vanilla javascript)
If I've understood your question correctly, you are trying to create a class for modal popup windows that will be a different size depending on the content inside, and that you can toggle visibility on using Javascript.
Perhaps too simple of a solution, but have you considered using padding as a replacement for the min-width value in your css?
Something like margin: 0; padding: 0.5vw 195px; /* instead of min width, use padding */
This will set the width of the element to 390px(195px padding-left, 195px padding-right) + width of html content, (see codepen below).
https://codepen.io/KXNG420/pen/eYdvZgN
As for setting a max-width you could add in a quick check when you are toggling the visibility of the modal window.
Hopefully this at least helps a little bit.
I have a start button in my js game. I just noticed that I can be slightly to the right of it, and the cursor is a pointer. My css:
#start{
position: absolute;
top: 130px;
left: 195px;
height: 80px;
width:320px;
background-color: red;
cursor: pointer;
border: 2px solid yellow;
border-radius: 20px;
}
The button is just a div. After setting the button to a variable named "start", I use the following js to make it change background on hover:
start.onmouseover=function(){
this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
this.style.backgroundColor="red";
}
I am able to trigger the hover by being outside of the button. Why is that? Here is the game where the issue occurs. The button is the first thing you see. This occurs with some other buttons as well. I know that I can use css hover, but am curious to find out what's wrong with this.
The reason why it is acting this way can be found in your css for #new:
#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;
You should note that this child component is inheriting the width of the parent div which you set to have a width of 320px. You can verify this by inspecting the parent and child and looking at the computed styles:
Parent:
Child:
Then in your css for #new, you MOVED the position of the element to the right by 48px:
left: 48px;
This element still has a width of 320px as shown in chrome developer tools.
I bet that little blue bit that has overflowed is exactly 48px and where you are experiencing that unwanted behavior =) So, I hope you now understand what is going on with your css!
You can even verify this by setting the width of the child to be:
width: calc(100% - 48px);
You should find now that there is no more overflow:
The browser is actually taking the hover-detection from this area here.
http://i.imgur.com/WPYi7gj.png
You can probably see that it uses the text as the start of the hover area, and that there's a lot of padding on the right of the element. You'll want to remove this padding using CSS.
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
I'm getting nowhere with this. I have an element, which is using a :before pseudo selector.
CSS is like this:
.initHandler:before {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
height: 110%;
z-index: 999999;
background-color: white; /*background:white url(../images/ajax-loader.gif) no-repeat center center;*/
content: "initializing...";
text-align: center;
font-color: #ccc;
line-height: 150px;
vertical-align: bottom;
}
This gives me a white background for my app, which is loading "behind the curtain". On iOS I'm using a startup image, which I'm setting in the page head before jquery and jquerymobile are loaded.
I now want to change the background of my initHaendler:before element to the determined iOS splashscreen.
However I need to this in pure javascript and I have no idea how to select a class/pseudoelement to set a css value.
Can someone help out?
Thanks!
Setting CSS pseudo-class rules from JavaScript seems to suggest that you can't and offers a workaround by appending a stylesheet to the document. I'm unsure if it'd work on iOS but it's worth a shot
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.