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
Related
I'm new at Vuejs and Nuxt. I'm using a library facebook-login-vuejs,
it works but I need little bit modifying like the button width adjustment.
I tried to give a "fbutton" class in this component :
<facebook-login
class="button fbbutton"
appId="102023513468xxx"
loginLabel="Facebook"
#login="fbOnLogin"
#logout="fbOnLogout"
></facebook-login>
and here my CSS :
.fbbutton button{
width: 100px;}
But nothing gonna change
here in this picture, the width doesn't change. Seems like set by facebook
this one also, the button still out of the container
Please any body can help me how to solve this, thanks
Checking the facebook-login-vuejs source code you clearly see "the html structure".
You need to override the "default" css rule.
.facebook-login button {
border: none;
color: #fff;
position: relative;
line-height: 34px;
min-width: 225px;
padding: 0 15px 0px 46px;
background-image: linear-gradient(#4c69ba, #3b55a0);
}
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;
}
I have no idea how to find the source of this element style codes. Such as at the right part of the Chrome Element Inspector Tool it shows this CSS code:
element.style {
position: absolute;
left: 0px;
top: 0px;
width: 486px;
height: 200px;
overflow: hidden;
-webkit-user-select: none;
background-color: #FFF;
border: 1px solid #ABABAB;
}
and at the left part there is this :
<div draggable="false" style="position: absolute; left: 0px; top: 0px; width: 486px; height: 200px; overflow: hidden; -webkit-user-select: none; background-color: white; border: 1px solid rgb(171, 171, 171);"></div>
I've looked into the modules files but I only see JavaScript and HTML files without the above line?
element.style just tells you that the styles are added to the element through the style attribute or JavaScript, but not via an external CSS file. You might check you JS files for these properies if you can't find the them in your markup.
That's because those styles are inline. Meaning they use the style attribute of an HTML tag to define its CSS properties. That CSS is not in a file or elsewhere. It is being defined "within" the element it is being applied to.
That specific line of HTML doesn't need to exist in any file for that div to exist in the DOM. For example, this Javascript would create a div just like that:
var div = document.createElement('div');
div.setAttribute('draggable', 'false');
div.style.position = 'absolute';
div.style.overflow = 'hidden';
div.style.cssText += 'left: 0px; top: 0px; width: 486px; height: 200px; -webkit-user-select: none; background-color: white; border: 1px solid rgb(171, 171, 171);';
document.body.appendChild(div);
Try searching your JS files for -webkit-user-select. That style property is used rarely enough that it should help you find the relevant section of Javascript code.
I just ran into a similar problem, and it turned out that AdBlocker (browser plug-in) was inserting in-line styles to hide images on my site that it thought were ads. Try disabling some or all of your browser plug-ins and see if they are interfering with the way your page is rendered.
This might not be exactly what you are looking for, but if you click on the small '+' icon on the top right of the inspector, it lets you add your styles to a css class that is already attached to your element. When yo do so, you will be able to click on the inspector-stylesheet link that appears on the right of the defined style. I think thats the closest you can get to defining some sort of temporary stylesheet that will contain all of your custom styles.
Thats what I do for quick testing. Set some classes in the html, then add more custom styles in the inspector side panel - because its easy to edit and/pick colors in there. Then open inspector-stylesheet and copy them all once I am done.
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.
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.