I have a large content needs to be put in SettingFlyout. The problem is SettingFlyout too small for it. How to add vertical scrollbar for it?
Update: Javascript Metro app.
The UX recommendation for that scenario would be to break the settings into multiple flyouts. You really shouldn't put that many settings into a single window.
If you must do it, then wrap the content in a ScrollViewer for XAML or <div class="ms-scrollview" style="style="height: 100%; width: 300px; overflow-x: hidden; overflow-y: visible;"> for HTML.
Related
My PWA in a desktop browser is not really cool (because i don't have a lot of information to show).
And I would like to limit the width to 768px.
I tried many solutions, but i can't to change elements in position "fixed" like v-navigation, v-footer, v-dialog, ...
they are always 100% of the width of the browser.
I tried this in app.vue or in index.html:
html,body,#app {
max-width:768px !important;
overflow: hidden;
}
and last time I tried this in index.html:
#mytable {
width: 100%;
overflow: hidden;
}
#mytable td{
width:50%
}
<table id="mytable">
<tr>
<td>
<div id="app"></div>
</td>
<td>other half</td>
</tr>
</table>
But no solutions works.
Thanks for your help
Marco
Your problem seems you need different layout in function of screen size. You have several solutions from media queries to simple margin. Here I will explain how to do what you want with just margin.
I advise you to use a div to wrap your content and do not apply all your style in your #app container. Why ? Because you can imagine for instance that you want a top bar that take all the width and a content that take only 768px. If you make your layout in only one block this will be very complex. Separation in several block is a good strategy to have a modulabe UI. So we will use this template. You can make whatever you want in the .content div.
<div id="app">
<!-- Here we can imagine a top bar -->
<div class="content">
<!-- Display whatever you want -->
</div>
</div>
First you need to prepare your app container to display your application in all screen. I suggest this css :
html,body,#app {
overflow: hidden; // If content is large it will display scroll bar
height: 100vh; // Tell to your browser to take 100% of the available viewport height
}
Then you can define the css of the .content block :
.content {
max-width: 768px; // Max-width you want
height: 100%; // Take all the height available
margin: 0 auto; // Display div at the center
}
Here is an example: jsFiddle
If you are very interested in layout design, I strongly advise you to look into flex box and css grid.
I'm updating an older html page with CSS, which I've just started getting into. The new version looks good, but there are huge empty spaces now at the bottom and right of the page when the user scrolls.
The nature of the page is several different content boxes, all of which have graphical backgrounds.
The old method I was using was to use a large table to organize the layout and give the table one large, solid background image. A colleague pointed out this was too old-school and suggested I try learning divs and css.
The newer version I produced broke each box up into separate divs and images and positioned them absolutely, but there was no way to keep the content centered if the browser window was resized.
I redid the whole page again, this time using relative positioning and one main container div that I could center. Everything looks good and stays centered, but now I'm getting big blank spaces on the bottom and right sides because of the positioning.
I've seen some people say they've fixed this by using a negative margin, but it doesn't seem to be having any effect on my page (unless I'm putting it in the wrong spot).
I need to know if there's a specific way to fix this that I don't know about or if I'm just going about the whole page completely the wrong way. How can I get my elements lined up correctly, centered, and with no extra scroll space? Should I just go back to using a table?
Here's a simplified version of the page with the content taken out (just the layout):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">
body
{
background-color: black;
margin-bottom: -2000px;
}
div.main
{
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-bottom: -2000px;
}
div.logo
{
position: relative;
left: 40px;
top: 60px;
z-index: 1;
}
div.window1
{
position: relative;
left: 320px;
top: -555px;
z-index: 1;
}
div.window2
{
position: relative;
left: 320px;
top: -580px;
z-index: 1;
}
div.window3
{
position: relative;
left: 680px;
top: -1250px;
z-index: 2;
}
div.window4
{
position: relative;
left: 25px;
top: -1570px;
z-index: 1;
}
</style>
<div class="main">
<div class="logo">
<img src="images/logo8.png">
</div>
<div class="window1">
<img src="images/window1_fullsize.png">
</div>
<div class="window2">
<img src="images/window2_fullsize.png">
</div>
<div class="window3">
<img src="images/window3_fullsize.png">
</div>
<div class="window4">
<img src="images/window4_fullsize.png">
</div>
</div>
</html>
You could use "em" or "%" values for top and left.
But the best be to handle this using JS.
Hope this helps.
I fixed this some time ago. I eventually did go back to using a table for the layout (which I understand is frowned upon) combined with a little bit of relative positioning, but I made sure everything was done with css and was w3 compliant:
http://www.burningfreak.com
The inherent problem, I think, is the way I designed my older pages, visually. They were highly graphical and usually made up of one contiguous background image, with a lot of art making up the section borders, etc. The general layouts tended to be unusual shapes, and I would then over-lay text and content on top on that. Unfortunately, it's very difficult to get looking right if the sections are separated.
I've since designed newer pages using only divs and css and it seems to work well, although it's a bit trickier to get working. The key, I think, is to come up with a look and style that I know is going to work using that technique from the start.
I sometimes "protect" a custom UI control by placing a transparent div over the top of it. e.g. I have made an interactive data grid, and when I want to disable it, such as when I bring up a dialogue in front of it, I append a transparent div to the grid's outer container, with height and width stretched, so that it is not possible to click on anything. In the contrived example below, someFunction() will not get called when clicking where 'Blah' is, because the span will be covered by a transparent protector.
HTML:
<div class="control">
<span class="clickable-example" onclick="someFunction()">Blah</span>
<div class="protector"></div>
</div>
CSS:
.control {
position: absolute;
width: 100px;
height: 20px;
}
.clickable-example {
z-index: 0;
}
.protector {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 20px;
z-index: 1;
background: transparent;
}
However, I have noticed that in Internet Explorer (even 10), this doesn't work. It seems that a div with background set to transparent (either explicitly with CSS, or implicitly by not setting it at all), the div does not block what is underneath it. I thought this is wrong, but I can't actually see from the spec that it is wrong. The spec simply says that what is underneath will "shine through". It doesn't say whether or not the background should act like a piece of glass.
I've reverted to using a fully transparent image instead of the transparent div, but I wondered whether anyone has any further info on this. (The fact that it works with a transparent image proves that it's not a z-index problem).
Can anyone help me fix some cross-browser issues? My website address is http://s423839726.onlinehome.us/index2.html. It looks fine in firefox 13, but in IE9 the "contact" button is all wonky.
Also, where does one learn how to fix cross-browser inconsistencies?
the inconsistency can also be seen in Opera. Your problem is the UL element. It hangs at that position on the right as it has display "inline" set and contains a stray A element. This combination moves your contact menu element a bit down. You should try to clean up the markup as it contains nested elements (mainly A elements) that are not strictly necessary. Another problem is, that you are mixing left and right floating. Additionally you are mixing left and right paddings and marging which may lead to different behaviour in browsers, makes calculating harder and can lead to collapsing margins problems. I'd advise you to try a more semantic markup for your menu like:
<ul id="topnav">
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
and with this simple markup you are able to style your menu. If you reach a point, where adjusting dimensions, paddings and margins of elements are not enough to style things the way you want, you may begin to introduce non-semantic elements (e.g. SPAN elements) within LI or A elements to have some more means to shift things around via CSS.
A simple approach to get your navigation styled is the following: Float each LI to the left and use only left margins/paddings to create visual space.
ul {
list-style-type: none;
height: 60px;
width: 300px;
margin: auto;
}
li {
float: left;
}
ul a {
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 50px;
text-decoration: none;
font-size: 40px;
color: #ccc;
}
ul a:hover {
color: #fff;
}
Something like that. Left border still missing. Your whole menu block (the UL) should be positioned to the right using left padding or right floating or whatever. Prefix the selectors with #topnav if you want to mitigate changing UL and LI styles elsewhere on your page. This is just a simple illustration that you do not need much markup or styles to have a horizontal menu like the one you want. Start simple and search for tutorials on horizontal menus using UL/LIs. There are plenty out there. Good luck.
Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?
I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content
You're code will look similar to this:
<body>
<div id="purpleboxbackgroundimage">
<div id="contentandtext">
<h1>jhkljhlkjhlkj</h1>
</div>
</div>
</body>
I hope this helps.