Non software developer/programmer here.
I am trying to embed a Google Form into my website (hosted by Pixieset). I can get the width to automatically adjust by using width="100%", but height has a mind of its own and no matter what I try, it seems to always show two vertical scroll bars. I've attached the embed code below for reference. Anyone have crazy insights on how to fix this (if there is a way)?
Things I think might be helpful:
I'm only wanting to have the website scroll and not the embedded contact form
Most people will fill this form out on their phone, so that's the main goal
I'm using a website format from Pixieset so that may be problematic
Loading…
Thanks!
Things I've tried to change for height:
"auto"
"100%"
"100vh"
"please work"
Found a script that uses contentWindow
Related
So I've been running into this annoying problem and I don't seem to be able to fix it by myself. I'm currently working on an experimental App written Angular (11.2).
The page itself should be divided into several screen filling sections which users scroll through as if it were specific tiles. Therefor, scroll snapping is a must.
However I'm simply not capable of hiding the mobile browser address bar. This is due to the fact that, in order to get the snapping effect, the page only consists of one single element that is scaled fitting the current viewport. Also manually hiding the browser address bar using the widely used window.scrollTo(0,1) hack does not work since there is no real scrolling to be achieved.
Thus my question
Can I somehow hide the browsers address bar while still being able to keep the required layout required for scroll snapping?
You could use the app.manifest file to set your web-app to fullscreen. Dont know exactly if just works with installed pwas, bur you could give it a try.
I have a problem that seems pretty simple to me, but so far it was impossible to find a simple solution: On my website, whenever the Android soft keyboard pops up, it resizes the window and shrinks the content, instead of just overlaying the page.
See these pictures for reference:
The first two are the current situation, the third is what I want. It works like this on iOS. What can I do to make it work that way?
The screenshots were taken in Firefox - this is a website based on HTML, not a native app.
I tried setting body size and position, but so far, no luck. I've seen some very complicated JS code snippets for similar problems, but I didn't get any of them to work the way I want, and it also seems like there should be an easier way around it. The sizes of all the elements are determined with vh and wv. Setting fixed pixel values seems like it would kill the responsiveness of the design, no?
I'm not a very experienced developer, my page is just very basic HTML and CSS. Is there a way to achieve what I want with only that?
On your manifest.xml you can set android:windowSoftInputMode to adjustPan.
<activity
android:name=".WebActivity"
android:windowSoftInputMode="adjustPan" />
From Android documentation:
Don't resize the window to make room for the soft input area; instead
pan the contents of the window as focus moves inside of it so that the
user can see what they are typing. This is generally less desireable
than panning because the user may need to close the input area to get
at and interact with parts of the window
I think I have a VERY basic question here. I've been trying to figure this out for a while now: I'm working with an html-template called "Oyster HTML" and I've been trying to disable all functions (or css) that make the site adjust to the window size.
This is the link to the demo of the template:
http://www.gt3themes.com/website-templates/oyster/portfolio_masonry_listing.html
As you decrease the window's width in your browser, you'll see that - for example on the right side of the header - the menu-content adjusts. (doesn't get overlapped)
Same thing happens here: https://learn.wu.ac.at
Now, on 'common' websites like www.ebay.com this is not the case (content gets overlapped by window and doesn't adjust to window resize)
My question: Is this a JavaScript issue? or CSS? (I tried disabling all .js and all .css but the content still adjusted.) Now if it's not in JS or CSS, where can I change this?
As I said, this might be a very basic (or even dumb) question, but I've been trying to wrap my mind around this for quite some time now, and I just couldn't figure it out)
Thanks a lot in advance!!
I am really new to HTML and CSS but have created a prototype page to get a reasonable size, look, and feel to fit on a 768x1024 or larger display. I revised it to be used in landscape mode but it's apparent it won't fit in a typical browser window even at full screen with my minimum height and width criteria. The page doesn't contain text; just buttons, check boxes, text, and textarea "widgets". I think that I can fiddle with sizing and make it fit into a window if there is only a top "title" bar with the minimize and close buttons but absent all the other "stuff" such as the navigation bar, tool bar, etc. found in a typical browser.
I do use a couple of web apps that are like this so I know that it is possible. I've searched Google for examples and found popups but none are like this.
My question is: how do I do this, preferably without javascript, and what is this type of window called?
This should help with the minimizing: Is there a good jQuery plugin for a hide effect that looks like minimizing windows in Windows
You're going to have to include jQuery from http://www.jquery.com and call this animate script when the window you want to minimize is clicked.
This will help you with the 'closing'.
https://api.jquery.com/hide/
When you click on an element you can call .hide() on it, effectively closing it from the user's perspective.
At the moment it looks like the layout of the Comments plugin is not formatted to accommodate iframe widths less than about 330px. I need it to fit within a sidebar that's max 235px wide.
It appears that the 'Post to Profile' text overlaps 'Posting as NAME' etc.
Does anyone have a clever hack?
I was able to replicate this issue just now but you won't be able to fix this because it is rendered as an iFrame and cross-domain restrictions make it so any CSS changes you apply won't work since your page is hosted on a different domain than the Facebook comment plugin. Your best bet would be logging a bug, but I doubt it would get fixed.