Avoid AngularJS bar-footer to overlap content - javascript

I'm in my way to do an app with ionic and angularJS and i'm trying to make my bar-footer not to overlap the few content that there's in the end, so the content has to finish being shown and, then, footer is the last thing there without overlapping something, which property do I have to apply? Because I've tried all about position property and none of them has worked for me, here I leave you an image of what's happening now:
http://s23.postimg.org/b9uhjq0ej/Captura.png
As you can see, my last item of the list is overlapped by my footer.
Thank you all for your answers and help! :)
--EDITED (providing code):
<ion-content>
<ion-list class="pagina">
<a class="item item-thumbnail-left" ng-repeat="poblacio in poblacions" href="#/app/ambFiltreActivitats" ng-click="doGuardarPoblacio(poblacio.title)">
<img style="width:50px; height:auto; margin-left: 60px;" ng-src="{{poblacio.url}}"/>
<br/><br/>
<b>{{poblacio.title}}</b>
</a>
</ion-list>
</ion-content>
<div class="bar bar-footer">
<div class="title"></div>
</div>
And no, I have no CSS property but background-color one, If I apply position: relative the footer does not even show, and with absolute or fixed it remains the same as in the photo of the link.

Add 'has-footer' to <ion-content> can solve this problem.

Related

Unexpected behavior of JS Affix - how to force div column to stay fixed width?

I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian

Values from ng-repeat are overflowing past the screen size in Responsive View: AngularJS

Problem with my approach is when the device width shrinks or switch my view to Mobile View, the chips are overflowing past the screen size. I wanted the chips to be aligned responsively with the screen size.
I tried implementing the div with flex but not luck.
Here's the code
<div layout="row">
<div layout="row">
<md-chips ng-repeat="filter in filters" readOnly="true">
<md-chip class="chipStyling">
{{filter.name}}
</md-chip>
</md-chips>
</div>
</div>
I created a Code Pen to show the working example. Could anyone please review and let me know what I was doing wrong.
You were on the right track with adding flex, but you needed to tell it to wrap as well. On the second row, you can add the following css..
display:flex;
flex-wrap:wrap;
I know nothing about Angular Material, but just looking at the docs, it seems you can add the flex-wrap:wrap by adding layout-wrap to the container element
<div layout="row">
<div layout="row" layout-wrap>
<md-chips ng-repeat="filter in filters" readOnly="true">
<md-chip class="chipStyling">
{{filter.name}}
</md-chip>
</md-chips>
</div>

How to prevent a navbar from overlapping other elements

I'm working on building a website, and I have an issue where the navbar is hiding the first bit of the page so I can't see the information. How would I fix this? The link to my website is here:
codepen.io/sookyungahn/pen/wzQkBp?editors=1100
In your case, add padding-top in home div id with same size height on your nav bar.
<div class="container-fluid well" id="home" style="display:block; padding-top:50px;">
Add a padding of the size of your navbar's height to the body.
In the official bootstrap example here, they add a 70px padding on top. Basically,
body {
padding-top: 70px;
}
Since 2017 add position: sticky; top:0; to navbar and it will fix this problem.
<img style="margin-right:10px;margin-top:50px" class="image gap img-rounded pull-left" src="http://odezhda-stilnaya.ru/kartinki/1/ptichka_babochki_zvezdy_2560x1600.jpg" alt="PLACEHOLDER IMAGE" />
<div>
<h3 style="font-family:HelveticaNeue, Tahoma; font-weight:200;margin-top:50px;">I am a website developer, passionate about programming and assisting people. I am currently an intern at a tech startup.
</h3>
Great Code:)
Just add margin-top:50px as shown.
Happy Coding :)

Angular Material md-subheader not sticky

I'm using several <md-subheader>s on my page, but they are not sticking to the top when the user scrolls down (like in the demo).
Any ideas? Maybe my layout is causing the problem?
<body>
<div>
<md-toolbar>
<div>
<md-sidenav>
<md-content>
<section>
<md-subheader>
...
Here is a codepen.
Based on another question I had, just adding layout="column" layout-fill to the top div works, too.
The sections fit inside md-content. So, when you scroll, you don't scroll inside md-content. In order for the stickiness to work, you should scroll inside of md-content.
I gave a height of 500px to md-content so that you can see the effect.
<md-content layout="column" layout-padding flex style="height: 500px;">
<!-- Report content -->
<section ng-repeat="i in [1,2,3,4,5]">
Here is the working codepen.

How can I make a scrollable div hide behind my header and sub-header?

I have a header, sub-header and a long list of information that is vertically scrollable in my app. Currently, the list of information hides behind the header when it is scrolled upwards, but it goes over the sub-header.
I've tried changing the sub-header to be absolutely positioned, and I've tried adding a z-index to both the scrollable div and sub-header, but neither have worked. I've also tried putting the sub-header inside ion-content, but then it scrolls with the list information too.
How can I get the scrollable content to go behind both the header and the sub-header?
Additional information can be provided if needed.
HTML
<ion-view hide-nav-bar="false">
<div class="sub-header">
<span class="name">{{ user.name }}</span>
</div>
<ion-content has-header="true">
<div class="messages">
<div class="message" ng-repeat="msg in messages">
<div>{{ msg.date }}</div>
<div>{{ msg.text }}</div>
<hr ng-show="!$last"/>
</div>
</div>
</ion-content>
</ion-view>
I got it to do what I wanted by adding the following styles to the sub-header:
.sub-header {
background-color: #fff;
position: relative;
top: 50px;
z-index: 1;
}
The trick was adding background-color: #fff.

Categories

Resources