Content of google form is by default 640px wide - which is set in class ".freebirdFormviewerViewCenteredContent", I need to make this wider. I´m embeding it on website with iframe and I can´t find solution how to add "width" css to make it work. It´s possible?
You can't style an iframe with CSS, there are two ways to solve the problem though:
Use javascript to style it: take a look at this answer
Don't use an iframe: use this tutorial to style the whole form without using an iframe
What I did to change the width of the form was change the width within the embedded code within the iframe.
Apparently, there is no way to do that and I have looked everywhere. Currently, there isn't an option to make the Google Form wider.
Check out this link on google forum:
https://productforums.google.com/forum/#!topic/docs/FaGfvxnm51U
Related
I'm trying to adjust the scroll view hight because it's too long, any solution?
I tried to use css with no success.
As you can see in the image below, the current scroll view is too long.
Use property binding for height.you can change it run time.
In my opinion you will need to use a library to customize your dropdown. In fact this html tag is native and depends on your browser, I recommend ng-select to do this :)
I'm trying to get Tumblr's photosets to appear 640px wide.
I'm modifying CATCHING ELEPHANT for my blog http://assemblyradio.tumblr.com/
I'm making the whole posts section of the theme wider.However, I can't seem to get photo sets to appear 640px wide.
I would like the sets to show up as Tumblr intended with their fancy layout, because they look great. Therefore this solution is not what I'm looking for:
Change default photoset size on tumblr
I have tried java script from here:
Tumblr theme dev: Square-75px photos for Photoset posts
and here:
Change default photoset size on tumblr
The second script sort of worked but the images are cropped off =(
If I add some custom CSS I can get the iframe to be 640px wide, but then the height does not adjust accordingly!
Everytime I think I figure it out on Chrome's web developer tool, I can't seem to get the code right in Tumblr's custome CSS. I thought using this selector gadget [How can I get the CSS Selector in Chrome?
could help me target exactly what CSS I should be editing (to see if that could help) but it can't tell me the path to the element, maybe because it's an iframe.
Does anyone know how to to get custom photoset width?
Or how to get an iframe height to adjust automatically?
Or how to find a complicated path to a class?
Any help would be much appreciated. I just want to see my cute kittens.
Thank you!
Tumblr's limitations had also been annoying me, so I wrote a jQuery plugin for a fully responsive Photoset layout that uses Tumblr's style. It also includes extra information (that can be toggled on/off) for EXIF and caption data on each photo.
https://github.com/PixelUnion/Extended-Tumblr-Photoset
Click this link to see my concept image regarding the subject: http://i45.tinypic.com/k33c0i.jpg
Hi! Is it possible to do such custom "sliders" for overflowing content without the default Scrollers? It doesn't matter how the actual transition goes (could work just like the regular horizontal scrollbar for i care, just without the ugly default gray buttons/bar). Preferably i would like to do it just with CSS, but if not, i'll consider other ways to do it aswell. Or i'll just simply create another page to the remaining images.
http://www.visioville.fi/en/
Thanks!
You can get rid of the scrollbars by setting
overflow:hidden
in CSS, which will "clip" the DIV contents.
I don't think there is a pure CSS way to scroll it. That is easily doable with jQuery.ScrollTo - just bind hover() or click() events to your arrow icons.
Take a look at this site, I believe it will be of some use to you. It's what I've used in the past: http://jscrollpane.kelvinluck.com/
Currently, I am implementing a scrollbar using a custom embedded image using my CSS stylesheet. This is a very simple, thin scrollbar. I would like to configure this scrollbar using CSS properties at runtime, but so far I have been unable to do so.
I know it can be done because I've seen examples of it in the net, but no code to review. Anyone have any suggestions?
Thanks!
This blog has an example that you can view the source of with a right click:
http://www.axelscript.com/2008/02/20/custom-scroll-bar-using-css/
This one has a few links that redirect to examples with image skins:
http://www.foxarc.com/blog/article/101.htm
You can see a lot of the css stuff for scrollbars and pretty much everything else here:
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#
I have a ‘page a’ using ‘css a’. This page has margins set in css.
I also have a ‘page b’ using ‘css b’. This page also has margins set in css, of the same size as in ‘css a’ (10px).
Is there any way I can make it so that when I am viewing ‘page a’ on its own it has margins, but when viewed in an iframe on ‘page b’ the margins don’t apply to ‘page a’. I know that’s kind of a long way of asking but the basic problem is that I am getting ‘double margins’ for the content in the iframe: the margin from ‘page a’ and then the margin from ‘page b’!
I guess one way of doing it would be to set the iframe not to be affected by ‘page a’s’ margins. Is there some way I can set ‘css a’ to exclude the iframe from the margins, that way only the margins from css b would apply and the page would still be in alignment. is that possible?
Thanks for any help
Matt
You can use Javascript to change the margins if the page is inside an iframe.
I don't know a way of specifying it from within a.css, but if you add the following to b.css:
iframe { margin:-10px; }
...it may work.
EDIT: Is the iframe with a.html the only item contained within b.html?
Do you have test files?
EDIT(2): In css, you would specify it as
iframe#head { ...; }
Also, I think you can comment on responses to your own questions. I could with mine.
Im really sorry i know everyone gets very upset with posting answers rather than comments im new to stack overflow and just learning. Have mercy! I have figured out what i was doing wrong and now i have this 'open id' thing i will try to post in the right place. I'm afraid this time though i have to post as an answer as i started this question without my open id and so still cant comment on that stuff....
OK now thats out of the way here is a 'test case' : http://cart3.jaspers-sensations.com/test/pagea.html
Page b is : http://cart3.jaspers-sensations.com/test/pageb.html
css a is : http://cart3.jaspers-sensations.com/test/stylea.css
css b is : http://cart3.jaspers-sensations.com/test/styleb.css
Having read your clarification, I don't think you can do that purely with CSS. I'm pretty sure CSS can't go across frames.
You should be able to do this using JavaScript, though, provided both documents are on the same domain.
For example, this should work on your example page. Add the following attribute to the <iframe>:
onload="window.frames[0].document.body.style.margin = 0"
That works in Firefox 3 and Opera 9, at least. But it's decidedly old-school JavaScript, and considering my browsers were being a bit fickle in which variants worked, I'm not sure how easy that would be to apply to the real site.
People more well-versed in JavaScript than me should be able to help out there.
This might help some more:
Accessing the document inside an iframe