I followed this guide to create a responsive sidebar menu with Angular Material. Now I'm trying to make the content part of the screen render correctly with dynamic data. The content looks fine when rendering a static page. For example, here's the welcome page:
However, when I have a list screen with dynamic data, I can't scroll up to see the entire list. The list goes above the content section and overflows below it too.
I can fix this by changing the .content class from using height: calc(100vh - 98px) to height: auto, but then it causes regular screens to look funny because the content part doesn't flow to the bottom.
The screen with the list looks a lot better though and you can scroll to see all its contents.
Is it possible to 1) make it so the height is dynamic and stretches to the bottom while allowing scroll-ability? Also, how do I make the static content render at the top instead of the vertical center?
You can see this issue in action by cloning this repo and running its Angular Material example:
git clone -b styles-support https://github.com/manfredsteyer/angular-crud.git
cd demo-material
npm install
npm start
You can set a minimum height of the content div like this
min-height: calc(100vh - 98px);
height:auto;
This way and height to auto so it will expand and look proper
You can fixed this by adding min-height: 100% in your .content class
Related
I have a wide table, when I use the Grid component and giving it width of 16 on mobile I get a weird result
I will provide a url of my work in process, please ignore the website details, it is not importatnt, the important thing is that every component is responsive in the mobile view except the table which is stretched. Please look at it on mobile and zoom it to understand what I mean:
https://exodia-client-oatx5x9ug.now.sh/
The result I would like to achive is for the table to fit into the mobile view just like the other components and be scrollable (the user will make a right and left swipe motion to see more details).
The perfect result will be like in this website:
https://coingecko.com
you can see that everything is responsive there and that the table is scroll able.
I imagine there is a way to so with Semantic-UI-React by somehow utilizing augmentation
import { Table } from "semantic-ui-react";
Table as={*some sort of styled div}
But I tried a couple of styled divs without success for example:
style={{overflow: 'auto'}}
You can create a div container with height and put the table inside.
Css
.container__table {
height: 290px;
overflow-y: scroll; /* or auto */
}
Html
<div className="container__table">
<--- your table --->
</div>
I have an app I'm building that has a basic layout with a page header, a sidebar, and a main content area. I'm using Angular Material (1.0.5) with Angular.js (1.5.0). I'm using Angular Material's flexbox layout directives for my application's layout.
My problem is that I'm using flex to extend the sidebar to the bottom of the page, but when I scroll on a page with many ng-repeated items, it stays the height of the window. I would like it to extend all the way to the bottom of the page itself, as far as the repeated items goes. I've tried several different ways using Angular Material's flex directives, however this is the best I've been able to do thus far. One option I could do that I'd like to avoid is to calculate the height it needs to be using JavaScript in a $timeout, but like I said, that would be my last choice. Another option I know is available is to make the content area scrollable so that the header and sidebar are always fixed there. I would do that, but the client dislikes that and said no. (hence, not an option)
I've put together a CodePen to reproduce the issue I'm having. This has got my layout pretty much identical to what my app has got for its layout at the moment.
Firs create a wrapper class and insert all the content inside the wrapper
.wrapper {
width: 100%;
height: 100%;
overflow-y: auto;
}
<body ng-app="my-app" layout="column">
<div class="wrapper" layout="column">
ADD ALL YOUR CONTENT HERE
</div>
</body>
And for your rows / header not to shrink, add flex-shrink: 0 to them
.header,
.row-item {
flex-shrink: 0;
}
Result:
http://codepen.io/retamalph/pen/GZYZJo?editors=1100
I am trying to position an image inside a wordpress menu bar so that it is shown at the home-buttons position but overlaying all other content (see images)
The theme is based on Zurb's Foundation framework
What I got:
How it is supposed to be:
(The home-button will be smaller horizontaly in the end)
I already tried overflow:visible and then repositioning the image with margins, it did not work unfortunately, because the image still gets clipped.
You can see the code in action, with source on this page: [removed]. I think its easier this way, so you can see all the css in action.
Thank you very much for all answers!
You get this result, using in the image position: relative;
z-index: 99;
I have a problem with a fluid layout, made using bootstrap and a fixed element made by the bootstrap affix plugin.
What I’d like to achieve is a compound view like on Android tablets, where you have left a list of elements and when you click on one you see the details of that element on the right hand side.
My problem is that as soon as the plugin attaches the affix class to the right side it is taken “out” of the page and the width is strange. The affix class makes the element to have position: fixed. And that makes the width to no longer be relative to the parent, but to the document.
I’ve made a pen of my simplified testcase. You have to scroll to see the effect happening.
http://codepen.io/anon/pen/zDieo
Thank you very much for your time
A quick fix would be add this to your css
.affix , .affix-top {
width: 800px;
}
Modified Code : http://codepen.io/anon/pen/gBHca
Try this - codepen
And read this - question
[Update]
I actually compromised on this problem for now by foregoing the fixed footer design.
It seems that there is no problem with dynamic content moving the footer and resizing containers appropriately unless the footer is fixed to the browser bottom initially.
I hope others will eventually provide a great solution that encompasses the best of both worlds.
I spent all day trying to get the footer to move down the page to accommodate dynamically added (via ajax) content. I really need some pointers or links because I haven't found anything that helps.
Basically:
My site has some pages that begin with only a text box and a button so that the total height of the content area is only a few inches beneath the header area.
I don't have any problem getting the sticky footer working so that the footer appears at the bottom of the browser window even when there is very little content on screen.
That same css layout works fine for other pages that have content that extends beneath the browser window.
The catch:
The content has to be rendered and passed to the browser with the initial load.
The Problem:
Any content that is added to the page via AJAX after the initial load paints down the page correctly -- but the footer remains in its initial location.
Please tell me there is a fix for this.
I can't post the css until checking with my boss first - if possible - and if needed, I will later - but it's just a very basic version of the many sticky footer css solutions floating around the web.
Thanks.
Currently fixed similar situation with small jQuery and CSS, where parameter is footer div object (i.e. $("#mainfooter")):
function positionFooter(obj){
if ($("body").outerHeight(true) > $(window).height()) {
obj.css("position","relative");
} else {
obj.css("position","fixed");
obj.css("bottom","0px");
}
}
Bound this function to $(document).ready and $(window).resize.
If ajax call resizes body, this should be called also after content load.
It sounds like your footer is using display: fixed or similar. Try changing the container of your footer to:
bottom: 0;
display: block;
position: absolute;
That will ensure it appears right at the bottom of whatever container it sits within (I'm assuming the <body> tag). Your problem now becomes ensuring that it appears at the bottom of the screen rather than the bottom of your document, which starts of being much shorter. You could accomplish this in a couple of ways, but perhaps the easiest would be to set a minimum height on your AJAX content container:
min-height: 600px;
height: auto !important /* This is a hack to make IE6 fix itself to a set height */
height: 600px; /* IE6 will always follow whatever instruction appears last, even if !important is specified */
The other approach is since you're using a JavaScript library (I assume?) to grab the required content, perhaps you could also adjust the height of the AJAX content container or change the footer's CSS once that content has loaded?
Without any code it´s hard to tell what the problem might be.
However, I´m using a sticky footer as described here that works very well although I haven´t added ajax content in it. Browser resizing works just fine though.
Use include in PHP and call the footer after the dynamic content appears.
I'm not sure you are looking for this, but I am also facing the same problem before and same CSS, where my content overlaps on the footer when i call the ajax through jQuery method.
Now I found the solution: Just get the div height through jQuery and apply the height to the div where you are returning your results from ajax.
var obj = $("#viewcomm").height();
if($.browser.msie) {
$("#viewcomm").height(obj).css({cursor:"auto"});
}
where here viewcomm is div ID.
I solved same kind of problem with following code, where content is the id of div where php pages load and footer is the footer tag.
var footerAdjustId = setInterval(adjustFooter, 2000);
function adjustFooter(){
$("footer").css("marginTop", $("#content").height() - $(window).height());
clearInterval(footerAdjustId);
}