I used the leaflet draw and now I have a problem editing, the map and editing doesn't work with Google Chrome.I realized that this is a problem with CSS(direction right to left). How can I fix it now?
This because of the Tooltip. Your cursor is clicked on the tooltip and not on the layer.
Quick Fix:
Add following to the tooltip:
.leaflet-draw-tooltip{
margin-right: 10px;
}
Or you use the free Geoman library, it is working better with the RTL but not perfect. I will create a Issue on Geoman-Github and fix it.
Related
I'm using Vuetify to build an app that displays local points of interest. The app uses vue2-leaflet to display the maps. Unfortunately the map pokes out of navigation drawers, dialogs, and darkener screen overlays. Here are images demonstrating it:
How can I fix it?
In my opinion if z-index needs to be changed: it's better modifying the map itself - rather than Vuetify's css which can affect other components across the app.
In the component where leaflet map is registered add
<style lang="scss">
.vue2leaflet-map {
z-index: 1;
}
</style>
This works for me using Vuetify + Vue2-leaflet (latest for today's date).
Haven't noticed any issues with other Vuetify components so far.
This is a z-index issue. Try adding the following to your CSS:
.v-navigation-drawer--temporary {
z-index: 1001;
}
You can see a working example on Codepen. I think this is the minimum z-index value that will get you the overlay that you want, but you may have to play around with it until you get the right value.
NOTE: this solution only works for navigation drawers. You'll probably have to tweak the z-index values in custom CSS separately for other types of components like dialogs. Alternatively, you might be able to find where the z-index is set in the Leaflet CSS and modify that instead. I'm more familiar with Vuetify so that's what I tweaked.
How can I make the arrow on the pop-up box on a React-Leaftlet Popup point to the marker, instead of the bottom right of the box, as in the figure below?
Here is my code for the popup:
<Popup>
<span>
<p>Foo</p>
</span>
</Popup>
I am using the Popup.js code from the react-leaflet repository examples folder. In that class, I don't see an option for setting an offset.
Even just removing that downward pointing arrow might be good enough.
Thanks,
you can style the tip with leaflet-popup-tip css class. depending on your needs you can modify the position using css.
for example hiding the tip
.leaflet-popup-tip {
display:none;
}
I am using XFBML version of the Like button and it works great except for one thing, the comment box is being clipped by other elements on the page. I have researched this topic for a few days and came across several different solutions ranging from adjusting z-index to ensuring that any overflow: hidden are set to overflow: visible, none of which have resolved my issue.
There was also a post where you could hide the comment box altogether, but I feel like that would dilute the impact of a user liking something on my site, if they feel compelled to add a comment, that's potentially more click-throughs to my site.
My question is, is there any official FB documentation regarding this issue and how we, as developers, can work around it?
Finally figured it out. I am using CSS PIE to get rounded borders and drop shadows to work in IE browsers and for some reason I added z-index: 0 to the pie class. Upon removing the z-index from this class the comment popup worked as expected.
From:
.pie {
position: relative;
z-index: 0;
behavior: url(/css/vendor/pie/PIE.htc);
}
To:
.pie {
position: relative;
behavior: url(/css/vendor/pie/PIE.htc);
}
i was wondering on how to position a decorator panel that wraps around a table. i made a flextable and used the function 'setStyleName' that links to another css file. in the css file, i used absolute positioning with .position as the selector
.position
{
position:absolute;
right:0px;
}
however, every time i used the command position:absolute, the flextable will move but the decorator panel (the blue line) doesn't. it just becomes a blue dot. its probably wrapping around something that is 1px by 1px or something. help would be greatly appreciated as ive been super stuck. thanks!
Set position:absolute for the decorator panel instead of the table.
I don't know what are you to achieve, but maybe you should use "float: right" instead (if you want the panel to stick to the right side of the parent element)
I am happily using joomla but I can't find in any menu the function to delete generic article icon so I've changed it with a small one made of a single white pixel in png.
The effect is not lovely (you see a little space before the article title: www.aich-neuromed.it)...
How can I get rid of article icon in joomla?
Thanks!
It looks like you will need to change 2 lines of CSS in template.css
First, near line 384 romove the left padding for the headlines, you wont need it any more:
table.contentpaneopen td.contentheading {
padding-left: 34px;
}
You can just delete the whole thing.
Next, near line 376 you will need to remove the background image part of the CSS:
background: url(../images/contentheading_ico.png) left top no-repeat;
That should take care of it.