When upgrading to OpenLayers 6.5, the shift-zoom rectangular border does not show anymore. The zoom function works in itself, but the border is gone. Any ideas?
The "border" is defined in the ol.css stylesheet file found in the css/ directory under openlayers. So be sure that your html includes that with something like:
<link rel="stylesheet" href="/path/to/css/ol.css" type="text/css">
or define the sytle in-line like:
<style>
.ol-box {
box-sizing: border-box;
border-radius: 2px;
border: 2px solid blue;
}
</style>
Related
I have a page with elements on it, a ton of them, and one of them is inside a couple divs. the one i wasnt to target has certain styles i want attributed to it, when i style inline on the page itself, the styles work, but when i link to the stylesheet it doesnt change the style to how i want it. im not sure why, thanks for your help.
Here is my inline code:
profile_pic_box {
float:left;
border:#999 2px solid;
width:100px;
height:100px;
margin:0px 0px 0px 0px;
overflow-y:hidden;
}
This works fine when i have it on the page that the element is contained on, but when I remove the code and place it on a style sheet, which is linked correctly, it doesn't work. Here is what I have in a stylesheet:
style.css:
#profile_pic_box {
float:left;
border:#999 2px solid;
width:100px;
height:100px;
margin:0px 0px 0px 0px;
overflow-y:hidden;
}
Here is some HTML:
<div id="profile_pic_box">
And here is the stylesheet link, which does work.
<link rel="stylesheet" href="style/style.css">
Probably one of the following:
Your browser is caching the old style.css file. Try disabling cache in developer tools or open the website in an incognito tab.
You're adding your CSS before another CSS that's possibly overwriting it. In-line works because it is at an higher level.
Not sure if you're running it on a server or not, but you also could try adding a slash at the beginning of your href like this:
href="/style/style.css"
#profile_pic_box {
float:left;
border:#999 2px solid;
width:100px;
height:100px;
margin:0px 0px 0px 0px;
overflow-y:hidden;
}
<link rel="stylesheet" href="style/style.css">
<div id="profile_pic_box">
I have some styles in my custom CSS to override bootstrap CSS, but it seems they can not override bootstrap CSS. When I checked the styles using chrome developer mode I can only see bootstrap styles being applied!
Here is a screen shot of my chrome bootstrap:
Here is what I have in my css:
.panel-default>.panel-heading {
color: #333;
background-color: #f5f5f5;
border: 10px solid #b03636;
}
.panel-heading {
padding: 10px 15px !important;
border: 10px solid transparent !important;
border-top-left-radius: 3px !important;
border-top-right-radius: 3px !important;
}
Am I missing anything?
Thanks,
One thing you should check first: Go through all the styles and see whether the ones in your custom CSS are found at all. If so, they'll likely be crossed out to imply that they were overwritten by the bootstrap styles. If not though, that means that for one reason or another it's not finding your styles at all, and that's where the problem lies.
If they're definitely being overwritten, I might also recommend making sure that the custom CSS is being called after the bootstrap files.
Link your CSS file to HTML properly and import after bootstrap CSS like below so, you no need to write !important for all things to overnight.
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
I think the problem is that your css file is properly linked or not linked at all to your HTML page. You should check that first
First make sure your custom CSS is loaded after the Bootstrap CSS file and if it does not help, Use !important attribute with custom CSS to force the overriding.
I am making a django web application where I have base.html and base_bootstrap.html files. My base_bootstrap.html file contains the following two lines to use bootstrap CSS:
<!-- Bootstrap core CSS -->
<link href="http://v4-alpha.getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
.
.
.
<!-- Custom styles for this template -->
<link href="http://v4-alpha.getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">
Is there a way for me to modify the following css in order to change the #999 into a # without creating a separate css file?
pre {
border: 1px solid #999;
page-break-inside: avoid
}
You can always override external css by using either internal css on the page or the inline css specifically to the HTML element.
Example:
.card
{
margin:5px;
padding:25px;
border: 1px solid #999;
display:inline-block;
width:50px;
background:#ddd;
}
.card{
border:2px solid #f00;
}
<div class="card"></div>
You can also use !important to override any css with the HTML element.
Example: border:2px solid black !important;
DEMO
Refer to: https://css-tricks.com/specifics-on-css-specificity/
Use Internal CSS
You can override the color code by declaring it again in your HTML page again.
pre {
border: 1px solid #999;
page-break-inside: avoid
}
pre {
border-color:#878;
}
Your pre tag have now a border-color at #878.
But, if you can change the nativ color code, change him.
Hope this will help you.
You can download the the SASS version and modify the parts you want or include a custom file with modifications / extra styles you want, then rebuild bootstrap with the gem installed or create your own Grunt/Gulp script to build the SASS to CSS.
https://github.com/twbs/bootstrap-sass
BS is originally built in LESS which would work too.
I am running into this issue where the theme I'm trying to integrate has a CSS wildcard selector that is applied to the entire site. The problem is it breaks my previous form elements.
Please see this image for reference of the problem:
Bad:
http://i.imgur.com/mKKrbpD.png
This is what I would like it to look like:
Good:
http://i.imgur.com/sj4sBtN.png
To achieve the good look, I change the 'box-sizing' to content-box. The problem is the wildcard is continuously being applied to the entire page so it supersedes it, I believe.
Question #1: Can someone please show me how to apply this content-box to ONLY those two boxes on only one page?
Question #2: Kind of on point 1 - but this must only apply to those two boxes as the header and the entire rest of the site rely on that box-sizing: border-box
HERE IS A LIVE EXAMPLE:
failed
Problematic section, I think...
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Please take a gander at the live example and let me know exactly what to change to fix this issue. You can see all the things I've tried in there and none have worked yet. You will have my eternal gratitude and my blade in battle if you can help solve this.
Have a look the class .CollapsiblePanelTab Where Background img width is 660px and you've define the width:647px. Make sure the width is eqaul to background image width.
Here is the CSS code
.CollapsiblePanelTab {
font: normal 21px Arial;
text-transform:uppercase;
background-color: #fff;
border-bottom: solid 0px #CCC;
height: 40px;
margin: 10px 0 0;
padding-left: 10px;
padding-top: 13px;
width: 660px; /*change it from 647 to 660px*/
-moz-user-select: none;
-khtml-user-select: none;
background-image: url("http://i.imgur.com/6wGRmmk.png");
background-repeat: no-repeat;
color: #000000;
}
Side Note: you are using -khtml-user-select: none; thats were used for very older version. To target the latest version of chrome and safari you must use -webkit prefix.
Read More at MDN.
<style type="text/css">
.pnl_1
{
width :60%;
height :50px;
border : 1px solid blue;
border-radius :5px;
}
</style>
<form id="form1" runat="server">
<asp:Panel ID="pnl_id" runat="server" CssClass ="pnl_1" >
</asp:Panel>
</form>
I want to get rid of outlines in Firefox, however they're pointed more deeply than my style.css in bootstrap3.css so I need to update them all.
I've tried the following:
<link href="{{ URL::to('home_assets/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ URL::to('home_assets/css/style.css') }}" rel="stylesheet" media="screen">
Example below didn't work because Bootstrap 3 points more deeply.
//bootstrap
a.carousel-control
{
outline: thin dotted;
}
//my css
body {
outline: none !important;
}
Result: a.carousel-control has thin dotted outline.
I need to do something like to remote outline. (and it works)
a.carousel-control
{
outline: none;
}
The problem is, then I need to point everything in markup deeply so it overrides bootstrap. I need to encapsulate most of Bootstrap's css.
Is there a functionality like this in CSS, so I can manage them from a single place?
body {
outline: none !override-previous; //pseudo
}
Any hacks or tricks to manage them in a single place? (no javascript, css expressions are okay though)
Ps. I need this for my dev environment because I keep outlines as default on production to help blind users. They're annoying for me, though.
You can try
*{
outline: none !important;
}
and please add this after your bootstrap.css file so that it'll override.