I have the code at the bottom of this post controlling a <div> within my page <div> in jQuery Mobile. I have this div to make a table scroll, as it overflows horizontally on the page. It shows up as in this screenshot, however:
This same issue occurs when it is oriented vertically, but this view illustrates it better. I have scrolled the div sideways as well to better illustrate the two borders. I want the div to simply fill the full width of the page on mobile devices, as it displays properly on larger screens, but I want it to scroll horizontally if it overflows. I have tried both overflow: scroll; and overflow: auto; in addition to trying the code with and without -webkit-overflow-scrolling: touch;. No method that I have tried for setting the width has yet worked, including width: 100%; and position: absolute; left: 0; right: 0; as suggested elsewhere.
CSS:
#media only screen and (min-width: 1025px){
.ui-page {
width: 960px !important;
margin: 0 auto !important;
position: relative !important;
border-right: 5px #111111 outset !important;
border-left: 5px #111111 outset !important;
border-bottom: none;
}
}
#media only screen and (max-width: 1024px){
.tblscroll {
width: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
}
Simplified HTML:
<div data-role="page" id="resultsmain" data-title="Survey Results">
<div data-role="header"><h1>Title</h1></div>
<div data-role="content">text
<div class="tblscroll">
<table>
...table information...
</table>
</div>
</div>
</div>
you could try using a CSS display block around your div elements width defined width's and adjusting the percentages.
It appears as though its the table itself which is the issue.
I would set the table width to 100%, and fix rows that won't grow or shrink
table{ width:100%; }
This doesn't really help at all, but I loaded it up today and it works perfectly. I changed nothing from yesterday to today, so it must have been a caching issue of some sort (even though I had cleared my mobile cache).
Related
Im trying to change the the height of my container from 527px (Which is the height of the background for the desktop) to make the background image hidden and make background color stretch to the bottom of the div when on mobile. The clearfix is handled from bootstrap. There are several floated divs inside of my .partbackdrop class that are not show because they are too long. No matter what I change the #PartCarContainer on the #media, besides setting it to a fixed value, it will not adjust accordingly and stretch the background to the div.
Link Removed. Problem Solved. Setting height to auto for all the divs inside the container.
CSS
#PartCarContainer { background-color: #FFFFFF; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); border-radius: 3px; overflow: visible; }
.partbackdrop { background-image: url(../../_common/img/backdrop.jpg); background-position: top center; height: 527px; }
#media (max-width: 767px) {
#PartCarContainer { height: auto; }
.partbackdrop { background-image: none; }
}
HTML
<div id="PartCarContainer">
<div class="partbackdrop">
Content
<div class="clearfix"></div>
</div>
</div>
Edit: It may be a floating problem because of the floats for the page.
I also believe the footer may be suffering from the same problem. If you shrink the window down to below 767px you will see the red background which is my problem.
You need a height:auto on .partbackdrop and on .partDivMain
.partbackdrop, .partDivMain { height:auto; }
Consider the following site.
I am trying to position a div that is approx 300px wide by about 400px high next to the picture of the woman. I have tried to display the div as inline but to no avail. I tried to float left but once again no luck. Any thoughts?
You can position it next to the image, by using the following CSS:
.emailForm {
width: 260px; /* anything above 260px will fall over to the next line */
/*float: right;*/ /* remove float */
display: inline-block; /* inline-block since you want specific width and height */
height: 434px;
border: 1px solid black;
}
NOTE: Pretty sure you are using it, but in case you aren't, do use Firebug or Chrome dev tools for making such tasks a breeze.
Try this,
<div id="wrap">
<div id="nextTo"></div>
<img id="woman" src="#" width="600px" height="400px" />
</div>
CSS
#wrap {width: 1000px; margin: 0 auto;}
#nextTo {float: right; max-height: 400px;}
This will ensure that your image is fixed width. If you have a wrapper div that is 1000px wide for example, the #nextTo div will be the remainder of what the image takes up (in my example 400px).
Adding the max-height attribute to the #nextTo div ensures that the div will not fall below the image, but not sure if this is what you are after.
After starting work for a new company, I've been charged with building a new site for them. This is what I've got so far:
http://ghostevolution.com/ghostds/
The problem is that it isn't working correctly on the iPad - the header background colour doesn't stretch across the full width of the screen like it is meant to - this is also true of the mid-section light-grey background colour on pages such as http://ghostevolution.com/ghostds/?page_id=160
Does anyone know why this is? Thank you.
The half-assed proper way to do this is to wrap your contents in a container that spans 100% of the screen width. For example:
CSS
.wrapper {
display: block;
width: 100%;
padding: 10px 0; /* add some top + bottom padding */
background-color: #252525;
}
.aligner {
display: block;
width: 960px;
margin: 0 auto;
}
.container {
display: inline-block;
}
HTML
<div class="wrapper">
<div class="aligner">
<div class="container">
// stuff
</div><!-- /container -->
</div><!-- /aligner -->
</div><!-- /wrapper -->
It's not the prettiest, but it allows you to throw 100% width background-colors on any section, and works in < IE8. You can do whatever you need to within div.container (float, position, etc) and it will expand the .wrapper element (thus expanding your background color).
Each div.wrapper should be treated as a "section" - 'header', 'feature', 'content', 'footer', etc...
Another alternative is to start using #media queries, which would allow you to essentially plug in code for specific screen widths (880/1024px for iPad, portrait/landscape).
#media screen and (max-width: 880px) {
.my_element {
/* attributes */
}
}
This is due to issue that is often forgotten (in desktop browsers as well). I'm pretty sure..
You see, with any desktop browser. Change the width of the window less than your wrapper width and scroll to the right. That would show the page as cut off.
This can be fixed quite easily.
removed csspivot site since its no longer running
The basic idea is to add the same background that gets cut off into element that has fixed width since browser can't do anything to that.
Add CSS:
#auxiliary .wrap {
background-color: #bbb; /* Same as the #auxiliary bg color*/
}
#branding .wrap {
border-top: 6px #92C201 solid; /* Same as #branding border and bg and height*/
background-color: #333;
height: 60px;
margin-top: -6px; /* I wouldnt necessarily use this to get it to top but works as well. */
}
I'm trying to make a background following this example, but I need to nest 2 containers.
My code look something like:
XHTML:
<body>
<div id="background_shadow">
<div id="container">
<!--content-->
</div>
</div>
</body>
css:
#background_shadow{
margin:0 auto; /* center, not in IE5 */
height:100%;
height:auto !important; /* real browsers */
min-height:100%; /* real browsers */
width: 876px;
padding: 0px 72px;
background: url("../images/background_shadow.png") repeat-y center;
}
#container{
width: 100%;
margin: auto;
background-image: url("../images/background.jpg") repeat-y;
height: 100%;
}
The problem is that the #container element isn't stretching with #background_shadow. Am I missing something? I would like to use nested container with 2 background image because one of them is transparent and if I use png instead of jpeg on the second image the filesize is too big (around 1Mo)
Here is what I'm getting
And what I would like
I guess that if there arn't any solution I will need to use a big png.
Thank you
For height: 100%; to work on an element, all parent elements need it, too (even html and body). So because of height: auto !important;, it doesn't work anymore in the #container child.
You can either remove the height: auto; or add #container { min-height: 100%; }. I just tested it in Opera 11 and apparently min-height works just as fine. Don't know about IE, though.
By the example you provided, your #background_shadow should have position: relative. That's going to allow it and it's children out of the restrictions of straight document flow.
Use Firebug to delete the footer from your example link - you'll see the div above it expand to fill the page even though it's content does not require the additional height.
I could swear I've seen articles about this problem, but I can't for the life of me find them again!
Basically if I have
<div style="width: 250px;">The width of this div should be no less than 250px wide</div>
In the code below, the content in the div isn't restricting it's width to the width specified causing an overflow problem:
<div class="PostIt">
<div id="tags"><span class="qExtraLarge">Lucky Khumalo</span>
<span class="qLarge">School</span>
a;orghaepoht8aegae[hgi'aehg[ahgiha[e8gjaerghuoaeir'ghu;dsOsgh;vrwi/jbvh?URbnIRWhb'a[985h[qygherionhbdl</div>
</div>
.PostIt { display: block; text-align: left; padding: 30px 30px 30px 30px; height: 240px !important; width: 190px !important; background: transparent url("Images/PostIt.png"); }
.PostIf #tags { width: 250px !important; }
Any suggestions would be great!
Thanks in advance.
If you want to hide any overflowing content, use overflow:hidden;
If you want to show the content and just force a line break, use word-wrap:break-word;
Setting a width on a block element alone won't stop any contents that are wider than that width from overflowing the bounds of the element. To do that you need to also set the "overflow" property. Setting it to "hidden" will simply hide anything outside the bounds, but you can also set it to other values to automatically show scrollbars, etc.
See http://reference.sitepoint.com/css/overflow for a good explanation of the overflow CSS property.
Hide your overflow.
Or more precisely
.myclass { overflow: hidden; }