I'm working on embedding a very quick survey on my site and after page one, there is just description text for page 2 and 3. So how do I a) make the iframe responsive to the number of questions or b) get rid the other ugly gray bottom when the description text appears? I don't mind the scroll bar but in a dream scenario what I would like is no scoll bar - all 4 questions fit on the page and then the continue button on page 2 shows up with no grey box.
The iframe code I have on the page is:
with the following CSS:
<style>
.survey-container {
position: relative;
}
iframe {
border-style: none;
background-color:transparent;
min-height: 400px;
max-height: 600px;
overflow: hidden;
}
</style>
http://i.stack.imgur.com/WP1dZ.jpg
Using the embed script provided by Surveymonkey, I was able to make the embedded survey width:100% by nullifying the max-width property through CSS:
.smcx-embed {
max-width: none !important;
}
.smcx-embed iframe {
max-width: none !important;
}
Related
I have searched and tried every possible example I can find. Here is my goal. I have a starter template for tabs. Each tab will open an page that will load a different path from a remote domain (using https) via an iframe. In android, it works as I would hope. In IOS, from what I have read, the iframe "height:100%" actually goes to the height of the content in the iframe, instead of the viewable area on the app, so the fixed header scrolls with the page, because for all it thinks, is that you have a really tall screen. What I need to happen is when you scroll, the fixed header stays at the top. Here is the code:
Component for Tab HTML
<ion-content >
<div class="iframe-fix">
<iframe
[src]="myurl"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
></iframe>
</div>
</ion-content>
From the forums I found a few tricks that should work, and created this css file that I include in the index.html:
.iframe-fix iframe {
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
width: 100%;
height: 100%;
border: none;
margin-top: 40px;
}
.iframe-fix {
overflow: hidden;
width: 100%;
height: 100%;
border: none;
background-color: #fff;
}
Would appreciate any help/suppport. Thanks!!
I am currently working on a project using Google's Polymer project. The issue that I am having occurs only in Safari on iOS. In the current chat view that I am working on, when a user scrolls through the chats everything works great. It is when the user taps on the keyboard there is then this gap that sticks and is difficult to get rid of.
Please see the images below and if anyone could point me in the right direction it would be greatly appreciated.
I have several more pictures but I am unable to post due to my reputation being less than 10. Thank you to everyone in advance for any help.
Here is what happens after the keyboard has been opened and put away. You can see in the image that there is now a gap.
Here is the CSS for the container
.message-sender-container {
#apply --layout-horizontal;
#apply --layout-center;
#apply --layout-around-justified;
background: white;
border-radius: 5px;
max-width: 400px;
margin: auto;
position: sticky;
position: -webkit-sticky;
overflow-y: scroll;
height: 100%;
-webkit-overflow-scrolling: touch;
bottom: 2%;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
HTML:
<div class="message-sender-container">
<paper-textarea id="message" label="Message..."></paper-textarea>
<paper-button id="image-btn" on-tap="_onTapImageBtn" class="flex" dialog-confirm autofocus raised type="submit"><iron-icon icon="custom-icons:insert-photo"></iron-icon></paper-button>
<paper-button id="send-btn" on-tap="_onTapSendDialogBtn" dialog-confirm autofocus raised type="submit"><iron-icon icon="custom-icons:send"></iron-icon></paper-button>
</div>
I'm trying to get custom jQuery mobile navbar icons and it's not working. I know the question has been asked before and I think I am doing it right can someone look at my code and see if they can see the problem please.
.ui-icon-directions {
background-image:url("http://c9.io/mbochicchio/tradingpost/workspace/img/mobilephotos/directions.png") 50% 50% no-repeat;
background-size: 20px 20px;
box-shadow: none;
-webkit-box-shadow: none;
margin: 0 !important;
}
http://jsfiddle.net/ragingnomad/NHC9p/5/
In jQM 1.4.x, background image is applied to the :after pseudo-selector:
.ui-icon-directions:after {
background-image:url("http://c9.io/mbochicchio/tradingpost/workspace/img/mobilephotos/directions.png");
}
Here is your updated FIDDLE
Why does this jsfiddle page appear so far zoomed out when viewed on Mobile Safari on iOS 6.1? I'd expect it to take up the entire width, but it zooms way out instead. I have pretty boring CSS as follows, but I'm missing something.
.foo {
overflow: auto;
overflow-y: hidden;
height: 100px;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.foo ul li {
display: inline-block;
border: 1px blue solid;
max-width: 100px;
overflow: auto;
white-space: normal;
}
Add
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
inside the <head>
Working example (standalone)
Working example (jsfiddle)
Background: By default, mobile Safari displays pages with a canvas width of 980px (see this answer), the 'width' parameter overrides this and 'device-width' automatically sets it to whatever size (or portrait/landscape orientation) you're using. It was initially introduced by Apple but pretty much everything now supports it.
For this to work in jsFiddle, you need to add the meta tag to the CSS pane but wrap it in a </style> / <style type="text/css"> tags so it appears in the head. Also, the ordinary embed sharing link won't work, as everything is wrapped in an iframe, so you need to break out the contents of that directly: .../show/light/
(If you have a Mac, the iOS Simulator is handy for this kind of thing - requires installing XCode. Also Chrome Dev Tools > Settings (cog icon, bottom right) > Overrides > Device Metrics)
I am using jQuery Autocomplete on my jQUeryMobile application. It works perfect. Now I'm trying to show vertical scrollbar to scroll through the list of looked up items. The scrollbar shows up on desktop safari, but not on iPAD safari. my css looks like this:
<style>
.ui-autocomplete
{
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
max-width:70%;
}
</style>
Can someone help, thanks!
Add this to your style:
-webkit-overflow-scrolling: touch;
Put the above style in CSS document of class body.....