How to make a sticky footer in react?

Here’s an idea (sandbox example link). Include a phantom div in your footer component that represents the footer’s position that other dom elements will respect (i.e. affecting page flow by not being position: ‘fixed’;). var style = { backgroundColor: “#F8F8F8”, borderTop: “1px solid #E7E7E7”, textAlign: “center”, padding: “20px”, position: “fixed”, left: “0”, bottom: “0”, height: …

Read more

force footer on bottom on pages with little content

This Flexbox solution is neater and far easier to implement: HTML <body> <div class=”content”> content </div> <footer class=”footer”></footer> </body> CSS html, body { height: 100%; } body { display: flex; flex-direction: column; } .content { flex: 1 0 auto; } .footer { flex-shrink: 0; } Just ensure you wrap the necessary divs inside the body.

Put an indeterminate progressbar as footer in a RecyclerView grid

It is very simple to do that. The solution is to use the same approach of the LinearLayoutManager with a GridLayoutManager and then use the method setSpanSizeLookup on the LayoutManager like this: mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { switch(myAdapter.getItemViewType(position)){ case MyAdapter.VIEW_TYPES.Product: return 1; case MyAdapter.VIEW_TYPES.Progress: return 2; //number of columns of the …

Read more

Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap

I’ve been trying to tackle this problem for a few days now and I’ve gotten really close to the solution. I use the following HTML: <body> <div data-role=”page” id=”page”> <div data-role=”header”> <h1 id=”title”>Title</h1> </div><!– /header –> <div data-role=”content” id=”content”> <p>Loading…</p> </div><!– /content –> <div data-role=”footer” id=”footer” data-position=”fixed”> <div data-role=”navbar” id=”navbar”> </div> </div><!– /footer –> </div><!– …

Read more

RecyclerView header and footer

in your adapter add this class: private class VIEW_TYPES { public static final int Header = 1; public static final int Normal = 2; public static final int Footer = 3; } then Override the following method like this: @Override public int getItemViewType(int position) { if(items.get(position).isHeader) return VIEW_TYPES.Header; else if(items.get(position).isFooter) return VIEW_TYPES.Footer; else return VIEW_TYPES.Normal; …

Read more

Fix footer to bottom of page

For your footer: #footer { position: fixed; height: 50px; background-color: red; bottom: 0px; left: 0px; right: 0px; margin-bottom: 0px; } For your body: body { margin-bottom:50px; } #footer { background-color: red; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 50px; margin-bottom: 0px; } div { margin: 20px 20px; } body { margin-bottom: 50px; } …

Read more