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!
Related
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.
I'm using Twenty Eleven theme of Wordpress.
In other themes, there is no problem but in twenty eleven there is a problem with Facebook like button's comments popup window. it's half shown. when I click "Like" button, the view is like below:
http://i.stack.imgur.com/Hgawi.png
I use Facebook plugin for Wordpress. How can I fix this problem?
Thank you so much for your help!
It's a bug in Twenty Eleven (and a few other themes, probably copy-pasted). Open your style.css and look for:
embed,
iframe,
object {
max-width: 100%;
width: 100%;
}
If you remove the max-width line, it should work! Maybe there's a more elegant solution but honestly, I don't know why the size of an iframe should always be limited to its container (in this case the FB button).
Maybe thats a better way of doing it!
Put a class on your Facebook Like Button div, in this case I used "fb-like" class.
.fb-like iframe,
.fb_iframe_widget iframe {
max-width: none;
}
Looking/testing for a lot of solutions I found one that hides the comment window (source here: https://stackoverflow.com/a/12829375/3687838 ) and then I wrote one that shows the window without being displayed in half. I'm not a programmer but from my small experience from tweaking wordpress plugins I came up with this ideea:
.fb-like {
z-index: 200;
position: absolute;
}
Copy/Paste it in your Custom CSS theme file. The z-index value can be changer even to 10000 if you want your window to be on top of everything.
If you want to hide the comment window, use the solution provided in the link above with a value of 27px instead of 20px.
The button-count Layout Style height of the "Like" button and corresponding counter block is 20px high. Is there any way to shrink that block to 16px using css of jQuery or any other method?
Thanks
It can't be done. The only customization you can do is what you see here:
http://developers.facebook.com/docs/reference/plugins/like/
See this article on why it's so difficult to resize iframes:
http://css-tricks.com/cross-domain-iframe-resizing/
Actually you can hide whatever you like by wrapping it with a div and doing some css. Or you can !important override any of the CSS facebook uses by doing it in your own stylesheet. Just open up your page in firebug after adding the button and you can figure out what css to override. Honestly it's not worth it though, the facebook iframe for their button tears up android browsers and slows down every page you put it on.
I added the button to a page and only wanted the button not a count or their blown out text message beside it. so I created a div with the id="facebook" and wrapped it around the div they give you on the dev site. Then added this CSS to my stylesheet.
#facebook {
max-width:42px;
max-height:20px;
overflow:hidden;
float:left;
}
You can use a couple of div's to wrap it then change the centering of the button as well using negative margins on the inner div. But again it's not honestly worth it to me so I stopped sending links to facebook and stick with twitter and pinterest.
Hope that helps.
I need to make a alert box or dialog box when popup it lock the back screen like a Modal type alert box. but this time i need in fbjs. or fbml any one can help me please...
One way to cheat this is to give the div a css attribute of position: absolute and align your div on top of your content, with a z-index of something higher than everything else on your page (typically, people use something like 100). This becomes your modal container, and within it you'll just want to mimmic/copy the styles of a typical FB modal window.
Also, create another div at the top or bottom of your content, and give it css properties of position: absolute; width: 100%; height: 100%; background: #000; opacity: .5; z-index: 50 (make sure z-index is less than your modal container). This is your overlay, which blocks the content of the page from being interacted with until the user does something with your modal.
I would suggest going about the solution this way because like #dragonjet pointed out, FBML is deprecated, and you can't create new FBML applications anymore. Without FBML there is no FBJS.
So, I work on a Facebook FBML App. What I want is simple. Just have a div shows in the center of the page, and scroll with the page. i.e. always in the center.
It would be easy with normal JS. I just use the pageYOffset
However, in Facebook using FBJS, I am not sure what I should use. It doesn't have getPageYOffset().. and I tried getScrollTop().. it doesn't seem the right thing.
So, anyone knows how?
Have you ever seen something like this done on FB before? It sounds to me like FBJS is causing you the problem with its lack of API options.
One way to do it in normal JS is to get the position of the sliders, both Right and bottom, and also the whole screen size, and then determine where the center of the viewable window is based on the full frame size and the slider offsets.
All of those variables should be defined or be retrievable via javascript for you to grab and manipulate, and then it is simply updating the css values on a div to move the window to the correct location. you can then poll the state of the window sliders or monitor their event and retrieve their position as it is updated to recalculate the center of the window.
If FBJS has no facility to determine window size or slider position, then you have a much harder problem on your hands.
Use css
#myDiv {
/* Keep position fixed (scroll invariant) */
position: fixed;
/* Center */
left: 50%;
top: 50%;
/* Set width and margin to account for half of width */
width: 200px;
margin-left: -100px;
/* Set height and margin to account for half of height */
height: 100px;
margin-top: -50px;
}
The first 3 lines would center the upper left corner on the page.
The next 4 lines set the width, and then shift the div back and up so that the center is centered.
More info from w3Schools about position.
How about using Facebook's call myDiv.getAbsoluteTop()? This won't keep the object fixed, but it will at least start at the proper position.
Just one other idea -- you could generate an image, and set the image as the background, which I think you can keep fixed. It depends what you're after exactly though.