I have a teeny-tiny page deployed # http://pinkbook.s3-website-us-west-2.amazonaws.com/
I am exercising my responsive design, I'm using flexbox with a few components from Material-UI, which are designed with display: block for the most part.
When clicking on the input fields for email or password, on mobile, the keyboard pops up and causes the content and layout to be distorted. The 100% height of HTML/Body no longer seems consistent, and some of my buttons that have margin rules in place now escape their container and bleed into whitespace that isn't covered in HTML/Body.
Please glance at that URL and either take a look from a mobile browser, or open your inspector and look at the bottom of the page -- there are distinct white areas and mispositioned buttons. How would one adjust the CSS to avoid the whitespace and content misalignment when an input field is focused and the keyboard presents itself?
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.
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
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.
I need to make a classic full screen landing page with a h1 title, a h2 sub-title and a call-to-action button to slide the content to the first div of the website. I really hope you can help me because the website should go online soon and this is the one thing that's stopping me from saying it's finished, I'll try to tell you everything so you have a better understanding on what's going on.
Here's my Fiddle: jsfiddle.net/daghene/szp7yf7h/1/
And this is an online version of the real page with the first bit of
content below it http://andreacordioli.com/macwip2
I'm using Skeleton Framework and the div containing the fullscreen image is outside the .container who's wrapping the grid, while the h1, h2 and button are inside it. Right now I have two problems:
for some reason, only in this part of the website, text bigger than a certain point exceeds the page width making the website scrollable horizontally under a certain point
I made it so the text gets smaller under the 550px mark which is where the Skeleton grid comes into play. I tested it on my Motorola Moto X which has around 1280x720 resolution and noticed if I check the website in landscape it doesn't trigger the smaller resolution text propieties and the text exceeds the width of the windo again: this happens on iPhones in Chrome tester too
What I wonder right now is: as of today, what's the best practise to make a 100% responsive landing page with such simple content that is always centered, works on all possible resolutions and device orientations withou exceeding borders and has the text always at a decent size never being too big?
For instance, the text exceeding the width is 8rem which equals to 80px in Skeleton. Here's the page I'm trying to achieve, which I'll need to serve a different image for on mobile when aspect ratio is X:Y where Y gets bigger than X somehow:
If you try it it kinda works and I even tested it on my old, first Samsung Galaxy Tab which has the super old Android 2 or 3 browser which gives me more problems than IE but actually centers everything correctly with this code...but the main issue is that the text isn't scaling properly and if the window is too narrow it either disappears on the right, making the window scrollable on the right and part of the big title unreadable, or if it gets too small(say my 1280x720 4,7" Moto X) the call to action button disappears since the screen window is too short and there's the browser bar too. I put overflow: hidden to this windows to be sure there's no horizontal scroll but the real problem is not the scroll, it's the text exceeding the div instead of getting smaller.
LAST NOTES!
If you check the css there's a "-1rem margin" on the H1 because as I
said for some reason in this specific section the H1, and just that,
doesn't center. The H2 and Button are centered, the H1 is not and
only here...don't get why.
If you try to make the window horizontally smaller you can see the text touches the window on the right side first(both in the Fiddle and in the other link where there's no html and body margins), still can't get why and I feel that's what's preventing the text to stay centered while getting smaller.
It looks to me that some of the problems you describe are because at viewport 550px wide, your h1 font jumps in size from 5rem to 8rem. But at this viewport size there isn't enough horizontal space to hold your h1 text and so it exceeds the width of its parent div, and hence appears to be off-centre.
I think a solution would be to tweak your CSS in http://andreacordioli.com/macwip2/css/includes.css starting around line 1047 to something like the following:
#media (max-width: 625px) {
.bigImage h1 {
font-size: 5rem;
}
...
}
Hope this helps!
I have a series of panels that work with tabs. I'm using aria-controls, aria-selected, role="tablist", role="tab" on the tabs and aria-labelledby, aria-hidden and role="tabpanel" on the panels - all seems good.
However, below a certain screen width I want the same elements to be collapsible, expanded and collapsed by buttons at the top. Obviously I need to hide the tabs list, and include buttons at the top of each panel which are hidden above the breakpoint. I would use aria-controls for the buttons - but there seems to be a few overlaps / clashes between the accessibility markup for the two layouts.
Is there a right way of doing this, or is it simply the case that I should ignore accessibility markup for the "mobile" version, assuming it's irrelevant to screen readers? Are there scenarios where the accessibility markup is necessary for responsive layouts?
The correct solution is to simply show the tabs as buttons (i.e. change the styling) in the small screen layout but leave the markup exactly the same. If you want to have multiple sections expandable simultaneously, then you can use aria-multiselectable (which essentially turns tabs into accordions).
Do not ignore accessibility for mobile. Mobile is as easy to make accessible as the desktop version and is becoming the primary way that users access many web sites and applications.