I've a GUI built app and I set many Icon images in the code for some components.
The thing is I've made sure all "padding" and "margin" values are the same for the different states of the components (unselected, pressed, etc) but when I try to input data into the TextFields, it seems like the dimensions of some components change without notice and they completely mess with my layout.
Even sometimes some of the icons partially disappear. Please see the following screenshot of before and after text input, where the Container and TextFields shrink
I really don't know what else I can do. I have tried many things, but stil the same outcome. Please help.
You need to make the container housing all this components scrollable.
Use Millimeters for your TextField padding and margin, don't use Screen Percentage. From the image in the images you posted, 2mm top and bottom and 1mm left and right would be suitable.
If the components having those icons are pressable like a button, be sure to set their pressedIcon to the same icon.
Lastly, style your TextField Unselected state and copy this to Selected and Pressed states, to avoid erroneous styling.
Related
I have Text components in one Text component. Onpress for Text components fires on the Text below the one pressed on Android device.
On Web works good.
Seems like due to default extra top padding for a Text - this is why when pressing on one Text the finger touches the one below.
Any help apprecciated.
Line-height doesn't help, increasing padding-bottom works but since it's an inline component I have to change it to inline-block but it doesn't work for Android.
So I have the following question which I believe is quite valid.
So Box and Grid are Layout components which you are suppose to add other components inside those as far as I'm aware. However sometimes Box does the job for me and sometimes is Grid and SOMETIMES I use both at same time.
This question came to mind to me after I was trying to CENTER a component, so in this example when I use GRID I can center the component in the middle of the screen without any issues:
Grid Example:
ExampleA-Sandbox
Box Example:
ExampleB-Sandbox
I know I can just simply add pl={number} to the box component and then I can move the box to a desire location but that's not the point.
I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.
The next image show the main components arrangement in md,lg,xl
The next image show the main components arrangement in sm,xs when width < 960
In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".
The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.
I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you.
https://codesandbox.io/s/charming-shirley-oq6l5
Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87
It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar
Thanks to both, it solved the main part o what i need.
Also need to implement a change of page.
I forget to mention that the map will be React-Leaflet,
so need to implement a flap button over the map for the mobile version.
The button is for scroll to up, because any finger movement in the map area only will affect the map content.
Do not will have effect in the scroll.
Another thing to implement is the break page concept:
The behaviour of the break page is like when you see a pdf in presentation mode and press
the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.
Grettings
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.
Please have a look on the following image.
How to display values along slider like bars with values ( Extremely unlikely, Neutral and Extremely likely ) as displaying in above image ?
I am fairly certain this is no built-in functionality for this. Make sure to always check out the Sencha Market in case someone made a custom component/extension/plugin though just in case.
My recommendation would be to create your own custom component, which should be simply a container with a vbox layout. First item should be your slider, second item probably another container with a hbox layout. Put your slider values as items under the hbox container with some custom CSS. Take it one step further if you want, and maybe in your constructor/initialize function add a listener to the slider and when it changes you can do something with the labels to indiciate the selected value.