I'm trying to use Gantt chart from DevExpress library in my React app. I use the example code given here (https://js.devexpress.com/Demos/WidgetsGallery/Demo/Gantt/Overview/React/Light/) and simply copy and paste into my solution. However, instead of a chart, I get an empty container for the chart that has border. There's no toolbar, no treeview with tasklist and no waterfall diagram.
Most other components from the same UI kit work well. There are no errors or warnings in the console, all styles are loaded properly. It is just that divs that are supposed to hold a list of tasks or toolbar buttons are empty. There are no child elements in the DOM. Feels as if some sort of a script does not fire but I can't figure out what is going on.
I've tried to check for the events and it seems that the component when rendered does trigger OnInitialized event. It does not render any of the data fed to it though.
I've been googling around for a few hours but got no information or any clue. Any hints?
Related
I have a very basic implementation of ant design in a react project. I used create-react-app and have went through the suggested steps detailed in the antd documentation.
The problem i have is resizing the Content section of the Layout component. Currently, even though my Dragger component is wrapped within Content component, it is appearing below it. The Content component is represented by the Grey area on the screen. Attempts at resizing it using styling have not yielded desired results.
Here is the code pen. Im simply trying to ensure that the Upload box is located within the Content section, and not below it.
Any help would be awesome!
You've wrapped the Dragger component in a div that is absolutely positioned in the center of the body, so it's disregarding the regular content flow. If you remove that inline CSS it will behave as you'd expect.
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.
I am using an infiniteContainer in codenameone but it doesn't seem to be working properly. When I load components onto the infinitecontainer for the first time it freezes and can't seem to scroll for more components to be displayed. The container also sometimes adds the endmarker half way when creating a component. Have been finding a workaround for months and it is really frustrating.
I want to display HTML in my forms. The problem is I have to use a Boxlayout to place my components. So when I put a WebBrowser I'll have some height and scroll issues. I get the HTML I want to display from a webservice. The length of the content is variable. I just want to display a part of this response. Here is what I already have:
The webBrowser is below the edit button and ends near the LBL_LIB_NOM label.
As you can see the webBrowser is way too high and I can't scroll the Form when I click over the WebBrowser. In this example I would like to reduce the size of the WebBrowser so we can only see the Title. I also would like if possible to scroll my form when I click on the WebBrowser since I don't want the WebBrowser to scroll.
I have tried a few things to solve my issue:
I tried to override the calcPreferredSize method.
I revalidate my form and my webbrowser.
I resized it's container using the deprecated setPreferedSize method.
In that case the container is well sized but the the WebBrowser displays
above the other components.
The usual answer I have seen in other posts is to put the WebBrowser in a BorderLayout but I can't do that.
So here is my question: Is there any other component I can use to display one HTML line ? Or is there a way to make a webBrowser work properly in a boxLayout ? Do I have to write my own HTML renderer ?
I'm guessing you want box layout so you can scroll... This is problematic.
Web views generally expect to scroll themselves and this is common in native widgets which handle their own events and thus scrolling. It's hard for our code to know when your swipe is intended for us or to the underlying native widget and it's harder still to do this in a consistently portable way.
There are 3 options:
Use only Codename One code
Use a border layout or similar layout
Use the web browser for the entire UI of this form
If you want to take the first option this article might be useful as a starting point.
Since I'm updating my application from Ext JS 4.2.1 to Ext JS 5.1, I took the chance to upgrade my old charts to the shiny new sencha charts. I've been trying to set up an interactable stacked bar chart that looks like this
Users should be able to click on the bars or on the labels on the left to check out the details.
I've managed to capture mouse events on the chart bars (using the chartitemevents plugin), but I'm stuck trying to capture click events on the labels.
I've tried using the spriteevents plugin on the chart, but on 5.1 it simply doesn't work, and it's broken on the 5.1.1 nightly builds (you always get the background sprite no matter what). Even if it did work, getting the correct sprite would only get me halfway there as I would have no clue about which series does that label belong to.
Here's a fiddle with an example of the situation: https://fiddle.sencha.com/#fiddle/hjm
Does anyone know of a way to do this?
As and added bonus, it would be great if it was possible to capture onmouseover and onmouseout events too, so I could change the cursor to pointer whenever a label is hovered.
i just created a plugin for axis click: Sencha Forums
Ask me anything if the plugin usage is not clear.