I'm trying to create an ionic app which has a left and right sidemenu, but I'm finding that the side-menu icons (and the ability to swipe left or right to open them) is disappearing when I try to navigate. I'm obviously doing something wrong, but I can't see what it is.
see here ... http://plnkr.co/NpqmVT ... for plunker which demonstrates the problem. To replicate the bug simply click on the 'click to view details' button.
My main user interface (I'm guessing this is where I'm doing something wrong) looks like this...
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="centre-panel"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Main Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ui-sref="ui.page1" nav-clear menu-close >Page 1</ion-item>
<ion-item ui-sref="ui.page2" nav-clear menu-close >Page 2</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right">
<ion-header-bar class="bar-dark">
<h1 class="title">Right Menu</h1>
</ion-header-bar>
<ion-nav-view name="right-panel"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
All the routes, etc can be found in the plunkr (http://plnkr.co/NpqmVT)
Thanks for any help you can offer.
just faced the same problem and found a solution - add this directive to the ion-side menus:
<ion-side-menus enable-menu-with-back-views="true">
Related
I am trying to add buttons to my Spartacus storefront.
The problem that is preventing me to progress ahead is:
1)If I generate new button angular component, using Angular, should it be mentioned inside the
tag or outside of that?
2)Should it be rendered in a different way as first?
Check out this repo and the corresponding stackblitz project. The easiest way add new buttons would be to place it in reference to an existing standard component using the outlets. Essentially, you could do some like the following, placing your new angular component app-custom-component before the ExistingComponent.
<ng-template cxOutletRef="ExistingComponent" cxOutletPos="before">
<app-custom-component></app-custom-component>
</ng-template>
Can you describe the problem more clearly? As much as I understood you are looking for below kind of code. For code check this link Spartacus Product Page
<div class="row">
<div class="col-md-6">
<button
class="btn btn-block btn-action"
(click)="addAddressButtonHandle()"
>
{{ 'addressBook.addNewAddress' | cxTranslate }}
</button>
</div>
</div>
I use the "SB Admin 2" Theme for a project.
The integratet Metis Menu works very well on desktop, also on tablet.
But when I visit the page with my phone, the menu doesn't hide completely.
Only when I scroll the page.
You can visit https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html to test ist.
If you shrink the browser as far as its like a mobile screen, the menu does not hide.
I tried to do it on the bottom of my index.html file with $('#side-menu').metisMenu('collapse'); but it does not work. This is also defined in the sb-admin-2.js file. But it doenst work either.
Can you help me to get the menu hide completly, even on mobile devices?
Try downgrading the JQuery version to 2.1.3:
https://code.jquery.com/jquery-2.1.3.min.js
There are issues with metismenu with newer Jquery versions:
https://github.com/onokumus/metismenu/issues/128
You can do this with hiding it with css only
.navbar-top-links {
display: none
}
Or if you don't want to hide it always only on button click. Create a new button with these attributes before your current unordered list (ul)
<button type="button" class="collapse-2" data-toggle="collapse" href="#collapse2" aria-expanded="true">
And replace this code
<ul class="nav navbar-top-links navbar-right">
With this code
<ul class="nav navbar-top-links navbar-right navbar-expand-sm navbar-collapse panel-collapse collapse" id="collapse2">
I managed to get it working like this only you have to style the button and place it in the correct position.
Using Framework7, I created a toolbar. It worked great for the iOS theme. However, when I tested it on the material theme, it was on the top. I found some Framework7 documentation that pointed me to the "toolbar-bottom" class. However, the page-content acted as if the toolbar was still on the top, and the padding-top property was incorrect. I would not like to hard code overrides on the Framework7 css.
Here is my structure:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="page-content">...</div>
<div class="toolbar toolbar-bottom">...</div>
</div>
TL;DR read the docs you dumb OP
See this documentation page. In order for the CSS to work correctly, the toolbar must be before the page-content. Your format should look like this:
<div class="page navbar-fixed toolbar-fixed">
<div class="navbar">...</div>
<div class="toolbar toolbar-bottom">...</div>
<div class="page-content">...</div>
</div>
I am working on a pretty basic website and I have the search bar exactly how I want it to look. The problem is that I cannot get the search button to be responsive to different devices. On my iPhone 6, the button moves below the search bar and doesn't look right. Any thoughts on how I can get this better looking? I am new to responsive templates!
Try clear fix:
<div class="bg-info clearfix">
<button class="btn btn-secondary float-left">Example Button floated left</button>
<button class="btn btn-secondary float-right">Example Button floated right</button>
</div>
I am creating an Electron project and I am using Bootstrap Fileinput.
<div class="form-group">
<label class="control-label col-xs-3">Folder containing installation/patch scripts</label>
<div class="col-xs-9">
<input id="input-2" name="input2" type="file" class="file" data-show-upload="false" data-show-preview="false" data-show-cancel="false" webkitdirectory>
</div>
</div>
The control is rendered fine and works. The issue is that, as soon as the control is rendered, I can see "0%" above it. No matter what I have tried I cannot remove that. I don't want a progress bar to be visible, the control will work only to locate a folder name, which will then be used for other purposes.
Any ideas why I always see the progress bar?
I found the solution. I had to add the following option in js code when I create fileinput:
layoutTemplates: {progress: ''}