I am working on WCAG 2.0 ,one of the requirement says Use relative rather than absolute units in HTML attributes. Use percentages rather than pixels for sizing frames and tables.
The actual problem is with iframe controls. When ichange the width its fine , but the height is not changing when it changed from px to %.
The content of iframe is cross domain.
<div xmlns="http://www.w3.org/1999/xhtml">
<iframe id="led_frame" width="1000" height="900" frameborder="no" title="Employment Dynamics" src="http://lehd.did.census.gov/led/index.html" name="led_frame" style="margin- left:-35px">
..............
</iframe>
</div>
i tried
1. adding height to container div.
2. adding height to body tag.
Any suggestion will be helpful..............
Related
I am trying to give a div a dynamic height depending on screen size. In the div I have a calendar that has multiple lines of content, that can be shown or not (user's choice), e.i. the calendar's height is not fixed. With that in mind I have div's height set to auto. Which works fine (the height is set according to number of lines in calendar).
The problem arises when I make the browser's height smaller than the amount of height that calendar needs. It becomes a scroll which is not a problem, the position of the scroll is. The scroll is placed on the entire div not on the calendar in the div. The scroll is correct, if the div does not have it's height set, but it does not dynamically shrink to fit only the content (it stays the same height no mater if there is content of not) and I am trying to avoid that.
I suppose the solution is to say that if the div has enough space to use auto and if not it should have the height of it's parent. The min does not take parameters such as auto. I am a bit lost as to how to write code correctly to achieve this preferably using only CSS.
EDIT:
html:
<html>
<body>
<div class = "calendar">
<div class = "content">
<\div>
<\div>
<\body>
<\html>
CSS:
body {height: 100vh; overflow: hidden}
. calendar {overflow-y: auto;}
. content {height: auto;} \\the problem
The height of calendar in JS is set to "parent"
Well, by your answer I am sure you want to make the content responsive. So there is an easy trick or you can say a cheat sheet for your requirement.
Step 1: Include Bootstrap 4 CDN scripts
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
Step 2: In your HTML, write a classname as 'form-group' to adjust your calendar's height content as per the screen size.
<div class="form-group">
<div class = "calendar">
<div class = "content">
<\div>
<\div>
</div>
Step 3: Run your project and see how your width of the container adjusts according to the browser when you drag or make it small.
Hope this helps.
I am using <iframe src="https://example.com" width="100%" height="610"></iframe>
i want to make the iframe height same as my browser, I don't know how, i tried the following and none of it works:
height="100%"
height="calc(100vh)"
also i src my iframe into my left nav bar and even i change my navbar height, still doesn't change iframe height even when i put height="100%".
Pls help me, i prefer using css over javascript, but if i have to i am happy to use javascript .
FYI you only need to use calc() when doing math, like calc(100vh - 100px)
vh is a part of CSS3 so using the height= attribute won't work (it only supports pixels or % in HTML4 and only pixels in HTML5); you need to use style="height: 100vh;" instead.
I would get out of the habit of using width, height, or any other attribute that changes the appearance of an element and use CSS exclusively, via either class or style.
I have a layout question for HTML, concerning a div with an iframe in it. Right now I have:
<div style="width:100%;height:20px">something</div>
<div style="width:100%;height:100%;">
<iframe src="whatever" style="width:100%;height:100%" />
</div>
Basically, I'm looking for Auto,* layout (the top is fixed size, the bottom is "take the rest"). If you do this, and the content in the iframe is also relative at 100/100%, the browser scroll bar does not work correctly.. it always allows scrolling for 20pixels (because apparently relative/set size doesn't work how i think it works), and if you re-size smaller than the iframe, it doesn't work as expected. If i set the height of the 2nd div to some value, like 20px, then it works as expected, but since I don't know the size of the iFrame child, I can't do that..
Am I doing something fundamentally wrong here?
http://jsfiddle.net/KphGQ/ .. Take a look at this
I am trying out Products.Carousel. I created a Carousel for my homepage,and added two Banners, which rotate automatically after n seconds.
Problem is I am supposed to set the width and height in the Carousel settings, or leave those values blank to use the ones for the first banner.
What I wished is that the carousel used the same width for the main content area. I tried to set a fixed value, but of course it won't work in different resolutions (the banners might invade the right portlet area, or might be too short for the main content width).
Any ideas on how I can work this around?
You should be able to give the Carousel a variable width by overriding Products.Carousel.viewlet (either in filesystem code or in portal_view_customizations). You'll probably want to base the Carousel width on the width of another element, like the #content div:
<div tal:condition="view/available"
tal:attributes="id view/element_id;"
class="carousel">
<tal:banners tal:define="banners view/banners;"
tal:condition="banners"
tal:content="structure banners">
Banners
</tal:banners>
<tal:pager tal:define="pager view/pager;"
tal:condition="pager"
tal:content="structure pager">
Pager
</tal:pager>
<script type="text/javascript" charset="utf-8" tal:content="string:
(function ($$) {
$$('#${view/element_id}').ploneCarousel({
height: ${view/height},
width: $$('#content').width(),
transition: '${view/transition}',
speed: ${view/speed},
delay: ${view/delay}
});
})(jQuery);
">
</script>
</div>
I don't have an answer, only ideas.
can you set a class on the banner area that will set its width the same as the main content area?
can you use a % width?
or the evil, but successful, method I've used:
flash banner using swfobject.js
As I am designing a liquid layout all my width and height are in %. but while designing I have to see whats going on with my css so I gave height in pixels (temporarily) as that height (in %) will be filled from data from database.presently no database is designed. I cannot use pixels so i tried min-height property to see my css result.. but thats also not working.What sholud i do?
If you use a % height, the height is calculated in relation to its parent container. This often trips people up as the following cannot reasonably be calculated:
<body>
<div style="height: 100%;">Hello World</div>
</body>
We are asking the browser to render the div at "100%" - but the browser cannot apply this style as the body has no explicit height.
To fix this, you need to give a height to the html and body, like this...
html, body {
height: 100%;
}
This now gives the div a height to work to - which will essentially equate to the size of the view port.
This applies to height and min-height.