I'm trying to achieve something very simple with WinJS. I want the items in a listView to occupy the full height of the viewport.
I can achieve this by overriding the default styles for the listView like this:
.win-itemscontainer {
width: 100% !important;
height: calc(100vh - 1px) !important;
}
.win-horizontal .win-gridlayout .win-container {
height: calc(20% - 1px);
margin: 0 0 1px 1px;
outline: none;
}
.win-listview {
height: 100vh;
margin: 0;
padding: 0;
}
.win-listview .item {
width: 250px;
}
This works fine and renders 5 rows of list items. The list then scrolls if the number of items exceeds the containers width.
However, there are some very odd behaviours occurring. If I scroll to the very end of the listView, something causes the scroll position to jump back making the last row in the listView unattainable because the jump prevents me from ever reaching it.
Is there a better way of achieving what I'm after or is there a way to fix what I've implemented?
I was never able to sufficiently answer this so I switched from a listView to a repeater which gave me greater control over the markup and CSS.
Related
I am working on location picker inside modal popup using Bootstrap3 CSS and JQuery location picker. Normally Bootstrap3's modal body size expands if content needs it.
What I need to do is to force modal to have relative to screen size because initial DOM content is empty and is filled via JQuery (Google maps initialization).
The problem is, that when setting relevant divs to have style= height:100%, body is overlapping its parent with the exact height of its sibling modal headers div.
How to prevent such behaviour and make modal body fill free space and not overlap parent component?
Here is working example
https://jsfiddle.net/qfqjq82r/
Ok after some consulting I have found the workaround/answer.
The trick was to threat divs like table and table rows. After adding some additional styling, dialog looks exactly like it should.
https://jsfiddle.net/qfqjq82r/7/
And the css:
#location-picker .modal-content {
display: table;
width: 100%;
}
#location-picker .modal-dialog{
width: 80%;
height: 85%;
}
#location-picker .modal-body{
height: 100%;
display: table-row;
width: 100%;
}
#location-picker .row{
padding:15px;
}
.full-height{
height: 100%;
}
I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.
You can see it here
CSS:
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
max-height: 300px;
width: 100px;
}
div span {
background: #f0f;
display: block;
height: 100%;
}
Markup:
<div>
<span></span>
</div>
I'm using Safari 6.0.5 on OSX 10.8.5.
This issue happens due to a reported bug in Webkit:
Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly
This seems to be fixed for Chrome by now, but not for Safari.
The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:
div {
position: absolute;
}
Demo
Try before buy
Similar problem appears on Safari if parent element uses flexbox properties - container won't take 100% of the height.
Another solution (besides position: absolute;) would be to use vh (viewport height) units:
div {
height: 100vh;
}
Simple question, how do I set up a page overlay (just a semi-transparent black cover) so that it's 100% of the viewport's height and width, including scrollbars?
I've already tried:
body{
background-image:url(../pictures/background2.png);
background-position:top;
background-size:100% 100%;
background-repeat:no-repeat;
margin:0;
border:0;
height:100%;
}
/*Loading*/
#loadingoverlay {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
It only covers the viewport without scrollbars. In other words the moment I scroll down, the content below one screen height doesn't get covered by the overlay.
Obviously this won't work either:
/*Loading*/
#loadingoverlay {
position: absolute;
height:9999px;
width:9999px;
background-color: rgba(0,0,0,0.7);
filter:alpha(opacity = 80);
top:0;
bottom:0;
z-index:99;
}
As that just stretches the viewport into 9999x9999.
The scrollbar is not a part of the "viewport". You're styles and javascript have domain over the viewport but not the scroll bar. You can turn off scroll bars but you can not have an overlay go over it. It's possible to do windowless Flash but that's not an implementation you want.
I currently have this code
#navlogo {
background: url(img/logo.png);
background-size: 100px;
display: block;
height: 98px;
width: 98px;
border-radius: 49px;
}
and I want to add this code
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /* this doesn't work */
width: 98px; /* this doesn't work */
}
Th original images are 150x150 scaled down and for some reason look better than using 98x98 especially on the iPhone. However, I can't seem to set the background size for the :hover element ....it stays it's original size. I know it can be done with background-size: 98px 98px; but this also isn't compatible with IE8 and lower, and CSS3PIE doesn't cover background-size either. is there anyway to do this or do I have to resize the hover picture?
Try changing the background size from a defined 100px to contain. If you're changing the div size on hover, then the background size will change with it in that scenario.
E.G.:
#navlogo {
background: url(img/logo.png);
background-size: **contain**;
display: block;
height: 100px;
width: 100px;
border-radius: 49px;
}
#navlogo:hover {
background:url(img/logoblog.png);
display: block;
height: 98px; /*this doesn't work*/
width: 98px; /*this doesn't work*/
}
I'm assuming that's what you're going for in this example, as the properties that you're specifying "don't work" in the hover styling are resetting the same values that are present in the normal state styling. Nothing would change given that they are defined exactly the same.
EDIT
If the logoblog image is indeed bigger, setting the background-size property to 'contain' should solve this problem as well.
I have element with id="fixed" and following css style:
#fixed { position: fixed; width: 100%; background: #444; height: 70px;}
Within this element is other element with class="inner" and following css style:
#fixed .inner {width: 1000px; margin: 0 auto;}
The element #fixed MUST be fixed position, in other words the element #fixed MUST be always at top of the page.
Live example here.
When I resize the window under 800px (1000-width of right menu), right menu disappeared and no scrollbar is available.
Thank you in advance for any idea how this problem could be solved.
Chavier