What I am trying to achieve is to have a scrollable, auto-re-sizable div inside an iframe.
The problem is that iframe, unlike a div, has a scroll in itself, therefore the overflow-y property of my div is ignored, and entire content of my div is displayed, instead of a just a small portion.
The best explanation is a sample, which you can view by clicking
http://www.alocet.com/VictorsTestFolder/Sample/Default.html
When I've added CSS "html,body,form{ height:100%; margin:0px; padding:0px;}" to IFrame page, it almost worked, but unfortunately I wasn't able to get rid of duplicate scroll-bars.
Any suggestions?
I'm going to go out on a limb and say that you can't really do the thing you want to do without JavaScript.
Divs just don't work like that. They typically overflow as far as needed, spilling wherever. The only way to keep a div from being sized according to its contents (I'm speaking on experience) is to give it an explicit height. Otherwise, it will either spill out of its container or, if its container is its own block formatting context, cause its container to start scrolling.
The iframe appears to be its own context. Thus, you MUST set an explicit height if you want the div it contains to keep itself compact. Two options I see:
You can add a parameter for the server to change the page's height:
<iframe src="Default_files/IFrame2.htm?h=400"
Then, create a containing div for the whole page with a fixed height that fits within the iframe. Everything inside of it should flow properly. Then, set the div that might have a lot of content to a fixed size.
The other option is to use JavaScript, which I think can obtain exactly the variables you're looking for using document.documentElement.clientWidth. See this article for more details. Even in this case, you still end up setting the framed page to a fixed height.
Both methods are sketchy workarounds, but I'm somewhat confident you can't do what you want with just CSS.
whats wrong with your 3rd example? you have a fixed size iframe and the div inside still has a scroll bar.
Also what do you mean by scrollable, auto-re-sizable div surely if it is auto resizing it won't be having a scroll bar?
otherwise I'd suggest using a div inside a div and you will have a lot more control and your content will still be showing on search engines.
So implementation of a simple javascript that executes onload solved my problem... well, partially, since if you have a table inside a fixed height div, it goes over the specified div height... so I am trying to find a solution for this problem now...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
html, body, form
{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" language="javascript">
window.onresize = doResize;
window.onload = doResize;
function doResize() {
document.getElementById("popupHeight").style.height = (window.innerHeight - 40) + 'px';
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="popupHeight">
Text before the div
<br />
<div runat="server" id="tblTabGroups" style="overflow-y: scroll; height: 100%;">
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
</div>
Text after the div
</div>
</form>
</body>
</html>
Related
How can we set height of green box equal to the height of red box with scroll in green box. Please note that we cannot set height of red box, it is dynamic and may be changed as content changes.
https://jsfiddle.net/guqfz069/13/
.container{
display: flex;
height: 100%;
}
.left{
background-color: #f00;
width: 60%;
height: 100%;
}
.right{
background-color: #0f0;
width: 40%;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>
with position and absolute for .right you can do that
.container{
display: flex;
height: 100%;
position: relative;
}
.left{
background-color: #f00;
width: 60%;
height: 100%;
}
.right{
background-color: #0f0;
width: 40%;
position: absolute;
right: 0;
height: 100%;
overflow-y: auto;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>
You can do this:
.container {
display: flex;
width: 100%;
}
.container>* {
flex: 1;
}
.left {
background-color: #f00;
width: 60%;
}
.right {
background-color: #0f0;
width: 40%;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>
DEMO HERE: https://jsfiddle.net/ayL75j4h/
I would use CSS Grid to achieve this effect.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
height: 100%;
}
This will make a grid with two columns, one for .left, one for .right with the same width & height; The fr (fractional unit) makes sure of that.
Let me know if this helps you
If you add align-items: flex-start and maybe add height: 100%; to child elements?
Use-->> max-height:130px; overflow:auto; -->> in both class left and right,
like this
.left{
background-color: #f00;
width: 60%;
height: 100%;
max-height:130px;
overflow:auto
}
.right{
background-color: #0f0;
width: 40%;
max-height:130px;
overflow:auto
}
and u will get this
Hope this helped you
Add height:auto to .left
.left{
background-color: #f00;
width: 60%;
height: auto;
}
UPDATE
Based on #Riz's comment
I believe we'll need some js to achieve this
const leftHeight = document.querySelector('.left').offsetHeight;
document.querySelector('.right').style.height = `${leftHeight}px`;
since offsetHeight includes margin and padding, it'll be better if box-sizing: border-box is set
I have recreated a minimal reproducible example for the following question p:calendar popup remain below from calendar input in dialog when scroll (on IE and Chrome). I have also been encountering this issue and just figured out what was happening but I do not know how to fix it. The appendTo suggestion in the referenced question for selectOneMenu does not seem to be an attribute we can apply to the calendar.
Here is how to reproduce:
If the parent window is scrolled to the top, the calendar popup on the dialog is positioned correctly
If the parent window is scrolled down a little, the calendar popup on the dialog is positioned a little further down from the input box
The distance offset is seems relative to the amount the parent window is scrolled.
the top value seems to be the culprit.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions" xmlns:o="http://omnifaces.org/ui" xmlns:of="http://omnifaces.org/functions">
<h:head>
<title>Calendar</title>
</h:head>
<h:body>
<h1>Calendar Popup Issue PF 8.0</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h:panelGrid id="gridId">
<h:panelGrid id="panelId">
<h:form id="laborForm">
<p:commandButton oncomplete="PF('dialogWv').show()" title="Click to open dialog" update="dialogId" value="Open dialog with popup time only calendar" />
</h:form>
</h:panelGrid>
</h:panelGrid>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p:dialog id="dialogId" header="Test" dynamic="true" widgetVar="dialogWv" modal="true" showEffect="fade" hideEffect="fade"
resizable="true" width="400px" height="100px">
<h:form id="formId">
<p:panelGrid style="margin-bottom: 5px; border: 2px; width: 100%;" id="pg1">
<p:row>
<p:column colspan="2">
<p:calendar value="#{cc.attrs.viewBean.backfitTime}" timeOnly="true" pattern="HH:mm" showMillisec="false" showSecond="false" required="true"
requiredMessage="Time is required" rendered="true" />
</p:column>
</p:row>
</p:panelGrid>
<br />
</h:form>
</p:dialog>
</h:body>
</html>
EDIT
I am unable upgrade to PF10 at the moment due to too much of my site's look and feel getting broke with 10. So my short term fix was just to use the datePicker but with PF8. But the datePicker with PF8 doesn't render nice. Plus the mouse pointer covers the hour and minute numbers when incrementing up.
Clicking an up or down arrow is inefficient.
This is fixed in PrimeFaces 10.0.0RC1 or higher.
Issue: https://github.com/primefaces/primefaces/issues/6583
You should use p:datePicker instead of p:calendar. DatePicker is designed to replace the old p:calendar component. The p:datePicker (at least the one in PrimeFaces 10) uses absolute positioning instead of fixed, so that should solve your problem.
See also:
Can I position an element fixed relative to parent?
https://primefaces.github.io/primefaces/10_0_0/#/components/datepicker
After a long hiatus I'm currently trying to do a page with a menu and a scrolling pane on the right side.
It works well except that the scroll bar does not go down the full height of the page instead going about 400-600 px vertically (all content else is scrolled). The menu though that I have works well with staying fixated on top. Now my question is how can I do a scrollbar that goes down the remaining window (except the menu space)?
HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mytitle</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<div id="header">
<div name="phone">
<img src="images/phone" alt="phone" /> 000-000-000-000
</div>
<div name="eMail">
<a href="mailto:mymail#mail.com">
<img src="images/email.png" alt="email">
office#blahblah
</a>
</div>
<div id="menu">
<img src="images/logo.png" />
<div name="Mh">
Home
</div>
<div name="Mw">
blah
</div>
<div name="MOffers">
Offers
</div>
<div name="mD">
T
</div>
<div name="mI">
Infos
</div>
<div name="mC">
Kontakt
</div>
<div name="mI">
Impressum
</div>
</div>
<div id="banner">
BANNER
</div>
<div id="content">
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
b <br />
<div name="w">
</div>
<div name="a">
</div>
<div name="o">
</div>
<div name="d">
</div>
<div name="Infos">
</div>
<div name="Contact">
</div>
<div name="Impressum">
</div>
</div>
</div>
</body>
</html>
css file:
body {
}
#header {
position: fixed;
width: 100%;
}
#content {
width: 99%;
height: 100%;
overflow-y: scroll;
overflow-x:hidden;
}
As a note here: The #content part I only added after seeing that even though there was an overflow there was no scroll bar appearing.
Try with this, as said Gerdi the way is flexbox: https://jsfiddle.net/Lm2dr14o/1/
body, html {
height:100%;
overflow:hidden;
}
#header {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
display:flex;
flex-direction:column;
}
#header>div {
flex-grow: 1;
}
#content {
width: 98%;
height:98%;
margin: 1%;
overflow-y: scroll;
overflow-x:hidden;
flex-grow: 2;
}
Hope this help you.
I'm doing a fixed sidebar that I resolved here in stack overflow, so now I have a fixed bar with this code:
<div id="main" style="width:100%;background:red;">
<div id="sidemenu" style="float:left;height:200px;background:#000;">
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:200px;overflow-y:scroll;background:silver;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
It has a height of 200px (just to see how it works), but the sidebar I need has to have a height of 100% all the time. I have seen various posts here in stackoverflow that say that faux columns is a option: http://www.alistapart.com/articles/fauxcolumns/ . But inside my <div id="sidebar"> I'll have, in some cases, 2 more DIVs: #menu and #submenu, so the width will vary.
What can I do? I don't need support for old browsers: IE9, latest Chrome and latest Firefox is OK.
I'd add a border-left to the body, get the longest menu item and match it's width in ems, then set a negative margin on the sidemenu. Then it'll appear to match whatever height the content div takes up (either if you set it explicitly, or if content expands it):
<body style="border-left: 10em solid #666;">
<div id="main" style="background:red;">
<div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:400px;background:silver;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
</body>
For a sidebar with a textured background (one method), you could set the width in pixels to match the width of the texture (not as flexible as ems but if set to the widest item, should be okay) and the texture repeats along the y-axis:
<div id="main" style="background: url(pattern_157.gif) repeat-y;">
<div id="sidemenu" style="float:left;width:200px;background: transparent;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:600px;background:transparent;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
Is the problem that your column background has some kind of gradient? If it's just solid colour, could you not just leave the widths of the 2 columns unset, and tile the background image on the x axis as well as on the y axis?
Here is another idea for this using fixed positioning and height of 100%. I also put enough breaks in there to show how the content will scroll, but the sidebar and its contents will stay where they are.
<body style="margin:0;">
<div id="main">
<div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="background:transparent; float:left; margin:0 0 0 220px;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
</body>
I have a simple question probablly easy for someone...
I want to change de default.aspx background from white to a simple IMAGE (.jpg) and i couldnt do this adding :
< param name="background" value="/images/fondo.jpg" >
What`s the right ay to do this?
Thanks
<body background=BackgroundImage>
In your case,
body background="/images/fondo.jpg">
I cannot add a Background mark to the Body...
Here is the code:
body>
form id="form1" runat="server" style="height:100%">
div id="silverlightControlHost">
object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
param name="source" value="ClientBin/CCARS.Client.xap" />
param name="onError" value="onSilverlightError" />
param name="background" value="white" />
param name="minRuntimeVersion" value="4.0.50826.0" />
param name="autoUpgrade" value="true" />
param name="splashscreensource" value="Splash.xaml" />
param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
param name="onSourceDownloadComplete" value="onSourceDownloadCompleted" />
a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none">
img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
style="border-style: none" />
/a>
/object>
iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
border: 0px"></iframe>
/div>
/form>
/body>