I do not do CSS, just now that is why I am having difficulty tweaking this.. I am having prob with my pop up that uses Iframe. In css there's style like this:
iframe {
border:none;
height:440px;
margin-left:4px;
margin-right:4px;
**min-width:760px;**
overflow:auto;
width:98%;
}
it produces an html when page is viewed like this:
<div style="left: 404px; top: 75px; visibility: visible; position: absolute; overflow: visible; clip: rect(auto auto auto auto); " class="dialogPanel"><div class="">.....</div>
that's why no matter how I set the height in the code behind, it would not resize accordingly:
profileFrame = new Frame(url);
profileFrame.setHeight("350px");
profileFrame.setWidth("450px");
panel.add(profileFrame);
content.add(panel);
but when I removed the min-width from the CSS iframe, it already resized to my wish.
Q: how do I not use the iframe style to this certain iframe of mine? I do not want to remove the min-width as this style is being used by all iframes in the application.
I tried removing it by using profileFrame.removeStyleName("iframe"), I also tried all other removestyle methods available but did not work.
Any suggestion pls? thanks
You have set a class to this iFrame so try
iframe .dialogPanel {
min-width: 0px;
}
this will make only iframes with the class "dialogPanel" have no min-width, and will leave the rest with their min-width
Related
is there really any way to hide scrollbar in Firefox, without manipulating the padding/margin without set to absolute, and without creating a browser specific css file, I just want to know is there any clean solution like this.
::-webkit-scrollbar {
display: none;
}
Unfortunately this only works for webkit browsers.
html { overflow: -moz-scrollbars-none; }
you can use a trick
add a parent to your elements with this style
html, body{
height: 100%;
width: 100%;
overflow:hidden;
}
#container{
height: 100%;
width: 100%;
overflow: auto;
padding-right: 10px;
box-sizing: content-box;
}
this trick send the scrollbar out of the view , it's exist but user didn't see it
If the size of the content is less than the size of the window, usually Firefox will hide the scroll.
The problem that happens sometimes is that if the size of the content changes for any reason or the size of the window changes to the content, the scroll bar will reappear and cause a mutation in the page.
If you want the scroll to always be visible in Firefox, you can use the following command
html {
overflow-y:scroll;
}
So I'm trying to understand why jQuery-ui's autocomplete, with appendTo used to attach the results dropdown to a div, still dynamically positions the results with absolute positioning. Like this:
top: 38px;
left: 8.5px;
width: 251px;
Creating issues like:
Can I turn off this dynamic positioning? I would like full control over the UI for fluid responsivity and custom styling. I cannot find an answer online.
UPDATE:
So it seems that each widget has different rules, is this correct? I figured out responsive width for jQuery-ui Dialog popup by
$("#dialog").dialog({ width: auto });
& in my stylesheet, applying a max-width to the wrapping dialog class.
.ui-dialog{
max-width: 720px;
}
However top and left are still a mystery as of yet.
You can change the CSS used by either editing the jQuery UI CSS file, or else just overriding it in your own CSS, such as:
ul.ui-autocomplete { width: 250px !important; max-height: 300px; overflow-y: scroll; overflow-x: none; }
this is all over the stackoverflow,but it doesn't work for me.
using twitter bootstrap 3, i need to set the jumbotron class div to full display height.
this is my test site:
http://test.ulkas.eu/
i read i shall include
html {
height: 100%;
}
body {
min-height: 100%;
padding-top: 50px;
}
but it still doesn't work. maybe i got some syntax error somewhere?
In order to apply 100% height property to inner divisions you need to mention the same property to all the parent divs. So add
body{height: 100%;min-height:100%;padding-top:50px;}
.jumbotron{height:100%;}
to your body as well as to jumbortron class
The height of your html / body will always only be the height of your content - those tags behave slightly different to standard div / block tags. To get something to be truly 100% high your best bet is to remove it from the standard flow of the page using position: absolute / fixed, then set your div to be 100% high. Something like this:
.fullheight {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 2;
}
I think it's always worth setting a z-index on anything I position outside the normal page flow, allows you to control which parts appear on top of others.
I am working on Bootstrap theme where its responsive. I disable the responsiveness on a child theme by adding a code in functions.php. All works well , no problem.
Now the parent container, is now fixed:
HTML:
<div class="container">
CSS:
.container{width: 940px;}
But I would like the footer section to have sitewide background color. How do I able to do this?
I have tried setting different methods like width:auto, width: 200% ,but its not giving me the desired result.
Supposing this is the footer section:
<footer>
My footer
</footer>
My attempted CSS on a child theme(not working)
footer {
background: #CCCCCC;
width:100% !important;
position:absolute !important;
}
Also is this possible without setting too many !important on CSS property? Thanks.
If your footer is inside the div.container which has width:940px; then giving your footer 100% width will make it 940px wide.
You need to have the footer outside the container to give it 100% width of the body.
When you give 100% width, the element gets its container's width. So in your code, even with the important keyword, it'll get the container's width (because that what 100% is supposed to do).
Just take the footer outside of the container.
Then it'll work and you won't need this !important keyword.
As others have mentioned, removing the footer from the parent container of .container will allow the width of it to be the entire size of the viewport/document.
If you are unable to change this level of structure of the HTML due to your template, you can fake the width using pseudo-elements, like so:
footer {
position: relative;
background-color: lightblue; /* Match the color of the body background */
}
footer::before, footer::after {
content:"";
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
/* some huge width */
background-color: inherit;
}
footer::before {
right: 100%;
}
footer::after {
left: 100%;
}
See jsFiddle.
Taken from CSS Tricks: Full Browser Width Bars
I would like to have an IFRAME dynamically sized using the following CSS:
#myiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
However, no browser seems to support this.
In good browsers I could wrap the IFRAME in a DIV with the quoted CSS style and set the height & width of the IFRAME to 100%. But this does not work in IE7. Short of using CSS expressions, has anyone managed to solve this?
Update
MatTheCat answered with a scenario that works if the IFRAME is located directly under the body and the body/html tags have height: 100% set. In my original question I did not state where the IFRAME was and what styling applied to it's container. Hopefully the following addresses this:
<html>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
and let's assume the following container CSS:
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
if you now place height: 100% on the IFRAME it will not size correctly.
Use a div for the padding on all sides. Place the iframe in it using 100% of its parent div.
http://jsfiddle.net/sg3s/j8sbX/
Now there are a few things you need to remember. An iframe is originally an inline-frame, so while modern browsers don't care, set display:block on it. By default it also has a border. Any stying we want to be done needs to be done on the iframe container instead or we'll break the 100% container boundry.
And this is how we would put an element above it:
http://jsfiddle.net/sg3s/j8sbX/25/ (edit: my bad, you actually need to set border=0 on the iframe for IE7)
Should work fine in IE7+ (IE6 doesn't like absolute positioning + using top/right/bottom/left to give it layout)
Edit Some extra explanation
We need to style the iframe container mainly because an iframe on itself doesn't let itself be sized with top/left/bottom/right. But what will work is setting its width and height to 100%. So starting from there we simply wrap the iframe in an element which we can reliably style to make less than the window 100%, the size which elements default to when none of their parents have a static height/width.
Thinking about it we can actually drop the absolute and block. http://jsfiddle.net/sg3s/j8sbX/26/ Might want to doublecheck IE7 on that though.
After we make the iframe 100% high and wide we cannot put any margin, padding, or border on it because that will be added to the already 100% height & width. Thus making it larger than its container, for divs that will result in an overflow:visible, simply showing everything going over the edges. But that in turn would mess up the margins, paddings and offsets we gave our elements.... In fact to make it be only the 100% height and width you have to make sure you removed the iframes default border.
Try it out by adding a larger border (like 3px) in my example to the iframe, you should easily be able to see how it's affecting the layout.
Why don't you use height & width? You'd still get an absolute position by setting top/bottom & left/right, as in the example below.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0px;
height:100%;
width:100%;
}
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
#myiframe {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
This works for me (Tested on IE9).
html,body {
margin:0;
padding:0;
height:100%;
min-height:100%;
}
#myiframe {
width:100%;
height:100%;
border:0;
}
work fine for me even with IE7.
I would say take a look at this stack overflow question. It might help:
Make Iframe to fit 100% of container's remaining height
You can try to use this:
document.getElementsByTagName('iframe')[1].style.borderWidth = '0px';
document.getElementsByTagName('iframe')[1].style.backgroundColor = 'green';