I would like to inject an iframe on the right side on a website to create a vertical panel. As "panel" I mean : it should be on the right side, cover the full visible height of the page, not be affected by scrolling, but "push" the website content (as opposed to cover).
I tried modifying padding-right on , but it doesn't work on all websites (and only affect non-positionned elements).
It should work on any website with weird layout, e.g. http://orange.jobs/
Injection is not a problem (it's a Chrome extension).
You can do this via css. To cover the full visible height and make the position of this element fixed on the site do:
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 100px;
Try not to use
height: 100%;
as this would be rendered differently by every browser. Use top and bottom instead. You can choose a width with percentage or pixel values.
This css code could be applied to every html element.
If there are issues with positioning try to add
display: block;
or
display: inline-block;
I've added a jsFiddle for this.
Update:
To make the panel not cover the sites content, add a margin to e.g. the body tag:
body {
margin-right: 100px;
}
The margin should be the width of your panel. jsFiddle
Related
As the title, I was trying to create a CSS print style-sheet and encountered this problem. When I tried to print a full-screen overlay with scrollable content, only the content displayed will be printed and the non-displayed content is somewhat ignored. I was wondering how to tweak the print mode with CSS so the full-screen overlay will have the same behavior as a regular page(the full content will be printed no matter if it's currently on display)
as you said you're on an overlay, your html's body tag could have scrolling disabled and position fixed.
// You need to remove below css properties
body {
overflow: hidden;
position: fixed;
}
I assume your overlay is an img or div with background-image set.
You could modify its positioning rules only if the page gets printed with the media-rule
#print {
/*css code on print*/
}
and the positioning for filling the eitire screen is possible with:
position: absolute; /*maybe try "fixed"*/
top: 0;
left: 0;
width: 100vw;
height: 100vh;
i Had a issue while using p:sticky for p:panel and i have fixed the width size for p:panel.
That code:
<p:panel id="scrollTopId" style="height: 21px; position:static; top: auto; width:99.4%;">......</p:panel>
<p:sticky target="scrollTopId"/>
After loading my page the <p:panel> had width:99.4% but when i scroll then the p:panel reach top and automatically its width size getting high than my width:99.4%.
Like:
element.style
{
height: 21px;
position: static;
top: auto;
width: 1290.17px;
z-index: 1005;
}
Any idea to fix the width as what i gave the width:99.4%?
It takes 99.4% of the width of the parent container, but that is also dependend on the value of the value of the css position. So if either changes due to it being sticky on top, you can see this behaviour.
Use a browser it developer tool like firebug to see what actually changes and where it originates from.
I'm afraid you have to do some advanced css to get it to behave as you want (this is in fact not a PF issue)
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.
I'm having a problem with iframe height when placed within a table cell. Firefox and Chrome set its minimum height at 150px while Internet Explorer handles lower height. When cell's height is more than 150px, iframe follows nicely.
The interesting thing is that when placed within a div its height is correct regardless of div's height being less than 150px but within a table cell height seems to follow its own rules (set by the browser).
Here's a JSFiddle
Example iframe test are as followed:
iframe in a div with height of less than 150px
iframe in a table cell with height less than 150px
iframe in a div with height more than 150px
iframe in a table cell with height of more than 150px
Additional limitation
Since it seems that iframe works fine when placed within a div that could be a nice solution, but I can't control HTML since it's part of third party controls that render iframe within a table cell. Javascript manipulation is of course always an option, but I would like to resolve this by using CSS only. And since container's height is controlled by the third party as well, I can't change iframe's height to fixed height.
This 150px limit for an iframe in a table cell has been reported as a bug in the Gecko/Webkit browser engine:
https://bugzilla.mozilla.org/show_bug.cgi?id=253363
https://bugzilla.mozilla.org/show_bug.cgi?id=324388
It has also been remarked upon by the Telerik RAD controls dev team (see here). I haven't found a definitive reason as to why it was decided that 150px is a mandatory minimum, but it does explain the behaviour you were seeing.
You could try to set the table and its children to display: block.
http://jsfiddle.net/willemvb/aM2Fx/
table,
tbody,
tr,
td{
position: relative;
display: block;
width: 100%;
height: 100%;
}
Or you could use relative positioning on the table, and absolute on the iframe.
http://jsfiddle.net/eeZHZ/
table
{
width: 100%;
height: 100%;
position: relative;
}
table iframe {
position: absolute;
top: 0;
}
I have a website scrolling horizontally using this script:
http://tympanus.net/Tutorials/WebsiteScrolling/index.html
Sometimes with this build I end up with a vertical scrollbar because, depending on the user's resolution, the copy may run further down the visible portion of the page.
I have a bit of footer information that I want to scroll along with the page horizontally, but I want it to always be at the VERY bottom of the page if there is a scrollbar, not just the window. Using this CSS:
.footer { position: fixed; bottom: 10px; left: 100px; }
Doesn't do what I want because the footer will overlay the site's copy.
So I also tried something like this:
html, body { min-height: 900px; }
.footer { position: fixed; top: 880px; left: 100px; }
Which also didn't work because the information was still always pushed off the visible portion of the page.
So I'm looking for a solution to essentially let the footer information lay wherever it naturally falls on the page, but always fixed 100px from the left as the page scrolls horizontally.
Thanks for any help!
I'm not sure you can do this entirely with CSS. I would make a javascript (or jquery) function that detects the size of the content div (or body) and positions your footer div after it (with offset if you're using jquery, or by manipulating the top margin if not). Then you can use the .scroll method on the window to move the div's horizontal position when a user scrolls to the right.