I created an app for my phone which has only a 570 x 320 size screen.
When I load this app on my Kindle Fire 7, which has a way bigger screen, the header expands, but everything else stays small.
I am just using the Common controls for my app.
Should I be using the jQuery Mobile controls or the jqWidgets instead?
Thanks.
I assume you’re using Bootstrap right now? If so, they’re solid.
Just scaling to screen size is not a good solution. Different aspect ratios are just one of the problems.
Here’s an article on Responsive Design.
I created a so-called Responsive Design app using Grid Rows and Grid Columns. It took many many hours to get things set up on many pages. It was designed for an android phone with a 320x548 screen. I put it on my Kindle Fire to test it and it sizes pretty well, but it doesn’t look very good.
I usually put a label in front of my input control, no vertical allowed because of screen size, but when on the larger screen the label separates from input control. My labels are usually in bold.
I put a leftText in the input control and it doesn’t separate from the input text, however, even though I made the control bold the leftText doesn’t get bolded.
Two questions:
How can I make the leftText bold?
How can I make a button, or any control, stretch larger when on a larger screen?
Thanks.
I’ll take the stretch larger part. Rather than giving width to controls based on pixels, use a percent. It will use that percent of the enclosing control.
Also handy is calc:
https://blog.appstudio.dev/2015/10/using-calculations-in-project-property-bounds/
Ahh - how simple. Calc looks very powerful - Thanks George.
Thanks for the help.
My app is on an Android phone with a 320 wide screen.
I was able to make buttons stretch by using max(100%, nnnpx) in the width property.
But it was a real drag trying to to get three buttons into that small screen space, because it was really hard changing the actual size of the buttons.
Maybe I don’t understand this width property yet.
Using grid column size 1 - xs: 6 and 5 I just managed two of my buttons. Adding a very small third button did not work at all.
If I wanted fixed size buttons, it was no problem.
I still think I’m doing something wrong.
The form still doesn’t expand vertically.
How can I make it expand vertically on a larger screen?
Thanks.
Are your top and height values fixed? You can use percents for them too.
I can’t find what drives the size of a control.
Is it the GridRow, GridColumn, or the control itself?
No matter where I put the height: max(90%, 80px), it still stays the same size on any device.
Is there something in the form itself that allows the height of rows to change?
Thanks.
Fixed heights and widths are your enemy. Use % whenever possible. Then remember that 90% of a div that is 20% of a screen is never gonna yield anything larger than the 20% div.
I still can’t get buttons or inputs to grow vertically.
The GridRow height is set to max(20%, 40px)
The GridColumn height is set to max(20%, 40px)
The button height in the GridColumn is set to max(100%, 90px)
The button still won’t grow when the form is expanded.
What am I doing wrong?
Thanks.
Does the GridRow height change?
If you’re not sure, you can use Chrome Dev Tools to highlight it.
No the GridRow height does not change. I have it set to a different color.
I have 3 buttons in 3 GridColumns.
The GridColumns size 1 - xs is set to 4, and the size 2 - sm is set to 8.
Using Chrome F12 tool I can expand from 320 to 600, my phone and Kindle sizes.
In 320 width the buttons are horizontal.
The button heights do not change, but when I expand to 600, they pile up vertically on each other.
I would think that the buttons heights would change.
This is unexpected behavior.
Thanks.