I'm sorry if this question has been already answered, but can't narrow down or ask the question right.
Here goes, I have a client's website that has three embedded iFrames,the website is for Holiday accommodation and uses a Calendar, Booking Enquiry and the floorplans, all come from different vendors.
The problem is they all have different widths and height.
The width in most instances is set to 100% that's fine, but the height is where the problem is, even if I try to set the height to what I want it, it defaults back to a set size.
The default size is 309px and is in two css files needed for the site in general.
Is there a little snippet of code that could over ride that size set in the CSS?
The site in question is here: http://aalen.com.au/aalen1-pims.php
The main area of concern is the Floor plans, they just end up in a smaller iFrame and doesn't show off the potential of those plans. Many thanks
Looking at the page, I can only see one CSS file affecting your iframe, app.css, there are other css files, but none of them change the height of the element.
I assume you're referring to this code from your website.
<iframe frameborder="0" height="400" scrolling="no" src="http://pl.an/aalen-1/embed" width="100%"></iframe>
It looks like you're setting the height in two places, once in app.css with the code:
iframe{
height:390px;
text-align: center;
}
You are also setting the iframe height with the height attribute as seen in the first code example. Try removing the height="400" attribute from your iframe tag and only have the height in the app.css file.
In future you can try using the Firefox developer tools or Chrome developer tools to manipulate the CSS on the page while it is open, in order to see what you need to change, and how it will affect the rest of the content on your page.
Related
i implemented a site (through small JS code) in my original website.
Everything works fine but yesterday i found out that when i first load the page, there is no scroll bar. If i refresh the page, its possible. I played a bit with the parameter 'height' but it didnt work.
Body-Code: <heyflow flow-id="erp-berater-anzeige" height="2000" width="100%" pass-parameters scroll-up-on-navigation></heyflow>
The page: https://entiac.com/erp-stellenanzeige/
PS: Im not deep into coding
I'd advise you to, first of all, add a css file or <style> tag in your index file, which will contain
body{
overflow: visible; !important
}
so you will be sure that isn't an issue. The site has some sort of scrollbar issue even on PC browser, so it would be better to set height:100%- hardcoded values like body height 2000px aren't a good solution.
Other good thing which you could do is divide your site in <section> your code </section>, give them height: 100vh; and make sure your js file loads in one of these sections. This way every section will be full height of your display (100vh = 100 view height). Such a split will make your site bit easier to manage.
Cheers!
I am trying to embed an iframe of an appointment scheduling frontend in my page. The scheduling program is responsive and when embedding in my page the width is fine. The problem is the frame height is very small. I have tried changing the css everyway I can think of. I have tried multiple different css tricks to no avail. Is this possible with css alone? I have access to both servers. Below is a picture of what I have so far. If the content was full height it would be perfect.
I have read multiple posts on stackoverflow and the web. I tried everything from this site, no go. https://benmarshall.me/responsive-iframes/
Here is an image of what I have now:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://xxx" allowfullscreen></iframe>
</div>
I want the iframe to be the full height of iframe content.
Any help/direction would be appreciated.
I was finally able to make this work using CSS. I had a responsive style-sheet that was overriding my css class. I added the below code and it is working for me. Fortunately I have access to the iframe content and know the height that I needed. In order for this to work this way the iframe content must be responsive already. I used the following code and things are working for me. Wish I hadn't spent so much time on something so simple, but happy I got it going.
.embed-responsive-full {
padding-top: 100%;
height: 720px;
}
My app has a functionality that loads another route in a iframe. The intention is to change some layout settings, colors etc and see how that page will look in the browser in its final and original version (100% in a desktop or laptop).
The problem is that the iframe is loaded in a div that has something like 2/3 of the system's width (it's a Bootstrap column). This is smaller than our media-query breakpoint and the iframe content is loading the responsive design. But that breaks the rule in paragraph one.
I needed it to be a miniaturized version of the original page.
Is there a way to achieve this result?
What I am trying to do is somehow similar to this on Google's PageSpeed:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstackoverflow.com%2F&tab=desktop
THe difference is that Google takes a picture and in my app the user must be allowed to interact with the page, browse other links, click buttons etc. It is a screen simulator/previewer but not responsive.
As CBroe mentioned, the problem is that the CSS for the page loaded within the iframe is using the size of the iframe as it's viewport size. You'll want to size the iframe according to how you want the actual page to display (1200px wide, for example) then use a scale transform to reduce the size of the iframe.
Your HTML could look like:
<iframe width="1200" height="600" src="https://example.com"></iframe>
Then rescale using CSS:
iframe {
transform: scale(0.3);
transform-origin: top left;
}
Here's a live example: https://codepen.io/JoshuaToenyes/pen/gMMLze
Currently my website is setup where the full image that is in it is loaded then automatically sized to fit the screen. This is done by setting image width to 100% in CSS. While it does work nicely, It doesn't seem to follow standards because I don't specify width and height in the image tag itself.
My idea now is to create multiple versions of the same webpage, where the only difference is the size of the image. Each image would have its own filename (like image1small.jpg, image1medium.jpg etc).
The problem is most people want to see the bigger picture right away but this doesn't go well with people with small screens since they have to scroll horizontally to see the whole thing.
I was thinking putting javascript at the top that redirects users who don't meet screen criteria to the page with the better sized image. Something like this:
<html>
<head>
<script>
if (screen.width < nnn){window.location.href="smallerpicture.htm";}
</script>
</head>
<body>
<p>some random text</p>
<img src="image.jpg" width=nnn height=yyy>
</body>
</html>
The thing is a page redirect will occur for people who do not meet the screen resolution requirements for the page. I'm not sure if this can qualify as a sneaky redirect to google.
Is this a good practice to use the code like I showed above to redirect users with incompatible screen size to the correct page? or should I take a different approach to display the correct sized image to the user?
And regardless of the answer anyone gives, I feel I need to specify the width and height attribute for the image tag and I want to stick to the HTML 4.01 strict standard so that the page will work for everyone.
The first draft of the HTML 5 standard was designed to work for everyone - it basically documented "what browsers actually do", rather than what browsers were supposed to do.
The rationale behind specifying the width and height attributes is that it reserves the space on the page even before the image loads, preventing the need to re-flow the content when the image loads.
Choosing to specify the attributes, but then redirecting the page, will cause a worse re-render than using the % width without the attributes. So I think your concern is unfounded as your medicine is worse than the illness.
The desire to server different image sizes is one of the use cases for responsive images, so you can take a look at that as an option rather than reloading the page. There are several fallbacks that give you wide-ranging browser support.
I'm working with Visual Studio, ASP.net, HTML, CSS, C# (for the code behind), ADO.net and Javascript/Jquery.
I'm trying to make a web page with some div block and I want that the block never exceed the browser. Do you know : how to add a height size for div even if I change the resolution of my window?
PS: I'm French so, please, don't be matter about my mistake.
Without further clarification of your senario, one method is to do the following:
HTML
<div id="test">
My div
</div>
CSS
html, body {height:100%;margin:0;padding:0}
#test {width:100%; height: 100%;position:absolute;}
Setting height to 100% usually works. NOTE: Sometimes padding may push you beyond the browser.
I've encountered screen resolution problem before and this solved my problem.
If you want your website to dynamically changing whenever your screen resolution change you can use % in your css to all your page, containers, wrappers etc. so that it will adjust on any screen resolution. (problem: This destroys your web design whenever the screen resolution is big)
The best solution I find so far and I think other professional websites also is doing is to make your width static or fixed and just let your page get on the center. This will preserve the design you made on your page and everything will stay and looks as it is.
In your CSS just add this line on your page ,containers, wrappers etc. margin:0 auto;
and your site will be centered to any screen resolution. For more examples and to read more about it check this reference How to Center a Website With CSS. If you want to test different screen resolutions without changing your actual screen resolution you could try it here. Hope this helps :)