I'm stuck on a problem with using the Angular Material JS and CSS. I'm having problems getting the <main> tag to take up the available height without pushing my footer below the bottom of the window. I've been banging my head against this for 2 days now, and I know it's got to be something simple that I'm missing between all of the flex-ing and layout-fills.
Codepen: http://codepen.io/snydercreative/pen/KdBzXp
It's something I've been struggling with too. Turns out for flex to expand properly it has to be inside of a layout. http://codepen.io/anon/pen/pjZROp
Here's the key parts:
<div class="wrapper" layout-fill layout="column">
and
<main flex>
As long as main is the only flex element inside its parent layout, it will grow to the proper height.
Here's a simplified version to hopefully make it a bit clearer: http://codepen.io/anon/pen/mejRze
Related
I'm creating a bootstrap template and I'm having a problem.
The section id="content-one" shows up on the top of the page. It doesn't seem I can find a solution for this to place it under the full-screen header.
Needs to be positioned here:
pic
Here is the code: http://codeply.com/go/8iYGenpntB
The problem is that elements within <section id="hero"> are absolute positioned, which take them out of the normal document flow and other elements will ignore their positioning on the page (i.e. pretend they're not there). That is why <section id="content-one"> is above the "main header", i.e. <section id="hero"> content. The elements that have absolute positioning are .hero-wrapper and .hero-container.
I'm not sure what the final layout should be or the requirements upon it so it's hard to recommend much beyond pointing out the source of the issue. You could possibly use padding and margin only to get <section id="hero"> the height/size you'd like.
I was trying some core polymer elements, and I have been having trouble using core-header-panel in my demo.
I think the toolbar is right, because I managed to do another demo where it was working with minimal CSS. But all the demo I found for core-header-panel seems to take most of the layout configuration outside the component (Which kinda seems like the point of the component). Did I misinterpret something here?
The best pattern today is to use the polymer layout attributes.
<body fullbleed vertical layout>
<core-header-panel flex>
vertical layout makes the body a (vertical) flex-box, and the flex attribute on the core-header-panel will make it fill the available space. fullbleed attribute sets body to fit the viewport.
This is a better pattern in general than using fit because flex-boxes are more resilient. You could add a different header or footer to body, and the flex panel will adapt.
Also, using layout containers and flex children is a pattern you can continue to use in other places in the application.
According to the polymer web site core-header-panel is always needs to have a height set on it explicitly. http://www.polymer-project.org/docs/elements/layout-elements.html
Try using the fit attribute (http://www.polymer-project.org/docs/polymer/layout-attrs.html):
<core-header-panel fit>
....
</core-header-panel>
I am using a bootstrap wrap and an trying to build a registration page that looks somewhat decent. I thought I had it styled correctly, but then when I rescaled the page I resized that the table is not responsive.
I know that in bootstrap3 they added table responsiveness, but I cannot use that with this specific wrap. Are there any tricks in bootstrap2 to help fix this?
Here is a jsFiddle I'm working with http://jsfiddle.net/MgcDU/6817/
I have tried a few things such as adding span classes, but that didn't seem to help at all...it just seemed to clutter it instead.
You defeating the point of Bootstrap by using a table for a layout. Bootstrap already ships with classes to columns. Use those.
You can read more on this here: http://getbootstrap.com/2.3.2/base-css.html#forms
To create such a layout, you can do the following. Responsive is no longer an issue. You can now decide if you want to use .row or .row-fluid assuming you are using Bootstrap 2.x.
<div class="row">
<div class="span4">Col 1</div>
<div class="span4">Col 2</div>
<div class="span4">Col 3</div>
</div>
Here's a demo: http://jsfiddle.net/zH8gb/1/ - Make sure the viewport is wide enough to see the feect. Drag the Result area window to enlarge it.
I'm trying to make a 2 column(sidebar) responsive theme for SMF forum software. I wanted to stick a column on the right that would expand 100% the height of it's parent.
FYI, I just started converting the default theme, into a responsive theme.
Usually, I don't have problems with these issues, or responsive design. However, I cannot figure out why the height of the sidebar, keeps matching the height of the header.
The sidebar HTML is outside the header HTML, and before it. Yet, when you give the sidebar say a fixed width of 400px via inspect element, it also expands the height of the header. I am baffled by this, as code-side it doesn't seem to make sense.
I figured if I had another set of eyes, someone can help me figure this out.
http://xarcms.com/index.php?theme=3
Thanks.
The main thing that I see is that you're styling the wrong element. You have your sidebar wrapped in an <aside>, which is not floated, nor does it have a size declared. The sidebar content that you have styled is, therefore, expanding to 100% the <aside> which itself is shrink-wrapping down to the size of the content. You need to shift your styles to the <aside> to get it to behave more correctly.
Aside from that, I don't have much else for you at the moment, but the above should get you started. From there, I'd double-check your CSS to make sure you're not getting too broad a scope on one of your styles. You might want to also look at your HTML structure and make sure that you only nest things down as far as absolutely necessary. If you're still having trouble, see if you can get a trimmed-down version that still shows the problem, so that we can more easily help you.
To fix this problem, I placed the and areas outside the div container. I was able to remove 4 un-needed divs(mostly wrappers) because of this. So In a rough nutshell...
Switched To This:
<div width wrapper>
<header></header>
<aside floated></aside>
<section></section>
<footer></footer>
</div>
Rather Than:
<div width wrapper>
<section>
<header></header>
<aside floated></aside>
<div></div>
<footer></footer>
</section>
</div>
Which seemed to be cleaner and make more sense.
I've searched the internet a lot to see if there's a neat, CSS-only way to show a footer at the bottom of the page (even if there's no or little content on it) and all of the solutions I've found are similar: Using a wrapper DIV with 100% height. Is it possible to achive a similar result without using the #wrapper DIV?
Apologies for not seeing your comment about not wanting sticky footers. They were hidden.
Anyway, it is possible to achieve this without wrappers. The CSS attributes you would give the wrapper are valid on the body as well.
http://jsfiddle.net/wffs8/8/
This works even if you do not have enough content to fill the screen.
http://jsfiddle.net/wffs8/9/