I am using the Leaflet map api and I downloaded and installed the 'leaflet-routing-machine' plugin just yesterday. The problem is the square window on the right has only white text so nothing can be read in the route directions. Has anyone else experienced this with this plugin?
How would you change it?
I tried re-linking the librairies and everything seems linked correctly.
I expect the routing instructions to appear in black font color instead of white is all, so that they can be read.
Thanks,
Les
Try adding this to your CSS:
.leaflet-right {
color: #000000;
}
You may also try this:
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
color: #000000;
}
Depending on what is overlaying the white text styles you might need to use !important in the given code.
Related
--offset-top: 88px, causes my "ion-content", to not display properly with the header, is there a way to removed this, i have tried "--offset-top: 0px important;" but its not working. Have anyone also experience this?[![enter image description here][1]][1]
Just remove the style attribute in the ion-content tags.
I want to modify the dark theme in Grafana so that it uses #000000 as the background colour.
I have seen "How to change default black color of Grafana", however those answers only tell you how to choose between the light and the dark themes.
I also see that How to Customize Your Grafana Theme recommends editing the _variables.dark.scss file, however I cannot see where this is located, as it is not in the public/sass directory as the post suggests.
Finally, I also see that _variables.dark.generated.scss tells you to Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template, however I cannot find that file either.
Could you point me in the right direction, please?
Boom Theme plugin worked for me with Grafana 6.7.1
Installation:
grafana-cli plugins install yesoreyeram-boomtheme-panel
service grafana-server restart
Go to certain Dashboard and add new Panel. Select "Boom Plugin".
Enter this under "Custom Style / CSS Override"
.panel-container {
background-color: #000000;
}
.dashboard-container {
background-color: #000000;
}
.navbar {
background-color: #000000;
}
The Boom Theme plugin documentation is here: https://github.com/yesoreyeram/yesoreyeram-boomtheme-panel/tree/master/docs Documentation no longer exists, see the GitHub readme file instead.
P.S. In case you are embedding Grafana's dashboard/panel, check for "allow_embedding = true" under "[security]" section in grafana.ini and use &kiosk parameter in a URL to avoid menus
I found the same sites as you and was frustrated at first. Fortunately I then found the Grafana plugin "Boom Theme Panel" (https://grafana.com/grafana/plugins/yesoreyeram-boomtheme-panel).
It allows you to define a background image or to override the background color under "Custom Style / CSS Override" with the following settings:
.main-view {
background-color: #000000;
}
I want to create a section with a background covering it in a mobile web page, so I was using the following CSS code:
#section1{
background: url("background1.png") auto 749px;
height: 749px;
}
The background is showing correctly on Android (Chrome, Firefox ...), but it is not showing at all on iPhone or iPad (Safari, Chrome iOS ...). I have tried to set these properties using jQuery when the DOM is ready, but no luck. I read that the size might be a problem, but the image is about 700kB (1124x749px) so it should accomplish the Safari Web Content Guide rules. Which is the problem?
My problem was that iOS doesn't support background-attachment: fixed. Removing that line made the image appear.
It looks like there are workarounds for a fixed background image though: How to replicate background-attachment fixed on iOS
There's a problem with your CSS rule:
Your using the shorthand notation in which the background-size-property comes after the background-position-property and it must be separated by a /.
What you're trying to do is to set the position, but it will fail as auto is not a valid value for it.
To get it to work in shorthand notation it has to look like this:
background: url([URL]) 0 0 / auto 749px;
Also note that there's a value called cover, which may be suitable and more flexible here:
background: url([URL]) 0 0 / cover;
The support for background-size in the shorthand notation is also not very broad, as it's supported in Firefox 18+, Chrome 21+, IE9+ and Opera. It is not supported in Safari at all. Regarding this, I would suggest to always use:
background: url("background1.png");
background-size: auto 749px; /* or cover */
Here are a few examples and a demo, to demonstrate that behavior. You'll see that Firefox for example shows every image except the fist one. Safari on the other hand shows only the last.
CSS
section {
width: 200px;
height: 100px;
border: 1px solid grey;
}
#section1 {
background: url(http://placehold.it/350x150) auto 100px;
}
#section2 {
background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}
#section3 {
background: url(http://placehold.it/350x150) 0 0 / cover;
}
#section4 {
background: url(http://placehold.it/350x150) 0 0;
background-size: cover;
}
Demo
Try before buy
Further reading
MDN CSS reference "background"
MDN CSS reference "background-size"
<'background-size'>
See background-size.
This property must be specified after background-position, separated with the '/' character.
I hope this will help someone in despair.
In my case, it was the size of the image that was too big, so the iPad just wasn't loading it (and it was right actually).
Diminishing its size and quality solved the loading issue.
The problem was not solved when I tried to use properly the background in shorthand. It works when I split the background property:
#section1{
background: url("background1.png");
background-size: auto 749px;
height: 749px;
}
Reduce the image size if nothing else works -- iOS doesn't like large image sizes on mobile and simply won't display the image if it's too large.
Great fundamentals by #insertusernamehere! No matter what I did I couldn't get my image to show up...until, I went back to basics. The image size was too large and iPhone didn't like loading an image of that size, over 700kbs. So, I reduced it to 32kb and we were in action.
Background image disappears on the IOS Browser (iPhone/iPad).
This is the code i used:
/*CSS*/
.bg-image {
background: url([URL]) center/cover no-repeat;
}
Alternatively, img src works on all browsers. It adds the Background Images acc to devices resolution.
<div class="download">
<picture>
<source srcset="/images/ios-device-mobile-v2.png" media="(max-width:450px)"/>
<source srcset="/images/ios-device-mobile-v2.png" media="(min-width: 600px)"/>
<img src="/images/ios-device.png" class="imgright">
</picture>
</div>
This piece of code is tested on iPhone Safari, Android Chrome and web Safari. Hopefully, This will help.
background-attachment: fixed; is not supported by IOS.
You can fix this by keeping the image in the div and positioning the div.
Hope this will work.
I had an negative text-indent that was throwing my background image off the page, so color:Transparent it is then.
I didn't see anyone specifically say this, but you have to define the width too. Makes since, since I set the background size to "contain" - it has to know what the container's dimensions are.
Once I did, the background rendered as expected.
#media only screen and (max-width:599px) {
[id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}
#media only screen and (max-width:479px) {
[id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}
Note: The background URL needs to be defined for both breakpoints so that it works for iPhone 5 (iOS7).
Add a background-color solved my problem
background-color: #F4F4F2;
I had to set input { opacity: 0; } for my input + span {} icon to show up.
I don't have a real solution/reason for my similar issue but my background-image PNG image simply wouldn't show up until I moved it to a new folder in my (Cordova) iPad app. I literally moved it from /css/images/sweden/myimage.png to /css/images/sv/myimage.png and it started working. The other odd thing is that ALL other images in the original folder work fine (as background-image). Super strange. If I find the true reason/fix I'll report back.
I tried resizing my background image, made it way too small to test the theory, but it still wouldn’t show on any browser on the iPad (and presumably an iPhone). Tried other solutions that are listed here – still no good. Then I noticed that the element had inherited display: table;. Added display: block; to override that and the background image now displays on all divices that I've tested it on.
It's an old issue, i would like to share my solution here. iOS bigger image than the dimension ignores rendering, please use appropriate use size, not the css height/width. The actual image should not be more than 150% larger in size than the rendering viewpoint.
I am trying to disable top inner shadow in input=text field which is applied by default by iPhone. Any ideas how to do this? tried to overwrite -webkit-box-shadow with no success.
alt text http://feedsmanagement.com/example.png
cheers
Have you tried using -webkit-appearance: none then applying a custom border like border: 1px solid black;
I can't try this out at this moment.
You can add a background image gradient to remove the inner shadow;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
from(rgb(255,255,255)),
to(rgb(255,255,255)));
I have had this same issue, wanting to display input text fields that are styled: WITHOUT shadows. My solution (works perfectly on iPad/ iPhone) make background gif that is completely transparent. Apply that style to your input field. My code was:
.textBox input {
border:none;
background:url(../images/bg_inputFix.gif);
}
-Jamin
I found that Jamin's answer was better for now. If I use the -webkit-appearance: none method instead, on the iPad it no longer applies my focus (pseudo-class) styles when a textarea/input is selected. It kind of ruins my form styling because textareas/inputs not in focus are significantly subdued.
I did the background gradient and it doesnt work, I also found a variation of it:
input[type='text']{
-webkit-border-radius: 0;
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,0)));
background-image:-webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0));
}
and that hasn't worked either :(
-webkit-appearance:caret;
Should remove just the inset shadows on your inputs
The iPhone is admittedly not the best platform for viewing code, but I'd like to optimize the mobile portion of my web site for the device as best I can. I'm having trouble getting code (Java code, in this case) to display properly.
I'm using <pre> tags, along with some CSS to render a nice little background for the code. This looks OK:
However if you scroll to see the rest of the code, you get this:
The text inside the <pre> is rendered properly, but the background color stops at the width of the device. I have tried this in the simulator, in a 3G device running 3.0, as well as in a 3G running 3.1-beta and they all behave this way.
It does render fine in Safari on the Mac; just not on the iPhone.
Here is the HTML:
<pre>
String input = readUserInput(); // assume defined elsewhere
int i;
try {
i = Integer.parseInt(input);
} catch (NumberFormatException exception) {
System.err.println("You entered an invalid integer: " + exception.getMessage());
}
</pre>
And the CSS:
pre {
font-weight: bold;
border: 2px solid green;
background: #669999;
padding: 5px;
}
What a curious bug! I'm able to reproduce it on a real live iPhone. I'm guessing it's caused by something about how iPhone processes the viewport settings. One thing you should clarify is what viewport setting you have in your page (via a meta tag). Your screenshot suggests it's something smaller than the default 980 pixel size. I tried tinkering with the viewport in various ways but couldn't stop this bug from occurring.
I have one workaround, which is to set a width parameter on the pre block. Ie:
<pre style="width: 50em;">
This is a bad solution for several reasons; it makes a fixed width block, it screws up your border, etc. But it does result in a coloured background block that's wider than the viewport. Maybe it's acceptable to you or maybe it's the basis of a real solution.
Have you tried setting a width or min-width for your pre block? Or perhaps trying a different position or display attribute for the block. Could try floating it or display: table. Just some ideas.
I'm not sure if pre accepts the overflow attribute but I'd try setting that, if not, wrap it in a div and do the background there, will give you slightly more freedom in your formatting options. (for instance if you wanted to have several blocks of code with "captions" underneath each part)