How do you get elements in ion-footer-bar to line up directly below each other rather than stack up next to each other?
For example, this:
Is produced by the code below:
<ion-footer-bar>
<div>
sdsd
</div>
<div class="button-bar">
<a class="button button-positive">First</a>
<a class="button button-positive">Second</a>
</div>
</ion-footer-bar>
In the example above, I'd like each element to be placed directly under each other, as opposed to next to each other.
The solution is to create another footer as you can see in this tuto : https://www.tutorialspoint.com/ionic/ionic_js_footer.htm
In your exemple, the solution would be :
<ion-footer-bar class="bar-subfooter>
<div>
sdsd
</div>
</ion-footer-bar>
<ion-footer-bar class="bar-subfooter>
<div class="button-bar">
<a class="button button-positive">First</a>
</div>
</ion-footer-bar>
<ion-footer-bar>
<div class="button-bar">
<a class="button button-positive">Second</a>
</div>
</ion-footer-bar>
Related
I have a navbar element. It has a navbar-dropdown element. I want to add a navbar-item with a sentence to it, but word transposition in navbar-item doesn't work.
How can I turn it back on? Here's the code for the navbar-dropdown element.
<div class="is-primary navbar-dropdown is-size-4 dropdown-width">
<div class="navbar-item">
Чтобы воспользоваться функционалом системы, пожалуйста, авторизируйтесь.
</div>
<div class="navbar-item">
<a
class="button is-light"
:class="{ 'is-hidden':$store.state.isAuth }"
#click="openModal"
>
Войти
</a>
</div>
</div>
The "dropdown-width" class sets a fixed width for the element.
How can I have both my search box and badge horizontally in single row in the navbar ? I'm using materialize CSS
<nav class="orange" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
<ul class="right">
<a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
<form class="col s12">
<div class="inline">
<div class="input-field col s6">
<input id="search" type="text" class="validate" placeholder="Search...">
</div>
<div class="input-field col s6">
<button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
</div>
</div>
</form>
</ul>
</div>
</nav>
If you upload your problem into a CodePen, it is easier for people to try out your code, adapt it and help you. It doesn't take long, I added your stuff in around 5 minutes, with taking care of scripts and links, but it will be a great help for people who want to help you solve your problem.
So, some general stuff about the materialize grid:
To make text fields inline, you need to add the inline class to the input-field-div (can be found in the examples of Materialize Text Inputs). Adding an enclosing div does not work
Columns only work with an enclosing row, which the <form> does not have. This is also part of your problem, more down below
The grid is based on 12 columns. So the form with col s12 will take up the complete row
If you want to split the form 50:50, you need to put the form in their own container. If not, the col will assume, that it is referencing the container around the whole navbar (more about Grids in Materialize
An unordered list (ul-tags) should always have list-items (li-tags) for each individual part of the unordered list
So, regarding your problem: Add list items to your unordered list, one for the badge, one for the search form. Then, you also need to add a div with the row-class to your form, as well as a container for the elements to get back into a local context. Add the inline-class to the right element, and you are good to go. Here's a CodePen with a working example. Hope it helps and you understand why it didn't work before!
edit: update codepen link
Try by this way
<nav class="orange" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="/" class="brand-logo white-text">C.U.P.S</a>
<ul class="right">
<a class="waves-effect waves-light btn-small indigo" href="cart"> <i class="material-icons left">add_shopping_cart</i> Cart <span class="badge white-text" data-badge-caption={{ count((array) session('cart')) }}></span></a>
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="search" type="text" class="validate" placeholder="Search...">
</div>
<div class="input-field col s6">
<button class="waves-effect waves-light btn-small indigo" type="submit" name="action">Search</button>
</div>
</div>
</form>
</ul>
</div>
</nav>
Add row class instead of inline
I am dynamically printing bootstrap columns divs as follows using angular2
[col-md-6][col-md-12][col-md-6][col-md-12][col-md-6][col-md-12][col-md-6][col-md-12]
but the actual grid is appearing as
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
[col-md-6]
[col-md-12]
I want to arrange columns like
[col-md-6][col-md-6]
[col-md-12]
[col-md-12]
[col-md-6][col-md-6]
[col-md-12]
[col-md-12]
Here is the code
<div class="row">
<span *ngFor="let serviceItem of dashboardServicesList">
<div class="col-md-6 {{serviceItem.service}}-service">
<div class="service">
<a *ngIf="serviceItem.categoryHashmap" (click)="showSegments($event,serviceItem.service)">
<span class="service-title">{{serviceItem.displayName}}</span>
<i class="fa {{serviceItem.chevron}}" aria-hidden="true"></i>
</a>
</div>
</div>
<div *ngIf="serviceItem.categoryHashmap" class="col-md-12 segments {{serviceItem.is_active}} {{serviceItem.service}}">
<ul class="segments-boxes">
<li *ngFor="let item of serviceItem.serviceSegments">
<a target="_blank" href="{{item.url}}">{{item.displayName}}</a>
</li>
</ul>
</div>
</span>
</div>
How to arrange this ? thank you.
The reason why this is happening is because of the sequence you're using.
col-md-6 + col-md-12 = col-md-18
This won't fit on one row and thats why it isn't working.
Fix your sequence and add row's to it, output as example below:
[row][col-md-6][col-md-6][row][row][col-md-12][row][row][col-md-12][row][row][col-md-6][col-md-6][row][row][col-md-12][row]
Hope this helps!
I am currently trying to place an icon to be beside the header. However, I tried but it kept not being aligned. May I know why?
Here's the code I've tried
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-8">
<div class="row">
<h2 id="ContentPlaceHolder1_courseDetail" class="col-lg-11">Course Details</h2>
<span class="glyphicon glyphicon-exclamation-sign "></span>
</div>
<h5 id="lblLastModifiedDate" class="col-lg-12">Last Modified Date: 21/10/2016 3:02:35 PM</h5>
</div>
</div>
The span is allowed to be inside your h2 tag, so that it displays next to the text
<h2 id="ContentPlaceHolder1_courseDetail" class="col-lg-11">Course Details <span class="glyphicon glyphicon-exclamation-sign "></span></h2>
Also if you don't actually want them attached as such, you have already set yourself up to display them side by side in other ways
<h2 id="ContentPlaceHolder1_courseDetail" class="col-lg-11">Course Details</h2>
<span class="glyphicon glyphicon-exclamation-sign col-md-1"></span>
Though that's not advised because the first option is much nicer looking as the latter choice will give a gap between them due to bootstrap's column system
If you do not wish for them to display next to each other, you can also do things like this
<h2 class="col-lg-11"><span id="ContentPlaceHolder1_courseDetail">Course Details</span><span class="glyphicon glyphicon-exclamation-sign col-md-1"></span></h2>
At the first picture everything is ok.
But if i make the width of my browser a little bigger, the result is the following:
Each md-card overlaps the next one and adds overflow-y. This issue is only on xs resolutions. Here is my html:
<div ng-view="" flex="" class="ng-scope flex">
<md-content layout-xs="column" layout="row" class="md-padding ng-scope layout-xs-column layout-row">
<div layout="column" layout-gt-xs="row" layout-wrap="" infinite-scroll="ctrl.nextArticles()" infinite-scroll-disabled="ctrl.isBusy || ctrl.isEnd" infinite-scroll-distance="1" class="layout-wrap ng-isolate-scope layout-gt-xs-row layout-column">
<!-- ngRepeat: article in ctrl.articles -->
<div ng-repeat="article in ctrl.articles" class="post ng-scope flex-xs-100 flex-xl-20 flex-sm-50 flex-md-33 flex-lg-25" flex-xs="100" flex-sm="50" flex-md="33" flex-lg="25" flex-xl="20">
<md-card>
<md-card-header>
<md-card-avatar>
<img src="/images/sidenav-icons/Bomb.svg">
</md-card-avatar>
<md-card-header-text>
<span class="md-title ng-binding">FakeTitle147</span>
<span class="md-subhead ng-binding">FakeRubric3</span>
</md-card-header-text>
</md-card-header>
<img ng-src="/images/test-img.jpg" alt="*ALT*" class="md-card-image" src="/images/test-img.jpg">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card header</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
The titles
</p>
</md-card-content>
<button class="md-button md-ink-ripple" type="button" ng-transclude="" ng-click="ctrl.showArticle(article._id)" aria-label="Button">
<span class="ng-scope">Button</span>
</button>
</md-card>
I have no custom css (only background-color). Thanks for your ideas.
The problem was in layout="column". I just replaced this:
<div layout="column" layout-gt-xs="row" layout-wrap="" ...
to this:
<div layout="row" layout-wrap="" ...
This solution is OK for me.