iframe-resizer, issue in downsizing - iframe

I give davidjbradshaw iframe-resizer [this] a try and its working so well. But I am stuck with a problem that it is not downsizing. As mentioned in documentation, there are few height : 100% style in content css, which might have been a problem i believe. I can't modify that. So, Is there any alternate to solve this ? I tried setting manual height in publicApi before changing url in iframe but It can't accept autoResize false.
Any help will be appreciated.

Try the latest dev build, it has a new height calculation option that might help you.
https://github.com/davidjbradshaw/iframe-resizer/tree/dev#heightcalculationmethod

Related

Is there any way to change default height of slider

I am using nuka-carousel slider but can't change the default slider height to 760px. Here is the link of that carousel. I tried to add initialSlideHeight but it does not help me.
https://reactjsexample.com/a-pure-reactjs-carousel-component/
I tried to use heightMode and initialSlideHeight, but I didn't have success either. As well as, changing the carousel' imgs height.
I searched a little bit at the repo, and found some issues that may causing this problem. Like this one:
https://github.com/FormidableLabs/nuka-carousel/issues/457
Maybe you should try to find another solution. Good luck!

Videogular vg-controls plugin position under the video

sound quite easy but at the moment I don't find a solution for it. I simply try to get the vg-controls plugin positioning under the video.
Because I am using the Plugin in Ionic, it is not so usability-friendly when the vg-controls autohide or something. Therefore I like to bringt the vg-controls container under the video-container.
But for now it is always in the video, and only a padding-top is doing the job. But not the full job, because with a padding it is not fully responsive and always depends on the display of the smartphone.
Has anybody a simple solution for this? I use the regular code from the website-tutorials:
enter link description here
Sorry guys, fixed it with simple css code.
Height of vg-controls is 50px, adding a margin-top to the vg-controls-container. Done.
Thanks anyway ;)

z-index and CSS issues

How do I set a specific section of a page (div section?) to be on top of another section? I tried adding a z-index on the CSS file but it's not working. Or maybe I'm adjusting the wrong CSS file. In the end, I am confronted with:
--- which CSS file do I adjust? (I'm using Firebug but now I'm not sure if I'm using it correctly
--- what exact code adjustments do I need to do?
This is a sample page: http://www.criminal-lawyers.com.au/offences/aggravated-assault. The testimonial box to the lower right part of the page gets covered by the brown area when you scroll down. The goal is to put it on top so it's not covered whenever you scroll down (I know I should better position it "absolute" instead, but that's not the goal).
Any feedback would be appreciated. Thanks!
Finally had it solved! Many thanks to all your comments below. Although some answers did not exactly solve the problem, there were concepts behind them that really helped.
You need to set z-index:21 on the div with id it_widget_content-11-background-wrapper which is the main container of the sidebar widget. That should solve the issue.
it's pretty simple, to this widget-background-wrapper sidebar-widget-2 add z-index:9999. sorry i would rather comment this, but reputation < 50.
Remove position:fixed on the classes
CSS file - wp-content/themes/Criminal-Lawyers-it/style.css
sidebar-widget-1
and
sidebar-widget-2
They will remain in place.
Just realised it may not be exactly how you want it to look :) However, even with correct z-index, it may look weird having them overlap the footer...

Page won't fill height of browser

I've just started looking into CSS3 and HTML and I wanted to use it for a University project that asked us to make an ASP.NET website, but I can't get the height of the content to fill the 100% of the browser... It's actually not even taking into consideration the content of the default.aspx.
Tried a bunch of stuff on other questions around here, but most times they either don't do anything or mess the whole positioning of everything.
Was hoping you guys could give me some tips on how to fix it. Here's the fiddle: JS Fiddle
Thanks in advance.
You need to provide the form also with height: 100%;. Check out this fork of your fiddle.
http://jsfiddle.net/tushar2289/a5Bhv/1/

What could be CSS causes of breaking under footer

As you see in the image, under the footer there is white part which is not body.
I checked that all the div is closed> I am using html5. I am wondering if anyone can suggest possible causes of this problem.
Thanks in advance.
Try setting the html's height to 100%.
I once faced the same exact problem. I got it solved by removing a css file that wasn't required by the site and it was messing up the with default rules.

Resources