So I have a graph and table that show results according to the number of flights, but I want their size to be automatic, but right now if I don't give the div that is wrapping them together a specific size, they will end up collapsing. See the attachment enter image description here
The div container cannot be resized by charts. All charts as a default fir to the div container. It means that you should define the div size by CSS manually, for example, 100% of the parent's element or specific size in px.
Inside the div, you can adjust the table and chart manually.
In the comment below you can find the sample of a table and a column chart. Every one of them is 50% height of the div container. And the div container occupies 100% of the body.
Related
For example, I'm trying to build a browser sizes paper in the format of A4, so somehow I want to track the height of the content, for example when 200px height is filled with content any type of it, in case it needs more space to grow with the content to create another div or something and the content to continue on that part, and so and so, so like pages in A4.
I am trying to create a SPA with react and material-ui. I want the page the page to have the size of the screen and the content has to resize and fit to it.
I am using a Grid from material-ui with two rows and one column.
The first row has a ImageList with images to fit the remaining room.
The second row has some stuff that does not matter.
The problem: when I load the images the first row resize itself growing more than the room available to it. I tried to fix the size of the ImageList but it transform itself to a scrollable component. So, the images never resize! The size set to them are to fit to the parent size.
Thank you
I have a working vertical column drag and drop React app using react-beautiful-dnd, but would like to 'invert' it so that Draggable items fall to the bottom of the Droppable div instead of floating to the top. Is this possible?
If I'm understanding you correctly, you'd like to have a list where when the container is not full, the items within that list are aligned to the bottom of the container?
If so, then yes - I would utilize flexbox.
Here is a good resource for flex - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
There are multiple different ways to implement this with flex. Pick your poison.
edit
Based on the code sandbox:
I would add a wrapper div to the bay component with the same height as what you have now. On the child div, add a dynamic height field that is dependent on how many tables the bay contains.
Users won't be able to drop into the entire column but you could style it to show the user where they need to drop when the column is empty.
I ended up just creating another invisible strip with flexGrow = 1 to push everything to the bottom.
When I press a button, my app displays a calendar (within a Dialog) that slides from the bottom of the screen:
I want the Calendar to occupy the whole width of the screen, but it shows some white padding on both sides and also on the top and bottom (It is white because the "Dialog" UIID has a white created image as background)
I have tried changing all the UIID related to Dialog: "Dialog", "DialogBody", "DialogTitle", etc. I set all margins and paddings to cero.
How can I get rid of that padding?
Try change both the DialogUIID and the UIID of the dialog. Also make sure your calendars margin values are set to zero. It could be that your calendar is too small. Try placing it in a table layout with 1 row and 1 column then in layout constraints set the width and height to 100%
Open up the Component Inspector tool and traverse the hierarchy. You will be able to see all the components and their UIID's within the hierarchy and you should be able to understand which one of those components contributes to the padding/margin.
Is there a way to have the container containing an html widget (qx.ui.embed.Html) scale to the proper size so it doesn't cut off some of the Html?
Here's a playground example:
http://tinyurl.com/a4twfdc
Notice how the Three and Four get cut off.
The only way I could fix this was to define a minHeight and minWidth for the container, but my html can vary in size, so I end up with a large blank area or not enough room.
The only way I could think of a fix is to render the HTML prior into a helper div and take the offsetWidth / offsetHeight and apply it to the embed as well. That helper DIV could be out of the view port at e.g. -1000 / -1000 and you can set the HTML as innerHTML. Maybe that could solve your problem for the initial size. But as soon as the content of the embed changes dynamically, you have to redo the calculation if you can.