I am not able to code the middle layout which is highlighted in pink circle
Layout I want
I want to make this layout in materialUi react
I am not sure about what you are asking, but I hope this will help you
there are different ways to do what you are trying to do, but I think it is important to maintain the correct grid order to do it.
Inside the pink circle seems to me that you are forgetting to wrap the card inside a grid item component, which would give you the possibility to align the cards in the way that you want.
I did a super easy example to better explain my point:
https://codesandbox.io/s/material-demo-forked-6ylvv
Inside the container you can also decide to align with direction="column" and using xs={6}.. this is up to you, in the Material-UI documentation you can find different ways, I suggest you to spend more time in it and remember always to use item inside the container
Related
I want to render a virtualized list of images with variables heights, my current implementation is following the variable example on tanstack docs, but adding a random height src image and loading that instead of text as the content for the row item.
This is not working great and is a bit glitchy. Im using a best guess estimateSize but was hoping for a system that would fully calculate this for me.
The height is completely off until you scroll at least once, then the image heights seem to get calculated. Otherwise, once you start scrolling, the performance here is pretty good.
Any feedback on this implementation (no idea if this is how it's intended to be implemented), or indication on how I can fix the problem would be appreciated. Thanks!
My demo here:
https://codesandbox.io/s/boring-ishizaka-yiywvo?file=/src/main.jsx
p.s if you know how to achieve this with react-virtualized (with CellMeasurer) also keen to hear/see it. I've struggled with CellMeasurer and image onLoad to calc correctly.
Ok dug through some github issues, and mashed a few things together and this seems to be working well. https://codesandbox.io/s/usevirtualresizeobserver-04-11-2021-forked-yur6we?file=/src/App.tsx
It uses a custom wrapper that leverages ResizeObserver, shame this isn't something that's exported from the lib considering this would be a very common use case.
here is a much simpler solution with the new react-virtual version
the idea is to call measureElement on img onLoad
Here is the actual shape I want to draw using maybe view style properties or are there any alternatives, thanks
Depending on your needs I would choose something like react-native-canvas they have pretty much everything you gonna need to draw.
Other option would be GCanvas.
With those options you will be able to draw free forms as you wish
But there`s always the option to use SVG as well.
In my past experiences SVG forms solved most of the cases, but sometimes I had to use this canvas libs to draw some more complex or dynamic forms.
Hope this can be of any help to you.
I have some questions about sliders,
Im using a slider and i want a marker to be present on it like:
http://1.bp.blogspot.com/-HDNFnyRU2Cw/TcuMbBaL70I/AAAAAAAAAGc/7eWN1qnZbAw/s1600/seek.JPG
it draws the image at the bottom of the slider, not on top of it, searched for a setThumbImagePosition or something like that ,but didnt find it, is there a way to use sliders with markers on the top of them?(like the image shown)
Is there a way to show divisions on the slider?(for example this)
https://raw.githubusercontent.com/channguyen/range-slider-view/master/screenshots/sc.png
Whats the best practice to create thicker sliders?
Check out this post notice that in order to create the stars effect properly we wrap the slider in a flow layout to prevent it from growing. You can use background images just like we do in the stars slider but you need to place the slider in a flow layout of similar layout that doesn't let it grow beyond its preferred size.
When I click the "Tabs" component, it shows it as the whole thing around the edges (except the top part that says "Interactive Stories").
I want to know how I'd make the MultiButton go just above the menu at the bottom of the "Tabs" component. So an area with a BorderLayout and when I set it's layout constraint to "South", I want is so that it's above the menu, not underneath it. Because if I previously tried to just do that, the menu part of "Tabs" would overlap it.
I've already watched the "HOW DO I - POSITIONING COMPONENTS USING LAYOUT MANAGERS" video and that didn't explain what I want; if it did, I didn't catch it.
Here's the github repo if that'd help at all: https://github.com/gogobebe2/InteractiveStories
If you need me to clarify things, since I admit it may not be good english, please tell me. I'm determined to fix this. Thanks heaps :)
Edit: Solved! Opened the theme.res file, went to the constants tab in the theme and removed the tabsOnTopBool constant boolean. Big thanks to https://stackoverflow.com/users/756809/shai-almog
The Tabs component has a special mode that is activated in the leather theme to allow the "arrow effect" to overlay on top of the UI. It then adds padding to the bottom of the content pane to allow you to scroll more within the tab.
It uses the theme constant tabsOnTopBool=true to do that and if this is the case it uses a special form of BorderLayout:
border.setCenterBehavior(BorderLayout.CENTER_BEHAVIOR_TOTAL_BELOW);
If you check out the docs for CENTER_BEHAVIOR_TOTAL_BELOW you will see:
The center component takes up the entire screens and the sides are
automatically placed on top of it thus creating a layered effect
This is somewhat undocumented so I'm adding the documentation of this to my task list...
You are on the right track with placing it at the South in the Tab. And infact that's the best way to do it.
You can give the Story Maker container a unique styling, let's say ContainerBottomMargin2 that has 2mm bottom margin or padding. This will push the container up a bit to avoid overlapping.
You can also style your TabsContainer to have 2mm top padding.
Because North, South, East and West, all have more priority over center, the Tab buttons will always cover components at the TabbedPane if possible. As the buttons are sitting in the South and you are adding your contents to the center.
Is there a standardized way to create a multiline toolbar? I'm dinamically loading the items and they are usually more than enough to make the toolbar overflow. But I don't want the overflow functionality, I just want the items to span several lines. As the items are loaded dinamically, I can not create several stacked toolbars beforehand. An observation: I switched the layout from the implicit default 'hbox' to 'auto' and the items do span several lines, but then, features like separators have undesired collateral efects, like having only one item or separator on each line, and also different looks in different browsers.
I could dinamically calculate the suposed total width of the items and divide by the max desired width of a toolbar to obtain the number of toolbars I need, but I don't know exactly at what point the items get a valid useful width.
This is an old question posted by someone else sometime ago. I'm re-asking because perhaps with the latests releases of Ext JS, they shiped 'undocumentedly' the sooo needed layout solution for this issue.
Thanks!
I don't think there is an out of box component that can do all of the things you want.
The default toolbar layout of HBox just places everything horizontally spaced.
If you know that you need more space you can always put in a container with whatever layout you want for it's items. You can get creative and nest all kinds of layouts.
Personally I think this would end up looking ugly. Perhaps there is a better solution with an alternative approach to your design needs.