I would like to embed an slideshare presentation within a tooltip.
generally I want my tips to change their height/width dynamically based on their content hence I set (in my CSS)
width:auto;
height:auto;
I would like to have the width of the tooltip dictated by the inline width attribute of the iframe.
see here http://jsfiddle.net/elewinso/eNfHZ/
The meaning of width: auto depends on the properties of the element, and in this case, it means 300px, as per clause 10.3.1 of the CSS 2.1 spec. The iframe element has no intrinsic width, and you cannot (in CSS) make its width depend on the content of the iframed document. It is part of the very idea of iframe that the iframed document is rendered autonomously, independently of the settings of the framing document, except that the latter sets dimensions on the inline frame, but it needs to set them in its own context (which does not include the content of the iframed document).
So if you want to have your tooltip rendered smoothly, just don’t use iframe. Instead, use content (static or script-generated) in the main document.
If you just want to have the HTML width attribute on the iframe element take effect, just don’t override it in CSS. Any setting of the width property of an element will make the width attribute on it null and void.
100% width works:
div.sttip iframe{
width: 100%;
height: auto;
}
http://jsfiddle.net/eNfHZ/1/
You won't be able to maintain aspect ratio though, you'll have to use Javascript to calculate the height using a onResize event handler.
Related
I have a Next.js app that uses react-three/fiber here: https://github.com/ChristianOConnor/linear-vaporwave-react-three-fiber-typescript AND CHECKOUT migrate-to-nextjs13 branch. The issue is regarding css. I have a react-three/fiber object rendered in the middle of the page. I have this css:
canvas {
width:100%;
max-width:100%;
height:100%;
}
Which should make the react-three/fiber object take up it's entire container, but that is overridden and reset to 300px by 150px. See here:
As you can see, the css set to canvas for width and height is crossed out.
It should look like this (I manually in the web console changed the width and height to 100%)
I've made my source code available in the link towards the top of the post, just remember to switch the code to the migrate-to-nextjs13 branch.
So why is the canvas's width and height being overriden and how do I fix this?
<Canvas> takes the same width/height as its nearest absolute or relative parent. you don't need to target canvas in css directly, just make sure the container where canvas resides in has position: absolute (or relative) and is scaled correctly.
I'm attempting to make a html5 object within an iframe set to 100% width to no avail. At the moment the width of the inner html5 object overflows the iframes boundaries and doesn't fit correctly so I'm trying to constrain it. I've used code like so:
#quote iframe object {
width: 100% !important;
}
This doesn't seem to work. Is there any way of targeting an inner html5 element easily?
Thanks!
You cannot access inside the iframe. Iframe is like new browser window. You have no access from one window to another.
While you can't target specific items in the iframe and size them, you can scale the iframe as a whole to the appropriate size. Perhaps that is what you need instead, if your iframe's inner objects are overflowing its boundaries. Check out this quesiton: How can I scale the content of an iframe?.
Is it necessary to define the height: auto now days? and what the reasons is?
img {
max-width: 100%;
height: auto;
}
Thanks.
On an image without a height dimension explicitly set anywhere, it will actually default to height auto. So if you set max-width: 100%; the height will automatically be calculated by the browser to be the correct aspect ratio.
You may then think that it is not necessary to set the height to auto in the css but the real reason for it is if a height has been set on the img element with the height html attribute like this:
<img src="#" height="500" />
Although you may not set the height attribute explicitly yourself I know that wordpress for instance does set the height attribute on images that are pulled from the media library.
In this case if you only have set max-width to 100% the image will not be wider than the containing element but the aspect ratio will be wrong, the image most likely will be stretched taller. Use the css height auto to override the img tag height attribute.
That is why Bootstraps .img-responsive class sets height: auto;.
No, it's not.
MDN's docs on height states:
Initial value: auto
So, height property will be auto by default.
It makes sure the image is always displayed in the original aspect ratio. It's a common technique to realize responsive display of images. The important part is actually to always set only either width or height to soemthin other than auto. The browser will then resize the image, maintaining the aspect ratio.
max-width: 100%; in your code example makes sure the image is never displayed wider than its parent container.
In your code example, setting it is not necessary:
Most <img> have so-called intrinsic dimensions (such as JPG, PNG, GIF). In this case, stating neither width nor height explicitly makes the browser use those intrinsic dimension as a default for the given image. As soon as you specifiy exactly one of these, the other will be set to auto.
auto is the default value of the height CSS property. So, you don't need to define that value in the img element selector because you are not overriding it with a different value, you are just using the same default value.
It depends on what you want/are trying to do.
height:100%;
The element is going to have the 100% height of its parent container.
height:auto;
The element will have a flexible height. The height will adjust according to the height of the children elements within it.
I don't understand HTML 5. A validator says:
The marginwidth attribute on the iframe element is obsolete. Use CSS instead.
The marginheight attribute on the iframe element is obsolete. Use CSS instead.
But according to this accepted answer:
there is no way to set the marginheight, marginwidth and frameborder properties of an iframe in a style sheet.
Why do they ask me to do something that is just impossible?
Either put the thing that works in the specification or come up with a real alternative. They appear to have deprecated something and their alternative doesn't work.
What am I missing here?
The HTML5 spec does describe how the marginheight and marginwidth attributes work. What it says is:
For each property in the table below, given a body element, the first
attribute that exists maps to the pixel length property on the body
element. If none of the attributes for a property are found, or if the
value of the attribute that was found cannot be parsed successfully,
then a default value of 8px is expected to be used for that property
instead.
Property Source
'margin-top' body element's marginheight attribute
The body element's container frame element's marginheight attribute
body element's topmargin attribute
'margin-right' body element's marginwidth attribute
The body element's container frame element's marginwidth attribute
body element's rightmargin attribute
'margin-bottom' body element's marginheight attribute
The body element's container frame element's marginheight attribute
body element's bottommargin attribute
'margin-left' body element's marginwidth attribute
The body element's container frame element's marginwidth attribute
body element's leftmargin attribute
If the body element's Document's browsing context is a nested browsing
context, and the browsing context container of that nested browsing
context is a frame or iframe element, then the container frame element
of the body element is that frame or iframe element. Otherwise, there
is no container frame element.
So to achieve the same effect, you must set the CSS margin values on the body element of the contained page, not the CSS margin values of the iframe element.
The spec then goes on to explain why marginwidth and marginheight may not (or even should not) be supported in browsers:
Warning! The above requirements imply that a page can change the margins of another page (including one from another origin) using, for example, an iframe. This is potentially a security risk, as it might in some cases allow an attack to contrive a situation in which a page is rendered not as the author intended, possibly for the purposes of phishing or otherwise misleading the user.
I would tend to say you should always remain a bit sceptical of information on W3C.
If you want to boil it down to literals- they are correct- there is no direct equivalent in CSS, however, CSS does provide existing alternatives (which is why neither property is still supported, they are redundant).
marginheight is the top and bottom margin, so just use margin-top and margin-bottom...the same is true for marginwidth, use margin-left and margin-right (or specify all together in margin)
As for frameborder- simply set the border of the iFrame in CSS.
<iframe marginheight='10' marginwidth=20' frameborder='0'>
Can be accomplished in HTML/CSS with:
<iframe>
iframe{
margin:10px 20px;
border:none;
}
I have created a master page in asp.net which dont have any server side control as of now. I used div every where rather than table. There is not even a single Table right now in the page. Now When i tried to use that master page on other pages I found that div section that was holding the body content of the page is not expanding as the content is growing and content is overflowing on other sections.
Do we have any way to make div expandable with keeping minimum height fixed.
i.e. If the content is less than the minimum height set than regions should be shown with minimum height that was set else if content is more than minimum height then height starts growing with the page.
How can we do this.
This is my site where i want to make make about us and contact us page to be expandable.
You can find the css named style.css within the site.
By default a div will expand beyond the size specified using the min-height CSS property. My guess is that you are looking at the wrong thing as the cause of this issue. For your information IE6 I believe ignores the min-height property and will shrink to its content size even when the content size is smaller than the specified min-height.
UPDATE:
When you detect a browser with the problem mentioned above (i.e Internet Explorer 6) use JavaScript to measure the height of the wrapper DIV using it's offsetHeight and then subtract that value from what the min-height should be. If the value is positive then set the style.height value to the min height value.
Try this css:
div {
min-height: 100px;
overflow: hidden;
}
This overflow: hidden is a css-hack so to say. Maybe it helps you out here...