Hi,
I want to create a popup whose content will come from outside, which I want to put that content in a iframe tag of popup.I am not sure how much content will come,It will be either large data or small data. So what I want to achieve is, Popup width&height should be auto adjusted to content width and height,and if the content is too large(if it exceeds body width and height), content div tag must be auto scrolled....Is there a way to achieve...code is appreciated...
Here is my code,What I believe would work(But Its not giving proper output)
<style>
#irmNPopupContainer{
display:inline-block;
border:8px solid rgba(0,0,0,0.4);
border-radius:8px;
}
#irmNPopupHdr{
height:30px;
width:100%;
background:#e4e4e4;
}
#irmNPopupHdr span:first-child{
padding:0px 0px 0px 5px;
font-weight:bold;
color:#333333;
}
#irmNPopupHdr span:last-child{
position:absolute;
right:2px;
top:2px;
cursor:pointer;
}
#irmNPopupContent iframe{
width:100%;
height:100%;
}
</style>
<body>
<div id="irmNPopupContainer">
<div id="irmNPopupHdr"><span>Agreement Search</span><span><img src="badge_cancel_32.png"></span></div>
<div id="irmNPopupContent">
<iframe src="http://www.w3schools.com" frameborder=0>
</iframe>
</div>
</div>
</body>
Y don't you use table instead of divs?
Do you also want to set the iframe height and width? If yes then you need to use easyxdm plugin for resizing ifrmae here is a link for plugin(this will work for cross domain. If domains are same then there is no need for this plugin you can set the width and height by JS code.)
http://easyxdm.net/wp/2010/03/17/resize-iframe-based-on-content/
Related
I know this has been asked somewhere else, but I can't find the solution. I have a simple layout. A container Div with two floating divs inside. The left div holds the navigation and has a background image. The right div has a solid background and is dynamic based on the content of each page. I am not having issues with the content div. My problem is I want the left div to "stretch" vertically to match the height of the content div. What is happening is the left is only stretching to the min-height value. Here is my CSS:
#containerTemp {
margin-left:auto;
margin-right:auto;
width:1000px;
min-height:100px;
height:auto;
}
#containerNavigation {
width:210px;
float:left;
background-image:url(../images/template/linkbgd.gif);
background-repeat:repeat-y;
min-height:500px;
height:100%;
}
#containerContent {
width:790px;
background:#FFFFFF;
background-repeat:repeat-y;
float:right;
min-height:500px;
height:100%;
}
You can see the issue by visiting this page: http://www.athensfireandrescue.org/?pid=7
I am sure it's something simple, but I can't put my finger on it. Sorry for the redundant question, but my searches just didnt' turn up viable solutions.
Heights can be a bit tricky. However the goal is to make sure the parent containers have 100% height.You have a lot of stuff going on in your web page. So I created an isolated demo to demonstrate how this works.
HTML
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
html, body {height:100%;}
.wrapper {
width:400px;
height:100%;
margin:0 auto;
}
.left {
width:198px;
border:1px solid black;
float:left;
height:100%;
}
.right {
width:198px;
border:1px solid red;
float:left;
height:100%;
}
DEMO:
http://jsfiddle.net/nFdtT/
SOME OTHER STUFF I NOTICED:
If I can offer some advice I would suggest the following:
Don't use tables unless it is tabular data. Your NAV should be constructed using a list.
Remove all inline styles and place them in a separate stylesheet.
<meta> and <style> tags should be in the <head> of your document. (For some reason you have a partial doctype heading nested inside of your <head>)
And if you aren't already, I would suggest using a CSS reset.
I'm trying to get some nested div tags to auto grow in height depending on the content inside them. A sample code is given here. The middle for example has some more content, but the height doesn't seem to grow. What is the trick to make it auto grow? I took out all the floating elements from inside the parents thinking it might be the CSS clear rule. But that didn't help either. Appreciate any help.
<div id="editmain">
<div class="ticker">
some content here
</div>
<div class="ticker">
some longer content content here
</div>
<div class="ticker">
some content here
</div>
</div>
#editmain
{
position:relative;
min-height:480px;
background-color:#84d;
overflow:hidden;
padding: 20px 0px 30px 0px;
}
.ticker
{
position:relative;
border-bottom: solid 2px #ddd;
margin:10px;
background-color:white;
overflow:hidden;
height:auto;
min-height:100px;
}
In the absolute positioning model, a box is removed from the normal
flow entirely (it has no impact on later siblings) and assigned a
position with respect to a containing block.
w3.org
Remove the absolute positioning and find another way to format your labels and inputs using width and margin. Fiddle
.tickertxtlabel
{
display:inline-block;
margin: 10px 10px 10px 10px;
width:90px;
}
I have a main div at the center of the screen at the shape of the touch pad.
Within it I have another div in which I want to display output. However, the pad itself is set on % to react on different resolutions.
See the pic below, yellow window is the whole pad and the red window is the content screen.
Now I want to make that red window exactly as the pad's screen is set on % so it could adapt on different resolutions, is there a simple way of doing that?
Yellow's css:
#mainWindow{
margin-left:auto;
margin-right:auto;
background-image:url("../images/mainWindow.png");
background-size:100% 100%;
height:100%;
width:80%;
position: relative;
border-style:solid;
border-width:3px;
border-color:yellow;
}
The red one doesn't really have anything.
I hope you understood me. Thanks beforehand.
EDIT:
html code for the screens:
<div id='mainWindow'>
<div id='screen'>
</div>
</div>
In order for a DIV to have 100% height, you need to make its parents 100% height as well:
body, html {height:100%}
Slightly confusing prompt, but see if this works for you:
http://jsfiddle.net/T3MHZ/
HTML snippet:
<html>
<head></head>
<body>
<div id='mainWindow'>
<div id='screen'></div>
</div>
</body>
</html>
CSS styles:
html, body{
width:100%;
height:100%;
margin:0;
}
#mainWindow{
margin:0;
height:100%;
width:100%;
/* SET THE PADDING TO THE PX MEASURE OF THE TABLET BORDER */
padding:50px 40px 50px 40px;
/* box sizing will make sure that the usable content size is minus the padding value */
box-sizing:border-box;
position: relative;
border:1px solid black;
}
#screen{
width:100%;
height:100%;
border:1px solid red;
}
By using a combination of measured padding on #mainWindow to account for the tablet border, and box sizing of border-box to assure exact fit of the #screen content, this should give you the flexible layout you're looking for.
Don't forget your viewport meta tag! ;)
I'm not sure if I'm understanding what you want correctly, but try
height: 100%;
on red.
min-height:100%;
You have no content, it's going 100% of it's parent content. Diodeus's answer would work as well for the same reason, if the body, html are 100% window height then the divs inside will look at that as content.
http://jsfiddle.net/calder12/Jq7xR/
<body>
<div class="container">
<div class="outside">
<div class="inside"></div>
</div>
</div>
</body>
.container{height:250px;width:400px;}
.outside{border:1px solid red; min-height:100%; height:100%;}
.inside{border:1px solid green; min-height:82.5%; margin:5%}
To be honest even my brain is struggling with the 82.5% height to get the margins to work right =/ But I do believe that is what you're after.
Here is the segment of css:
.imgdiv{
float:left;
padding:0px;
margin:0px 0px 10px 0px;
background-color:yellow;
width:55px;
height:68px;
}
.zheader{
padding:0px;
margin:0px 0px 0px 65px;
}
And here is the segment of html
<div>
<div class="imgdiv">
<!-- <img src="images/redzone.gif"> -->
</div>
<div class="zheader">
<h1>Red Zone = Danger</h1>
<h2>Everything is RED</h2>
</div>
<p></p>
</div>
I want to have the image floating to the left, and the h1/h2 floating to the right of the image. The HTML is rendered properly on the browser (Chrome, IE, etc)
Put the HTML thru xhtml2pdf, the imgdiv always takes up the whole parent div width and thus push the h1/h2 down below, regardless the width and height values. Comment out the image, then the pdf looks exactly how I want it to be.
My conclusion is the image must have some effect on how xhtml2pdf renders the image and the div contains the image.
What will be the proper way to handle my situation?
Thanks
I have a title (h1) which is centered on the page. I want to add lines to the left and right of the title, so that they fill the rest of the page's width.
However, I want the lines to adapt to the title's width, which is dynamic. So, I want the line's width to be dynamically calculated.
Here's an example of what I'm trying to accomplish: http://jsfiddle.net/cAEqE/1/
In the example I set the lines' width to 35% so they could get the effect that I want. However, if the title is longer, it will break into 2 lines, and I don't want that to happen.
My boss told me to avoid javascript, so it would be excellent to use only CSS. However, if this turns out to be impossible, I will turn to good old jQuery.
Cheers!
Edit: the website has a background-image, so I can't use a background on the h1. Thanks!
You can write like this:
CSS
h1 {
font-size: 26px;
text-align:center;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
background:#fff;
padding:0 10px;
}
#title {
text-align:center;
border-bottom:1px solid #97999C;
height:10px
}
HTML
<div id="title">
<h1>TITLE TEST</h1>
</div>
Check this http://jsfiddle.net/cAEqE/27/
UPDATED
Check this http://jsfiddle.net/cAEqE/63/
Instead of using divs for the lines, you should use a background image on the parent div.
For example, your HTML would be much simpler:
<div id="content">
<h1>TITLE TEST</h1>
</div>
And your CSS would be:
h1 {
font-size: 26px;
background-color: white;
display:inline;
padding:0 30px;
}
#content {
text-align:center;
width:100%;
background:transparent url(https://jira.atlassian.com/s/en_UKtovngv/725/4/1.0/_/images/mod_header_bg.png) repeat-x left center;
margin:0;
padding:0;
}
I've stolen a fair bit of this code from Jira which does basically what you're after.