I'm trying to put an iframe into a webpage, but no matter what I try to put in either the iframe properties or the custom CSS section of the website builder (or how many times I try to add !important to anything from width to right-margin), I can't get the iframe to extend rightward further than the page's preset width.
Here's an example of the page and iframe that I'm working with: (Edit: no longer available)
I need that script/iframe to be wide enough to show the search area. It seems pointless to copy and paste code and attributes I've tried setting, because nothing I do seems to have any effect, but just for showing how much I have no idea what I'm doing, here's my iframe code:
<iframe id="idxFrame" style="padding:0; margin:0; padding-top: 0px; overflow-x:auto;
width:1000px!important; border:0px solid transparent; background-color:transparent;
max-width:none!important; right-margin:-200px!important" frameborder="0"
scrolling="on" src="http://www.themls.com/IDXNET/Default.aspx?wid=8MSsp7Pf9eI55yjkDuB%2blX5awn7LnnVXh5PNYhq2ImAEQL"
width="1200px" height="900px">
</iframe>
The "Website Builder" that I'm forced to use to make these kinds of pages is infuriating, but it does have a "Custom CSS" area where I can input additional CSS information. Is there something I could generically use to set iframes to their own widths?
The reason it is being cut off is because there are some parent containers in the page structure that have the attribute overflow: hidden; to ensure content that is too wide doesn't break the layout.
I don't know how your system works but you could try adding the following code to your Custom CSS area:
.LayoutContainer {
overflow: visible !important;
}
.LayoutContainer div div {
overflow: visible !important;
}
Be aware that it will mess with your layout and spawn a horizontal scroll-bar on smaller screens.
Update:
The above CSS would affect your entire website. If you really want to go through with it, use the following CSS instead to make sure only this page is affected. The system generates a unique ID number for every page and we're taking advantage of that.
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer {
overflow: visible !important;
}
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer div div {
overflow: visible !important;
}
I believe your problem is that your are using right-margin when you should be using margin-right
Here is what I modified to get it to work and here is a screenshot: http://screencast.com/t/R2VeIAnNJVd
.LayoutContainer { overflow: visible; }
.LayoutContainer div div { overflow: visible !important; }
As stated above and as seen in the screenshot, you can see that the iframe extends out past your content wrapper.
Related
I want to disable my web page from scrolling horizontally but allow it to continue scrolling vertically. The web page itself simply lists png images. No code i found online has successfully enabled me to disable horizontal scrolling. The images I'm using make the browser allocate extra space to scroll for some reason. I'd appreciate any new ideas for a fix.
<style type="text/css">
body {
min-width: 960px;
overflow: hidden;
background-color: #FF0; /**/
}
</style>
Which disables scrolling all together.
What you want is actually default behaviour. By default, a browser will make your page scroll only vertically. Unless it contains content that is wider then the viewport. And that is probably your problem.
First of all I would strongly advise you never to use absolute positioning (unless you really have to). It messes with the flow of your page, and it is a pain to maintain or make responsive. (Those inline style attributes are rarely a good idea as well, but that's a different story)
So if you get rid of your absolute, all you have to do is make sure your images are never wider then their parent. That can easily be achieved with a single line of css:
max-width: 100%;
Et voila, that should do the trick. Have a look at the example I set up for you: http://jsfiddle.net/icebear/mywkmj7n/2/
If you need to position your images differently you can do so by adding margin/padding, or even work with floats or relative positioning, like the .center example I put in the fiddle.
<style type="text/css">
body {
min-width: 96px;
max-height: 200%;
overflow-x: hidden;
background-color: #FF0; /**/
}
</style>
try this put some content in it
I have read the documentation over at skrollr. My site is wrapped in the
<div id="skrollr-body">
..site here...
</div>
And all my fixed elements are located below that, outside of those tags.
In my regular desktop view it works fine, but when I test it on a mobile, I can see that skrollr adds overflow:hidden; to both the body tag, and also the html tag.
if I add
html {
overflow:scroll !important;
}
I can scroll on the mobile, but all the skrollr functions break.
Why are these css rules being added to my elements, and what do I have to do (other than what I've already done) to get the page to scroll on mobile and still have the skrollr functions intact.
try:
body {
height: 100% !important
}
or
#skrollr-body {
min-height: 100%
}
Also, try to take out of #skrollr-body any fixed element like a bootstrap navigation bar.
I am currently building a website for Bearskin Group ....
The site is pretty much done, I am creating it with the GoDaddy online builder....
BUT - I have this stupid horizontal bar scroll coming up that id like to diasble...
I have tried using:
style="overflow-x: hidden"
&
div {
overflow-x:hidden;
overflow-y:hidden;
}
Can anyone help me remove this?
Thanks
Dan
This is because you are using huge width.
#wsb-element-233156931 .wsb-image-inner div {
height: 60px;
overflow: hidden;
position: relative;
width: 2904px; /*remove it*/
}
or
change overflow:auto to overflow:hidden in class wsb-canvas-page-container
Also I noticed you are using image (check below), can't you remove the image or use a background-color to fill the color.
<div class="customStyle"><img style="width:2904px;height:60px;" alt="" src="//nebula.wsimg.com/b7fd20f21ba2c36e5ef9f39ea2613e8e?AccessKeyId=D238BA178C5B0342ADD7&disposition=0&alloworigin=1"></div>
I ran into the same problem. It turned out to be an element that was sticking out with an invisible box. You can define page restrictions but if a shape, text box or element is protruding into the edges it automatically overrides your restrictions and creates more room. Eliminating these should shrink your page back down to normal and eliminate the horizontal scroll.
I building an iPhone webb app based on iWebKit's framework. I'm currently integrating a CSS div slider to improve the navigation between pages (divs) and everything works fine except one thing.
It appears as if I'm supposed to set a fixed height value to the div containing the sliding objects. These objects will contain quite a lot of content and wary in size, hence the divs/page have to expand vertically by default. For some reason, it appears as if the browser interprets min-height as height and doesn't expand the div to display all content. I realize there's probably a small mistake somewhere, something I have forgotten to add or remove. Please help me by pointing these out for me. Thanks
Wrapper containing the slides:
#contentWrapper {
float: left;
min-height:305px;
position: relative;
margin:0px;
padding-bottom:0px;
display:block !important;
}
Class added on every sliding obj
.additional-block {
height:auto;
position: absolute;
padding-bottom:30px;
display:block !important;
}
Live demo: http://utvecklingspunkten.se/heightIssue.php
Click on "Click" to see the actual issue appearing; the text is cut off below 305 px. The issue appears in all browsers including Safari for iPhone.
It's the overflow: hidden on your "content2" div that's conflicting here. Setting that means that the container can overflow, so it does. (Removing the min-height will show you that it would be 0 pixels high otherwise.)
Removing the overflow setting will have the effect I think you want.
There is an horizontal scroll bar on my homepage only (http://balloonup.com) and a black border appears on the right?
How is it possible? Thank you for you help
Here is the new solution. Add the inline style float:none to the highlighted element.
in oldcount.css
.home_count {
display: block;
margin: 0 auto;
width: 420px;
}
remove the width
The black "border" is actually the background of your page (#28292B, defined in stylehome.css for the HTML tag). Your problem is that the width of the <BODY> only depends on the window size, not on the content of the elements contained within. You can force the to the minimum width of the page using:
body { min-width: 930px; }
Alternatively, if you want IE6 / Opera 6 support (they don't support min-width) you need to add a dummy <DIV> to force the page width. You can use this as the very first <DIV> of your document:
<div style="position:absolute; top:0; left:0; width:930px; height:1px"></div>
However, there is another problem that stretches your content more than needed and this is caused by that questions counter on the right side. You can fix that by removing that "width" property from the .home_count rule as it's useless.
You may also revise that double .home_count .comma rule as this seems like an error to me.
Anyway, by applying those two modifications described above your page looks fine on FF4 whatever window size (except for the "Log in" button covering the phone number, but that's out of the scope of this question).
In reset-fonts-grids.css, find all the instances of float:right and replace them with float:none.
Try using this:
body{
margin-right:-50px;
}