I want to build a web app in Ionic in this application there is a form in textaera
And as a notepad on IPhone I would like the textaera to be the size of the device used
Thanks a lot
You can achieve it with CSS:
textarea {
resize: none;
width:100vw;
height:100vh;
}
Here, you are setting the width of textarea to 100vw (viewport width) & height to 100vh(viewport height). This will make textarea adjust itself to the device width & height automatically.
Related
I have a page I am trying to render a page via WebView in Flutter.
The page has a height of 100 vh (in CSS) and when attempting to render this page in my app, the app bar covers up the upper portion of the page. I believe this is due to the page having 100vh.
I was wondering if anyone knew how to handle such a case and force the page to render at a smaller height so that the app bar does not cover up the top part of the page.
EDIT: To be clear, this is someone else's webpage, I cannot edit their css.
Thanks.
You could use the calc() method. If you know the height of the app bar, you can set the height as following:
Lets assume the height of the app bar is 65px for now. Then you would use the following line of css:
.appbody{
height: calc(100vh - 65px);
margin-top: 65px; /* Clear the space for the app bar above */
}
I would recommend to use the min-height property if possible. When your app screen gets larger, the size can increase with the length of the content:
.appbody{
min-height: calc(100vh - 65px);
margin-top: 65px; /* Clear the space for the app bar above */
}
Hope this helps!
What is the right way to calculate how much viewable space is available on mobile Safari? By viewing area, we mean the amount of the screen actually available to a web app, that is the window height minus the address and bookmark bars.
iOS 7 prevents hiding of the address bar, and we need to properly account for the viewport height.
window.innerWidth and window.innerHeight will give the width and height of the viewport.
For anyone who comes in 2020, window.screen.availHeight is the only one that works as #Marcel Falliere's comment below.
Set the CSS height of your root container element (let's call it rootElement) to the height of the view port:
.root-element {
height: 100vh;
}
Then, when the page renders, run this code to update rootElement height to the viewport height minus the size of the browser UI bars (for example, on iOS Safari: top address bar, bottom navigation bar…):
const rootElement = document.querySelector(".root-element")
const viewPortH = rootElement.getBoundingClientRect().height;
const windowH = window.innerHeight;
const browserUiBarsH = viewPortH - windowH;
rootElement.style.height = `calc(100vh - ${browserUiBarsH}px)`;
This solution sets the size of your root container to what is available, but it also keep the possibility for the browser to adapt rootElement height when the window is resized (when used on a desktop, for instance).
I know this is 5 years old post, but this problem still persists as i can tell. My workaround:
Use a HTML Element on the page which is styled with CSS: .el{ height:100vh; } and retrieve the height in pixel to Javascript by using jQuery: $('.el').height();
If you don't have a practical use for such a element you might create one on the fly for the sole purpose of masuring the viewport:
var vh = $('<div style="height:100vh"></div>"').appendTo('body').height();
$('body div:last-child').remove();
I could not find an anwser to my question, beside it is hard to explain it in a few words.
my FB App is an iFrame Canvas, when I set the width to "fluid" the top status bar is left aligned.
when I change to fixed width, I am expecting that I got the same layout like FB always is, the status bar centerd, and my app next to the realtime app activity tab.
But the FB layout is still like "fluid" and my content is fixed width (760px) and is centerd, so I have white space all around it.
I want just the normal FB Layout, statusbar centered, my content is centered right next to it should be the activity tab and only left from my content should be whitespace.
Can anyone tell me how i can set it up right?
Here some screenshots to clarify:
expected: http://oi39.tinypic.com/t88dat.jpg
fixed: http://i40.tinypic.com/24drivk.jpg
fluid: http:// i44.tinypic.com/2po31tt.jpg
greetings
Try having the body style be {position: relative; left: someValue;}, where someValue is calculated based on the window width. So it would be something like someValue=(windowWidth - facebookSidebarWidth - yourcontentWidth) / 2;
I think you can subscribe to the window resize event and dynamically change the left float value according to the above.
The site I am currently working on (roemlunchdinner.nl) looks fine in all major browsers but Safari on the iPhone and the iPad seems to add extra margins or padding around elements on the lower part of the page. I have tried setting the margins and padding to zero on all relevant elements, setting specific widths etc. but to no avail. I cannot reproduce this is any other browser. Anyone here has an idea what is going on here?
I am new here so am not yet allowed to post screenshots. Here are the links to the screenshot I would have liked to post:
Safari Windows screenshot
Safari iPad screenshot
Mobile Safari resizes elements based on its best guess of what's going to be readable for the user.
You can override this behaviour across the entire site by doing this in your CSS:
body { -webkit-text-size-adjust: none; }
or you can target just individual elements.
try using media queries for ipad
#media only screen and (device-width: 768px) {
your css...
}
give different width and see. Hope this helps
add css to element or related class: padding:0 #important!;
I am using phonegap.
I want to keep a fixed header and footer,and i want to scroll the content in between them. For that i used div with:
div
{
width: 249px;
height: 299px;
background-color:Gray;
overflow-y: auto;
}
style.
But the div is not scrolling.
But in browser it is fine.
iOS doesn't allow scrolling within an element (div with overflow:scroll/auto or frames) so you can either design your site around that (usually for the best) or you can try iScroll, which is a javascript plugin designed to re-instate this ability:
http://cubiq.org/iscroll-4
Good luck.
Div scrolling does work in iOS if this property is added:
-webkit-overflow-scrolling: touch