I have a full screen map with a sibling div that appears "above" the map. The div is a full width 3 column flex, the left and right columns contain information panels (green in the diagram), the centre one is empty (pink in the diagram):
As far as the user is concerned, the pink column doesn't exist.
The problem I'm facing is that the center column is blocking drag events on the map, moving the mouse over it changes the pointer from a drag handle to a pointer.
It seems the standard solution for this is to add
pointer-events: none;
to the blocking div. I've tried this and it seems to make no difference, so I'm wondering if there's some Leaflet specific knowledge I'm lacking in regard to this.
Anyone got any ideas? Any suggestions welcome! :)
May be you can giving the center column a class.
for example:
class "center-column"
and put some css rule, like this:
.center-column {
position: relative;
z-index: -10;
}
Turns out it was due to a mistake I made. Since my map was full screen, I've given it's container the following styles:
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -5000;
It looks like reducing the z-index of the map to be underneath the panels was the wrong way to do it. Removing the z-index: -5000, and increasing the z-index of the panels resulted in the same display, but without the problem!
Related
When ag-grid is loaded after the initial page load it first renders with a 0px (or small number of px) width then it does its math and sets its width to the width of parent. It does so by adding inline styles to 2 of its html elements.
Is there a way to deactivate this behaviour or at least to set the default value to be something else then 0px (i.e.: like 100%)?
If I use the layoutInterval: -1 option the grid still starts with 0px (or small number of px) and stays like that.
So I currently have to use width: 100% !important (on .ag-bl-center) on these elements to prevent the grid from flickering when loading. I would prefer a clean solution if possible but didn't find anything in the docs.
<ag-grid-angular
style="height: 100%; width: 100%; overflow: hidden;"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rows"
>
</ag-grid-angular>
Many thanks for your time and help.
I want to set the left margin of a div by the position of the slider from the side-by-side plug in. It looks to be possible as the dividermove event built into the plug-in, but I haven't been able to figure out a method to feed that into the CSS for my div.
In the jsfiddle below, I basically want to dynamically set the left margin #year05 and #year15 using dividermove. I tried setting the #year05 class to inherit left from leaflet-sbs-divider but couldn't get it to work and I imagine is not the proper way to do it.
https://jsfiddle.net/x8r0pvg1/45/
If I understand correctly, you just want to position some text that follows the slider of Leaflet Side-by-Side plugin.
In that case, instead of trying to re-position your text / div on "dividermove" event, a very simple solution would be to append your div into the slider / divider itself, so that when the plugin adjusts the position of the latter, your div follows along automatically:
var yearsEl = document.getElementById('years'); // your div
document.querySelector('.leaflet-sbs-divider').appendChild(yearsEl);
Then you can center your div on the divider with your method of choice, e.g. using CSS:
#years {
width: 200px;
transform: translateX(-50%);
text-align: center;
}
Updated JSFiddle: https://jsfiddle.net/x8r0pvg1/47/
I have a GWT application in which I'd like to use a PopupPanel to display a lot of information.
I would like toe PopupPanel to take the rest of the screen (plus some padding), and for its contents to be scrollable.
If the amount of materials in the popup panel exceeds the space on the screen, the contents of the popup panel grow out of bounds, without scrollbars, and instead the primary windows' size increases (with scrollbars) to provide enough space for the popup.
My understanding is that the size of the PopupPanel depends on its contents.
What, then, is the simplest way to achieve this?
I have thought about placing a scrollpanel inside the PopupPanel, and settings its size to the available space at the time the popup is shown, but that seems like a hack.
What do you mean with "the rest of the screen?" I assume, you mean "all the screen"?
Let's look at it from a CSS perspective. We will call the outer container C, and your PopupPanel P. P will be positioned absolutely within C.
When using an absolutely positioned element like P, the way I usually do it, is to set something like top: 1em; right: 1em; bottom: 1em; left: 1em, so it takes up all the space of C, but leaves a 1em margin (you can then also add padding). Alternatively, you can use top: 0; left: 0; width: 100%; height: 100%; margin: 1em;.
Then set overflow: auto; on P, and you will have scrolling.
Now the only problem is: What if your outer container doesn't have a fixed height (e.g. when you have a HTML document that scrolls vertically)? The answer is: You can always create a helper container: Use position: fixed;, and set top: 0; right: 0; bottom: 0; left: 0. Then add your PopupPanel as a child to that new container. (Or alternatively, it may be possible to use fixed positioning for the popup panel itself - if GWT allows that.)
Off the top of my head, I can't say how exactly to best achieve this with a GWT PopupPanel, but the principle should be the same, because GWT layout is strongly CSS based.
Using Graph API I can get small, large, medium pictures. Or I can get small square picture.
But how can I get large square picture? Is there any service I can use?
Simple, I just found this out.
Example,
https://graph.facebook.com/friends_Id/picture?width=200&height=200
tada~
Oddly enough, Facebook itself doesn't use a bigger square image even though they show a bigger squared profile picture on the new timeline pictures. If you take a closer look they take a larger rectangular image and reposition it inside an HTML element as Michael proposed above.
I would expect that at some point the positioning data they use for this will be released via the API but I am not aware of that data being available yet. I've had times where this would have been helpful also and have thus far either just centered the image or used the top portion. Not ideal though since FB already allows for and tracks custom positioning of the most important "square" of the image via their "icon" creator.
There is no way to do this officially, here's a silly hack. The following code will make sure the image is no wider/taller than 120 pixels. If it is, then the image will overflow outside the element:
<div style="width: 120px; height: 120px; overflow: hidden; display: inline-block;">
<img src="{$image}" align="absmiddle" width=120 style="min-width: 120px; min-height: 120px;" />
</div>
You can specify the picture size you want with the type argument, which should be one of square (50x50), small (50 pixels wide, variable height), and large (about 200 pixels wide, variable height).
From the Graph API Reference. Those are the only three sizes available. You can use a bigger version of the 50x50 image but it'll obviously look dithered.
Nowadays Graph actually could return you square image of any size. They cache most common sizes (like 100x100, 128x128) and return the closest size by the following request (hover to see)
As the other answers already stated, in facebook the square pictures are only in 50x50 resolution.
A simple CSS hack does the trick though:
Query the large image, wrap the img-tag with a div and apply this CSS to the div:
img#facebook_img {
width: YOUR_WIDTH;
}
div#wrapper {
height: YOUR_HEIGHT;
overflow: hidden;
}
If YOUR_WIDTH and YOUR_HEIGHT are the same you get your square image and the ratio is preserved.
None of the answers worked perfectly for me, having come across profile pictures of various dimensions (some with a greater height than expected, some with a smaller height) which ended up either stretched or non-centered.
In the end I used a div element instead of an img and set the image through a background-image style attribute rather than through its src attribute.
CSS file:
.profile-pic {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 120px;
width: 120px;
border: solid 1px #ddd;
}
HTML:
<div style="background-image:url(https://graph.facebook.com/123/picture?width=120&height=120);" class="profile-pic"></div>
Replace 120px in the above (occurs twice in the CSS and twice in the HTML fragment) with your desired dimensions.
I'd like to create a text input with a clear button in a confined space. Like the iPhone, I want to place the button (a small x image) 'inside' the input at the far right so that a user can just click that to clear the value, instead of having to waste space beside the input.
Right now I'm using a background image on the input and an invisible span hovering over top. This accomplishes what I want, but there are problems: if the user types too much text just goes over the image, and IE doesn't seem to support elements above images. To solve the first problem I tried setting the margin of the input on the right, but that shrank the entire thing as opposed to keeping the input the same size and limiting the text to an area.
Do you know of any way I can create this compact input and clear button combo and have it look and function the same across all modern browsers?
Thanks!
If you want button on top of text:
<span><input><button>X</button></span>
span {display:inline-block; position:relative;}
button {position:absolute; right:0; top:0;}
If you want button not to interfere with the text:
span {border:2px inset gray; background:white; color:black;}
input {border:0; color:inherit; background:transparent;}
You could make a text input with right-marging: 0; and then put the image right next to it (inline), in a div/span with a background simulating a input extension. This way the input scrolls right before reaching the image, and you still get the image-in-input effect you desire.
I'm not testing this, but it would be something like this:
<input /><span><img /><span/>
input{margin-right: 0; border: 1px solid black; border-right: 0; background-color: white; color: black;}
span{background-image: url('xxx.png');width:20px;}
img{margin-left:0;border:1px solid black;border-left: 0;}
You could even extend the input without a background-image, just using plain css.