Some of my info pop-ups for my markers in Leaflet contain a lot of text (lots of linebreaks). This, in some cases, makes it go beyond the screen height, causing the user (me) to not be able to read all of it. Is there some way to make such "overflowing" pop-ups get a scrollbar? And also, naturally, keep it opened even when you remove the cursor from the marker so that it doesn't just disappear when I try to move the mouse cursor over to the scrollbar?
If not, how else would I solve this problem besides "cutting down on the info"?
In order to make your popup container scrollable, you need to set the maxHeight property when you instantiate the popup:
var popup = L.popup({maxHeight: 225}).setContent(content);
Here is a JSBin with a working example.
Related
I am developing my first Flutter app and have a question that I'm not finding an answer to:
I have a static fixed area at the bottom of my screen. Various buttons will be shown here depending on the page. I am using a stack to place this area on top of the rest of the screen, with the page content scrolling underneath my buttons.
The problem I am having is that the button(s) is/are sitting inside of a DecoratedBox, which in turn is sitting in front of my page content. This means that this box is blocking me from clicking on anything below the fixed area (like the button labelled "Programs" in the image)
I have come across the IgnorePointer and AbsorbPointer classes, which allows me to set the decorated box to ignore events. The problem here, however, is that it also causes the buttons in this fixed area to no longer react to events, as they are of course children of the box that I am applying the Igonre/AbsorbPointer classes to.
Is there a way to make the parent decorated box ignore events but have it's children react to them normally?
(blue area must ignore events, and the button must react to events)
Any advice would be greatly appreciated
I think this link should help you solve your problem. I haven't tried it.
Flutter: How to make a ListView transparent to pointer events (but not its non-transparent contents)?
I've been searching around (both on SO and around the web) to try to figure out how I can get the current height of the editor after the user has resized it. The TinyMCE 4.x docs don't show any kind of resizing event. When searching around I did come across the ResizeEditor event but that seems to apply only when objects within the editor are resized (which makes it seem like a poorly named event). Despite that, I tried to listen to the ResizeEditor event just to see and it does appear to fire whenever I resize the editor (though, I'm unsure if that's because the actual editor is resizing or because elements within the editor are getting resized, too. In any case, only the event object is passed in as an argument to the listener and I don't see any way to get the editor's current height (after the resize) from that event.
So, is there a way I can do this? To listen to the editor being resized and get its height?
thnx,
Christoph
You should be able to get the entire height of the editor (Menus, Toolbars, StatusBar, content area, etc) with code like this:
tinyMCE.activeEditor.getContainer().clientHeight
tinyMCE.activeEditor.getContainer().clientWidth
When you call tinyMCE.activeEditor.getContainer() you are getting the outermost div that contains all that makes up TinyMCE. From there it is just standard JavaScript to get the relevant dimensions of that element.
Here is an example: http://fiddle.tinymce.com/qigaab/18
I have a combo box that when I open it should show text like
However I get something like
with the scrollbar set to middle. Thing is sometimes for the same values it shows properly
and sometimes it shows from middle(for same value).
I want it to show properly like in the first image and I've tried a couple of things but with no succes.
itemSection.setHoverAlign(Alignment.LEFT);
itemSection.setTextAlign(Alignment.LEFT);
itemSection.setAlign(Alignment.LEFT);
... and other irelevand stuff ...
Any help is highly appreciated. Thanks alot!
If I am not getting wrong, You want to set your scrollbar at particular position. FOr that you need to ovverride the css of that and try to set scrollbar position to 0. So that your problem will get solved.
The problem with any kind of selections box is, that the boxes display and behave completely different across browsers. The older the browser the worse it handles long texts in selection boxes (some just truncate the text). I suggest to keep the displayed text as short as possible. That way you can avoid this problem.
If you really need long description, you can try to add a tooltip to every entry. Or use a different widget to make the select from, e.g. some custom widget in a separate dialog...
I'm using a GWT popup panel for displaying some information stacked up vertically in my jsp page. The problem I'm facing is that, once the popup panel is displayed, it doesn't hold on to its set position. I'm setting the position of the popup panel using setPopupPosition().
However, whenever the user scrolls the browser, the popup panel displayed moves up and down accordingly. It doesn't maintain its original position, where it was displayed.
I've tried setting the css property to (position: fixed;) applied on the popup panel, but it doesn't work. I read someplace, that in order for an html element to be displayed statically, we can use the position: fixed, and width: 100% to achieve that. But in my case, I can't set the width to 100%, since I need the popup panel to be displayed for a specific size.
Is there a way to achieve the fixed position of the popup panel in GWT? Would I have to listen to browser's scrollbar events in order to fix the position or can it be handled differently.
This is my piece of code, which I use to set the popup panel's position in GWT.
final PopupPanel simplePopup = new PopupPanel(false);
_beamMenu = simplePopup;
rendererDisplay(response, simplePopup,true);
int left =_beamIcon.getAbsoluteLeft() + _beamIcon.getOffsetWidth() - simplePopup.getOffsetWidth();
int top = _beamIcon.getAbsoluteTop() - simplePopup.getOffsetHeight();
simplePopup.setPopupPosition(left, top);
Any help in this regard will be highly appreciated.
Many thanks,
Asheesh
add a css with: position: fixed !important;
The default behavior of the PopupPanel should be enough. You actually want position: absolute and not fixed. (See http://www.quirksmode.org/css/position.html for an explanation of position types, but fixed is when it appears to float as you scroll).
The issue you are likely running into, is that when you show the PopupPanel, it gets removed from wherever it was in the DOM, and added to the RootPanel:
(This is from GWT 2.4 so your exact code may very)
public void show() {
if (showing) {
return;
} else if (isAttached()) {
// The popup is attached directly to another panel, so we need to remove
// it from its parent before showing it. This is a weird use case, but
// since PopupPanel is a Widget, its legal.
this.removeFromParent();
}
resizeAnimation.setState(true, false);
}
...
public void setState(boolean showing, boolean isUnloading) {
...
RootPanel.get().add(curPanel);
...
}
As a result, though the position: absolute should be enough, likely your other top level Widgets are also absolutely positioned. Therefore, when you scroll the page you are likely actually scrolling the contents of one of your other widgets, and the PopupPanel is stuck to the outer element, which does not have a large offset-height and is not being scrolled. This is why it appears to have the same behavior as if it were using fixed positioning (i.e. always XX pixels from the top and side of the browser window).
Go back and look at your page construction and fix the other Widgets and you should be fine. From my observations, the new LayoutPanels use position: absolute all over the place, so you may have to manually set it to relative.
I am making a vertical Menu using GWT MenuBar and selection of particular MenuItem shows content on the right, I am trying to make something similar to TabPanel, but with Tabs on left instead of being on top. Now, since I've got the Menu items and actions in place, I want to remove the effect of hovering over and changing color, and keep that menu item selected which was clicked last and whose content is loaded on the right.
I am open to any comments, if you have a better solution to implement this, using some other components(with-in) GWT, please drop in a comment with your suggestions, I'll really appreciate that.
Or if you can just tell me how can I disable this effect, of hovering and sticking to only that selection, That would be awesome too..
Thanks to everyone, taking time to read this and suggesting a solution.
It's all defined in the CSS of your GWT's theme (probably the default one), so it's a matter of overriding those styles - make sure it's not the other way around :) Inspect the code with a tool like Firebug to see what's exactly being set and change that.