I work on SilverStripe 4 using leaflet and my cards present these gray lines:
I tried a lot of stuff on CSS and JS but no change. Can someone advise how to supress these gray lines?
The grey lines are caused by your site css adding a border to your images.
If you inspect the marker img element you will see there is some img css that adds a border. Something like the following:
img {
border: 4px solid #d7d7d7;
}
Here is a demo recreating the issue:
https://jsfiddle.net/5jbgyeq0/
A few options to fix the problem are:
Remove that css
Make the css more specific so it doesn't apply to the map images
Add some css to remove borders on map pane images
Here is an example of some css to remove borders on map pane images:
.leaflet-map-pane img {
border: none;
}
Related
I have a map, but it repeats. I would like it to stop repeating, and get only one map. How do I do this?
<MapContainer
className='h-[700px] w-[700px] float-right mr-10 mt-10'
center={[51.505, -0.09]} zoom={5} scrollWheelZoom={true}>
<TileLayer
noWrap={true}
url="/allmap.jpg"
/>
</MapContainer>
I see that you added in the URL a path to image url="/allmap.jpg". as it's an image you can inspect on the TileLayer after it's rendered. see on the right side the class which contains this image as background-image add to that class the following.
.tile-layer-class {
background-repeat: no-repeat;
background-size: cover;
}
UPDATE:
The problem was that the image was not shown. because there was a style from leaflet.css hide the image to show. you can override that style by using the below class.
.leaflet-container {
overflow: unset <= or by using !important as well if that didn't reflect.
}
The problem is not related to styling at all. what I figured out that the image is not only rendered just one time in the dom but it's gets rendered for 4 images tags. you can inspect the image and you will see that there're 4 img tags in the dom.
I think you will need to find out the reason for why there're 4 images rendered in the dom.
I tried to be honest to do my best. but I'm not familiar with Next.js
EDIT
This question is not a duplicate of How to get a leaflet map canvas to have a 100% height? as for the obvious reason, that you can see my map spanning the 100% height (compare the attribution on my picture being in the gray zone, while the container of the other question obviously ends before the blank zone. Also i can identify the size of my container spanning the 100% of the parent container in the developer tools. Just take a look at my css and and a very close look at the picture and maybe at leaftlet if you don't know how it works.)
Original
I use leaflet 1.5.1 in ionic 3.
After panning the map a bit, oftentimes the contents for gray parts are not being loaded (no network requests/traffic indicated in my browsers dev tools) and i am left with gray parts/stripes in the map as in the picture (the gray horizontal stripe below).
When i pan a lot further the missing map parts are loaded, but sometimes not (especially in iOS).
My map page's HTML using my map component (below)
<map style="height: 100%; width: 100%;">
The map component's HTML
<div id='map'></div>
The component's scss file
map {
#map{
height:100%;
width: 100%;
}
}
And here the component's typescript which creates the map
this.map = L.map('map', {
center: L.LatLng(center.latitude, center.longitude),
zoom: 13,
attribution: Attribution,
tap: false
});
//Add OSM Layer
L.tileLayer("https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png", { attribution: Attribution }).addTo(this.map);
this.map.setView([center.latitude, center.longitude], 14);
Any hints on what i'm doing wrong?
The solution was to trigger a resizing event via window.dispatchEvent(new Event('resize')) every time the user enters the tab page holding all the tabs including the map tab.
The map is reacting to this by adjusting itself to the "new" size.
We're using Umbraco v7.2.1 to serve what is supposed to be responsive content.
When you add an image from the media library to the tinymce editor, this is the html that is inserted by tinymce:
<img style="width: 500px; height:500px;"
src="/media/1007/jobs-block.jpg?width=500&height=500" alt="undefined" rel="1097" />
I really don't want ANY w x h in the tag or image src.
I have found a couple of posts regarding the tinyMce.config file and the validElements node - i removed the height and width things from the img thing in there but that had no effect.
If you open the Data Type for the Richtext editor in question there is a setting called "Maximum size for inserted images". This is by default set to 500 pixels.
If you set it to 0 it will disable any resizing.
I think you can have your cake and eat it too, no need to restrict editor re-sizing.
Adding the following properties to your img elements: max-width: 100%; height: auto !important; will allow content editors to re-size their images while also making them responsive.
I processed the output. I removed the height and wrap images by a div by javascript and I can fully customize it via css
I've got a div with a background image that includes both the normal and hover state, so when you mouse over, the bottom half of the background image is shown. I'm making a mobile version of the same site, and I'd like for only the first half of the image to be shown as the same div grows in height. However, as it is currently, when the div grows, I obviously see the second half of the background image. Any thoughts on how to hide the bottom half of the background image while still showing the top?
.community a{background: url(images/migtea.jpg) 0 0 no-repeat #FFF; display:block; float:left; margin:0 10px 10px 0; padding: 10px 10px 10px 151px;}
.community a:hover{background-position: 0 -131px;}
Well only problem is that "clip-path", "mask" and "filter" (no not the
IE "filter" but SVG "filter") only works for Firefox and Safari (yes
no Chrome). And they do it differently. Firefox needs an svg clippath
specified via an id eg:
.box { clip-path: url("roundedrect.svg#cp1"); }
while Safari just uses
the shape itself to create clippath from:
.box { clip-path: url("roundedrect.svg"); }
I have yet to discover a
way to do it in Opera and Chrome.
But for FF and Safari "cross browser" example i have created this:
http://tokimon.dk/testing/css-svg-test.html.
Otherwise maybe you can get something out of the background
manipulation in CSS 3: http://www.css3.info/preview/
Tokimon
(source: Showing only part of background image using CSS3)
Else, all you can do is either separate the background images, or put a container (div) with a solid background over it and "hide" the part you want to hide (but it's not a very elegant solution)!
Hope this helps!
Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?
capture of the problem, http://i.stack.imgur.com/pTLki.png
TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:
http://www.apinkdoor.com/show/
TravisO, you should get rid of the img styling in your css!
If you use only this:
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-color: #f00;
text-align: center;
}
</style>
it should render properly on your iPhone!
This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).
The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.
The following CSS, added to the problematic div with a specified background-image, is what fixed it for me. Anything less than 3px would still show light artifacts at some Safari zoom levels.
margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */
I found changing the background colour of the element with the 'grey border' around it worked for me.
Adding an initial-scale value to the viewport metatag resolved this issue for me.
<meta name="viewport" content="initial-scale=1.0">
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;