I'm using react-big-calendar (in my next.js project) and as you can see in the image above I'm displaying events on it and I have a bug that I can't understand why its happening.
When I press on the +3 more (which shows me all the events happening on the given day) then the dropdown menu that you can see on the top right image opens and then instantly closes and even if I change page it still gives me the same bug and it happens to all the dropdowns that I have on the website I'm working on.
Now one "hack" is to make the min height of the calendar bigger (I can make it 900px instead of the current 700px) so that all 4 events are shown directly instead of showing the +3 more but the problem with this "hack" is that imagine I have A LOT of events on a given day then I would need to set the min height to really really big number which is undesirable.
Note that the bug disappear if I reload the page but obviously I just can't force the user to reload every time he wants to see more events on a given day.
Which version of React-Big-Calendar are you using? Older versions of RBC used an anchor tag, for the 'more', that had an href="#". I could see that causing issues like this. Current version has replaced this code with a 'button' component styled to look like an anchor.
Related
With react-sortable-hoc I am unable to set the DragImage.
I have elements that take up a large amount of DOM space and it is hard to manage from a user experience perspective.
In my example, when the user starts to drag the items are collapsed, however the drag image is still full size, causing confusion.
I created a CodeSandbox link to demo my problem, however my actual production application takes up much more space.
UPDATE
updateBeforeSortStart instead of onSortStart is what I was looking for
Updated Updated CodeSandbox link
updateBeforeSortStart instead of onSortStart is what I was looking for
Updated Updated CodeSandbox link
How can I prevent the showing of the Next or Done buttons of the Android VKB in a Codename One app?
Currently, for my app, they are a mess: the next button of the VKB doesn't focus the next field, but the previous. After tons of trials, I didn't find a way to make them working correctly (but there are fine on iOS and on the Simulator). I also tried to override the Layout.overridesTabIndices(com.codename1.ui.Container) and Layout.getChildrenInTraversalOrder(com.codename1.ui.Container) methods in the Form, but nothing changed on Android.
I supposed two possible causes: the use of a Form inside a Form or, more probably, the fact that I replace all the TextFields and Pickers in the same Form (and other components). Maybe the fact that the inner Form is deeply changed results in a confusion for the Android mapping of the "next" button.
That's why my request: because I didn't find a way to make the "next" button useful, I'm asking how I can avoid that it's been shown.
Thank you
Nesting forms would probably mess with the focus traversal/tab order.
Normally you should be able to override public TabIterator getTabIterator(Component start) to return a blank iterator. I'd suggest doing the same for both the parent and child form to disable the "next" feature.
I am using AngularJS for a mobile web application and would like to get some "mobile-like" animations to make it look really sharp. My ideal goal would be animations similar to the iPhone's Gmail application, which incorporates lots of animations, like pages sliding from left/right/bottom. And the menu bar fades in/out simultaneously.
I think applying multiple animations at once would require more than one ng-view, which isn't supported at the moment, so I'll hold off on that.
Right now, I just want to be able to make a simple slide-left and slide-right animation similar to how many mobile apps work when you go back and forth between pages. I'd want to have a Back button in my application and somehow be able to specify that this animation should be right-to-left. And a Forward button that I can say has an animation of left-to-right, etc.
This page has exactly what I want (the second demo where the pages slide both left AND right):
http://blog.revolunet.com/blog/2013/04/30/angularjs-animations-mobile-applications/
However, this demo is using the deprecated ng-animate command. I haven't been able to convert it.
I attempted to make this using the new AngularJS way of animating. I THINK the issue I'm running into is that when I change routes, I have two ng-view's at the same time and the "old" one still has the animation applied to it, so it looks weird.
Here is my attempt: http://plnkr.co/edit/Xa6Mvbfmux4BAISj9tJb?p=preview
Try pressing Run/Stop each time. I like how when you first run it and press B, both pages slide out together. But then the 2nd time when you press A, one page maintains the slide-right animation while the other does the slide-left, which I don't like. I also tried just removing the ng-leave CSS classes, but that adds some weird issues as well.
How can I update this code to make standard left-to-right and right-to-left sliding animations work?
Bonus: How can I structure the code to easily specify how I want each route/view change to animate? (Example: A-to-B = Left/Right, B-to-A = Right/Left)
We have automation processes that have been scraping a website for months. Recently we discovered that our scraper isn't working.
Turns out, the website has been changed so that they have a table with 9 columns placed inside a frame. However, either the frame or table is styled improperly and only the first 6 columns are on the screen at 100% zoom because the table is too big. When you zoom out to about 50%, the rest of the columns manage to fit in the view.
Unfortunately, there is a button on the very last column that I need to click, but Selenium doesn't like it and says the element is not in view at 100% zoom.
When I use the following to check whether it's in view or not
while (!elmt.isDisplayed()) {
// wait for it
}
and manually zoom the page out so that the column with the button comes into view, it then successfully clicks the button.
How can I zoom the page out?
Yes I had the similar issue while testing in Safari.
The work around is to zoom out the page programmatically before you perform any operation on that page.
With help of js you can do this:
document.body.style.zoom = "30%"
Or whatever value is required. In selenium make use of javascript engine to execute this script.
This worked work around perfectly worked for me.
I am trying to build an app using Extjs 4.1. In general: it is a viewport with a tree panel on the west and a center panel that it is actually a tab-holder panel. When a user clicks on a tree node a tab is populating the center view. I had set an attribute in the tree panel that after selecting a node it gets deselected (deselectAll). The reason for this is that the user can open many tabs from different places (e.g. within each tab). But, when I set the above attribute it is producing an error (the “data” is undefined). The data that is undefined is the data related to the tree node. So, the question concerning selection model:
How can I address this problem (a solution may be to select the fist node, but I don’t want it)?
As for the history utility, I need to implement browser back button. Especially I want to disable browser’s refresh button. If user opens let’s say 15 tabs and accidentally click on browser refresh or “F5” he/she will lose everything. I had tried many things but with no luck. I am unable to understand “Ext history util”. So,
Is there any good example out there?
Could anybody guide me on how to do it?
Notice that the application is built respecting the new “MVC” architecture.
Stopping the refresh event is pretty easy - providing that your page has the focus. E.g.:
Ext.getDoc().on('keypress', function(event) {
if (event.getCharCode() == event.F5) {
event.stopEvent();
console.log('you stopped the refresh event');
}
});
If your page doesn't have the focus then there is nothing that can be done -- but most of the time your page loses the focus when a different browser tab is opened so F5 would be refreshing that one instead anyway.
I'm still trying to wrap my wits around the first part of your question, but I thought I would share that.
EDIT
Instead of trying to stop the default browser behavior (something which you can only do on a very limited basis), you should look into state management. ExtJS supports it on many components. Here is the ExtJS example.
Also here is the example of controlling browser history.