I have a React app with an instance of a Mapbox GL map inside a container that I am allowing my users to adjust the width and height of. On that map I've called addControl() to add a NavigationControl.
Is there a way to toggle the visibility of the NavigationControl based on the width / height of my container (which are being passed down to the container as props), much in the same way I can change the visibility of a layer by calling [setLayoutProperty(https://www.mapbox.com/mapbox-gl-js/api#map#setlayoutproperty)]?
I thought about adding and removing the control but per the documentation, the returned value of addControl() is the map itself, and I don't see any place where I can access the current controls being displayed.
The most straightforward option is just to manipulate the DOM.
$('#map .mapbox-ctrl-top-right button').hide()
If you want to make that happen automatically in response to the page being resized, use CSS:
#media only screen and (max-width: 600px) {
#map .mapbox-ctrl-top-right button {
display: none;
}
}
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.
I have a html panel and i want to add the html panel to browser screen hence i used rootPanel.get().add(htmlPanel);. But their is a extra space between the starting of the screen and the first widget in html panel (As in image). I tried with setting rootPanel.get().setheight("100%") and rootPanel.get().setsize("100%","100%") but it doesn't seem to work please help i want to remove the extra space and so that the widget starts from beginning.
This padding is added by GWT Bootstrap for its NavBar widget. See the note in the javadoc:
NOTE: We assume that most people will use the ResponsiveNavbar, so, we automatically add a padding-top: 50px in body.If you don't want this, you have to put a padding-top: 0px; manually in your document body tag.
See also https://github.com/gwtbootstrap/gwt-bootstrap/issues/120
I have a vertical panel that contains a set of buttons. When clicking on the base button, the panel expands and shows the set of buttons that are part of the vertical panel. Since this base button is towards the bottom of hte UI, I have made changes to the CSS in order to make the expanded buttons appear flowing upwards as opposed to downwards. Nevertheless, it seems as if the page expands downwards in the expanded state, and this leads to an addition of a scroll on the page, which is completely undesirable.
Is there a way to add buttons to a vertical panel that builds up (is inverted) as opposed to building down? I would really prefer not to have to add the buttons in a different order and then play with the CSS again if at all possible. Thank you for your tips.
VerticalPanel is the wrong widget for your layout. You should use a PopupPanel and a very simple CSS. When a user presses a button, you show this PopupPanel by calling .showRelativeTo() method. It will do all the calculations for you, and it will show it downward or upward depending on the browser window size and position of your button.
Within the PopupPanel you add a FlowPanel, and you add your buttons to this FlowPanel. Apply this style to the FlowPanel:
.menu {
width: 100px;
}
.menu input {
float: left;
margin-top: 10px;
width: 100px;
}
It is not easy to just invert the direction as from my understanding you want the button panel to float on top of the existing page. Webpages follows a flow structure and do not get stacked up unless you specify.
You may have to change your entire layout into an absolute panel, or use CSS (as you said you do not want to but this is definitely easier than the former one) so you can place the panel anywhere you want.
CSS:
.button-panel{
clip: rect(auto, auto, auto, auto);
position: absolute;
left: 100px;
top: 319px;
overflow: visible;
}
Java:
YourVerticalPanel.addStyleName("button-panel");
I need to make a alert box or dialog box when popup it lock the back screen like a Modal type alert box. but this time i need in fbjs. or fbml any one can help me please...
One way to cheat this is to give the div a css attribute of position: absolute and align your div on top of your content, with a z-index of something higher than everything else on your page (typically, people use something like 100). This becomes your modal container, and within it you'll just want to mimmic/copy the styles of a typical FB modal window.
Also, create another div at the top or bottom of your content, and give it css properties of position: absolute; width: 100%; height: 100%; background: #000; opacity: .5; z-index: 50 (make sure z-index is less than your modal container). This is your overlay, which blocks the content of the page from being interacted with until the user does something with your modal.
I would suggest going about the solution this way because like #dragonjet pointed out, FBML is deprecated, and you can't create new FBML applications anymore. Without FBML there is no FBJS.
So, I work on a Facebook FBML App. What I want is simple. Just have a div shows in the center of the page, and scroll with the page. i.e. always in the center.
It would be easy with normal JS. I just use the pageYOffset
However, in Facebook using FBJS, I am not sure what I should use. It doesn't have getPageYOffset().. and I tried getScrollTop().. it doesn't seem the right thing.
So, anyone knows how?
Have you ever seen something like this done on FB before? It sounds to me like FBJS is causing you the problem with its lack of API options.
One way to do it in normal JS is to get the position of the sliders, both Right and bottom, and also the whole screen size, and then determine where the center of the viewable window is based on the full frame size and the slider offsets.
All of those variables should be defined or be retrievable via javascript for you to grab and manipulate, and then it is simply updating the css values on a div to move the window to the correct location. you can then poll the state of the window sliders or monitor their event and retrieve their position as it is updated to recalculate the center of the window.
If FBJS has no facility to determine window size or slider position, then you have a much harder problem on your hands.
Use css
#myDiv {
/* Keep position fixed (scroll invariant) */
position: fixed;
/* Center */
left: 50%;
top: 50%;
/* Set width and margin to account for half of width */
width: 200px;
margin-left: -100px;
/* Set height and margin to account for half of height */
height: 100px;
margin-top: -50px;
}
The first 3 lines would center the upper left corner on the page.
The next 4 lines set the width, and then shift the div back and up so that the center is centered.
More info from w3Schools about position.
How about using Facebook's call myDiv.getAbsoluteTop()? This won't keep the object fixed, but it will at least start at the proper position.
Just one other idea -- you could generate an image, and set the image as the background, which I think you can keep fixed. It depends what you're after exactly though.