I use this code on my test page to clear header-container float, but doesn't work. Can I force it somehow?
#header-container{
position: relative !important;
clear: both !important;
overflow: auto !important;
}
Use this approach:
#header-container:after {
content: ' ';
line-height: 0;
display: block;
clear: both;
*zoom: 1; /* trigger hasLayout for IE 6/7*/
}
I also suggest to take a look at talented Nicolas Gallagher's Micro clearfix
Update:
Per the OP's explanations, (at the comments below):
That header-container floats on top and stays there when i scroll and
i don't want that.
That is not a clearing fix issue, None of #header-container's children are floated.
The point is the .viewitem-panel and .viewitem-inner elements are positioned to stay at the bottom of the page, right under the header, and .viewitem-inner has a overflow-y: scroll; CSS declaration to scroll the content.
So, This problem can not be resolved unless the layout is changed.
place clear in a separate class
.clearfloat{clear: both}
and then place it after the div you wanna clear float
<div id="header-container">
</div>
<div class="clearfloat"> </div>
Related
Disclaimer - I understand there exists questions around fixed elements in safari, and fixed elements weren't supported, but now are and so forth. However I can't find a question that addresses this exact question.
Given the simplest of fixed sidebars, something like:
.sidebar {
position: fixed;
top: 10px;
right: 10px;
}
And a relatively long page, with input elements.
When an input element is focused, any fixed element becomes absolute - I understand the why, safari is trying to declutter the viewport - thats fine, but not always appropriate. I ask that I get to choose the best experience for the user (i know best naturally).
So the Question..
Is there any way to leave fixed elements as fixed even when input elements are focused?
I have attempted to do a bit of $(window).on('scroll', magic and position elements manually on scroll, but its quite jittery on the ipad.
Safari has supported position: fixed since at least version 9.2, but if you're seeing difficult issues, you can fully create the fixed position effect by making the document element and body full screen and then using absolute positioning. Scrolling then occurs in some main container element rather than the body. Your "fixed" elements can exist anywhere in the markup using this method.
jsfiddle here
html,
body,
.mainContainer {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
}
.mainContainer {
overflow: auto;
}
.fixed {
position: absolute;
bottom: 20px;
left: 20px;
}
In order to achieve the effect you desire you need to change your approach to the layout. Instead of positioning the sidebar with position:fixed you need to use position:absolute within a position:relative container that is set to the height of the viewport within that position:relative container you need another div that uses overflow-y: scroll and -webkit-overflow-scrolling : touch
Caveat: I generally avoid using position fixed on tablet & mobile if possible although the browser support is there, in my experience it'll be janky and javascript solutions leave a lot to be desired, my first response would be to challenge the pattern with the designer. If I'm given designs that include a position fixed element when there are input elements, I'm more likely to seek a design solution than a development one as the focus issues you're describing are difficult to circumvent and maintain a quality user experience.
THE MARKUP:
<div class="outer">
<div class="sidebar">
<ul>
<li>Dummy list nav or something</li>
</ul>
</div>
<div class="container">
<input type="text" />
<!-- I added 10000 inputs here as a demo -->
</div>
</div>
THE CSS:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
.outer {
position: relative;
overflow: hidden;
/* I'm using Viewport Units here for ease, but I would more likely check the height of the viewport with javascript as it has better support*/
height: 100vh;
}
.sidebar {
position: absolute;
top: 10px;
right: 10px;
/*added bg colour for demo */
background: blue;
}
.container {
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch
}
input {
display: block;
}
Here's a CodePen for you to open in your simulator (presentation view):
https://codepen.io/NeilWkz/full/WxqqXj/
Here's the editor view for the code:
https://codepen.io/NeilWkz/pen/WxqqXj
I came across with a weird thing lately with overflow: hidden;. I set it to an element, and then I want to transform the elements in it with translate(), when it translates in negative direction it will be hidden, but if I translate in the positive direction, it won't be hidden. In desktop browsers it's not really showing, but you can reach it with a little bit of mouse work. And on mobile it's just scrolls, so that is the worst.
Here is an example showing it: http://cssizer.com/KLHlPShW
So I've been working with something similar all day and realized that while I had
html, body {overflow:hidden; }
...if I add position:absolute, position:relative or position:fixed to the html and body, it fixes the issue.
I wrap everything in a container div with the following code. Explicitly set overflow appropriately in both directions. This keeps the X-axis from scrolling in iOS Safari, even if there are elements translated to the right of the main content area.
But scrolling performance is significantly degraded unless you add -webkit-overflow-scrolling: touch;. It took me a long time to find this! Hopefully it helps someone else.
.scrollContainer {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
I had the exact same problem, and here is how I fixed it:
HTML
<div id="container"> <!-- defines "boundaries" of content -->
<div id="content"> <!-- part of it must be hidden -->
</div>
</div>
CSS
#container {
overflow: hidden;
z-index: 2;
}
#content {
/* Translation code ...*/
z-index: 1;
}
Here is a JSFiddle.
Sadly the above solutions didn't work for me.
In my case it did respect overflow: hidden when used on html.
So for those people with the problem of translate extending the viewport:
html {
overflow-x: hidden;
}
Currently I am designing a website using CSS and HTML etc. But I have faced a problem there : my child div goes outside the parent div when I add floating to the child. The site resides here my web design
Be more specific. Where is the problem on the website?
Try to add this to css, so parent will know about the size of the child element:
#parent{
overflow:hidden;
}
You need to clear after your float.
Try adding this css:
CSS
.container:after {
content: "";
display: table;
clear: both;
}
Test the follwing CSS
.parentDiv {
float: left,
width: 200px,
height: 30px
}
.childDiv{
float: left,
width: 100px,
}
The child division should be included in the parent one, you can use border on both element to make sure.
Main markup
<body>
<div id="contenedor">
....
</div>
<div class="fLeft"> <footer > ... </footer> </div>
</body>
CSS
body{
}
#contenedor{ float: left; width:100%;}
.fLeft{ float:left }
I guess best way is to firebug the page..
http://209.51.221.243/integracion/login.php
As you can see, the footer is above the middle of the page behind the content...
At first, I thought it might be that you didn't clear your float. But then I noticed that each floated element is absolutely positioned. By applying position:absolute to an element, you're ripping it out of the flow of the document. The best way to fix this is to remove position:absolute from your "widgets", but then your design won't appear how you currently have it.
An idea/suggestion to workaround your limitations is to fix the footer to the bottom of the page. Apply the following to <footer>:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
You'll notice that your footer will stay put as you scroll on the page, and that can very possibly be less than ideal, but I can guarantee it'll stay on the bottom of the page. Otherwise, you're looking at reworking your styles because of the misuse of some properties.
You use floating divs before footer, so, in order to put the footer after those divs, the css of your footer should contain: clear: both;, or clear: left;, in your case.
Docs: http://www.w3schools.com/cssref/pr_class_clear.asp and (of, course) https://www.google.com/search?q=css+clear :)
UPDATE2: I realized I was wrong. This answer does not work in this particular case.
First: This is a pretty good starting point for any footer. Use it.
Second: You may have noticed that the container that has all the floating boxes (.centerCnt) isn't big enought to fit them all. To fix this you need to use a good .clearfix. There are many to choose from, but I use this one:
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. - j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
You will need this on .centerCnt otherwise the Sticky Footer won't work.
UPDATE: Simply using the clearfix would probably fix your issue. Add the code above to your CSS and give .centerCnt the class clearfix.
I have the following:
<div id="tab-notes" class="clearfix">
<textarea cols=100 rows=15 class="full-width" id="dialogNotes" name="Pages">#Model.Notes</textarea>
</div>
I have added a clearfix class but it seems that the DIV does not stretch to fit the height of the textarea. Is there something simple that I am missing?
.clearfix:after, .block-controls:after, .side-tabs:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
giving your #tab-notes a background-color you'll see that it does stretch to the textareas high (like it should) if there really aren't any other css-rules that affect these elements.
you can see it in action here: http://jsfiddle.net/Mqke4/
the clearsfix seems to be senseless just given this snippet and doesn't change anything ( http://jsfiddle.net/Mqke4/1/ ). given this, there must be styles defined for .full-width, #tab-notes, #dialogNotes (or anything like that) causing this problem.
Is your textarea applied with float: left or float: right ?
If so, remove the float property from textarea.
But if you have to use that property,
the easiest way to solve the problem is to also apply the float: to your div too.
Or you can change the display type of your div to block by using display: block
There's more way to solve this problem.
But I think these are the easiest ones.