I put a Google+ buttom on my site. This is the code:
<div id="gplus"><div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120"></div></div>
#gplus {
position: fixed;
bottom: 40px;
left: 5px;
z-index: 1;
width: 120px;
overflow: hidden;
}
But the iframe that Google put into inner div is 1200px width and cover content. How to limit it? I fixed width of #gplus and add overflow:hidden but it doesn't help. :/
max-width: 500px; or any maximun width you want, in this way you can limit nor control the width of a element.
You can add a new style definition to make the overflow inherit into the inner div. eg.
#g-plusone {overflow:inherit;}
This won't work in IE7.
You may find that you need to add a class definition to the generated iframe so for instance add a class definition for
#gplus iframe {width:120px;}
This will set any iframe in the #gplus div to have a width of 120px.
UPDATE : having looked at your site the following style should fix the issue
#gplus iframe {min-width:120px !important;}
Google is setting the minimum width of it's frame, but you can override it by setting the min-width and using the important override.
Related
I'm trying to achieve the last piece of my general template for articles in a wordpress blog.
I've got an header/menu which is position: fixed.
Then I have a div .postThumbnail with a child img which is position: fixed so the following content can overlap the img when scrolling.
I also have a div that copy the img'height as the image is fixed.
Fact is, this could be a lot easier if .postThumbnail had an height, but it's value is equal to 0.
I do not know why.
What I intend to do is to set .postThumbnail's max-height equal to the height of the viewport minus the height of the header/menu, so if an image is taller than the viewport, it won't overflow and the following content which can be scrolled will appears right after the image (and not after the total height of the image).
Basically, I need to define .postThumbnail's height so I can apply an overflow:hidden.
Any idea?
I created a JSFiddle so you can actually see what I'm talking about.
Some of the current code :
#single\.php .postThumbnail img {
position: fixed;
z-index: 1;
width: 100%;
min-width: 640px;
height: auto;
}
#single\.php .postThumbnailGhost { /*keep as security even if no content is integrated*/
visibility: hidden;
}
What I need to achieve :
#single\.php .postThumbnail{
max-height: calc(100vh - 48px);
overflow: hidden;
}
With this fixed, I could fix the rest of the page as the content's min-height must be equal to the image's height in order to cover it properly.
Well,
I really simplified everything since I don't need a .postThumbnailGhost in this new version.
I also made it in Jquery as I couldn't do it fully in CSS ( :'( ).
Here is the script that is doing the job :
function refreshDynamicContent(){
$('.postThumbnail').height($('.wp-post-image').height());
$('.postThumbnail').css('max-height', $(window).height() - ($('header').height()));
$('#post').css('min-height', $('.postThumbnail').height());
}
refreshDynamicContent();
$(window).on("resize", refreshDynamicContent);
New JSFiddle
And I don't need an overflow anymore because I can set the height to the window's height!
YAY!
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)
In css when i give my div height a percentage value the div completely disappears, heres what im doing
<html>
...
...
<div id="logcontainer">
<div><div>
<div></div>
</div>
this is not the actual html but it sums up what im trying to do, heres my CSS
#logcontainer {
width:100%;
min-height:100%;
margin: 0px;
padding: 0px;
background-color: #7f7f7f;
}
whenever the height has a percentage value the div disappears, the width works but no height?, when I use ems or rem it works perfectly, any ideas?
I think all you need is html, body { height: 100% }, if i'm understanding your question correct
Set height of body 100%, then it will work. Since you need to set a 100% height on your parent element, in this case your body. The div tag is a container, but it is contained in the body tag... the body tag, unfortunately is not treated the same on all browsers... in some it is sized to fit the browser's available space... in some browsers the body tag is sized to fit the minimum height required to fit the current contents.... So a div tag set to 100% would size differently on each...in fact if empty, the div tag might not even show up on some browsers, since an empty body would be, potentially, 0px high...
html, body
{
height: 100%;
width: 100%;
margin: 0;
}
Here is the solution :
html, body { height: 100%; }
but it just a solution you need to understand why is happened , this happened because your element is a block level element which wrap up your whole content width and height width as a 100%
but this is not the case with height you need to specify the related to content to give a height in percentages like as above body has given 100%
enter link description here
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
http://magicdynamic.com/fit/
in this demo page i have 2 problems:
1) My footer (I followed those guidelines http://ryanfait.com/sticky-footer/) is causing a scrollbar to appear on Firefox only, and I can't understand the reason
2) div#containerTop is used by the footer css and it fits the whole page height
min-height: 100%; height: auto !important; height:100%
the problem is that I would like to have div#rightContainer with a certain height, i would like it to stretch for almost the whole page, (leaving some pixel between it and the footer). Obviously i tried with height in % and it didn't work.
I tried some CSS i found around but those didnt work too, probably because div#rightContainer is already inside a div container using itself a css height trick.
What can I do without recurring to javascript?
if you want to use % as height you have to put that in every parent element:
<body style="height: 100%;">
<div style="height: 100%;"></div>
</body>
maybe you could set the container absolute, but that not really a proper coding style.
First set div's parent height and width to 100% and set overflow in html tag to hidden as:
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body{
width: 100%;
height: 100%;
}
and then set your div's width and height accordingly......
Here overflow property does the task. If now body exceeds the width/height of actual window size then reduce the size of body tag accordingly.
But this will surely remove the scrollbars.
It worked for me.