I've tried to make a button with both text and a icon group, the icon and text is vertically misaligned. There are not examples in the doc, so maybe no one has tried this before...
<Button
icon
>
<Icon.Group>
<Icon name='list'/>
<Icon color='green' corner name='add'/>
</Icon.Group>
<span>Some text</span>
</Button>
Related
I am trying to have input in dropdown menu in founation, but once input is clicked, whole menu hides, how can I achieve such behaviour?
This is codepen of one of original examples, with just input added:
<input />
https://codepen.io/anon/pen/RqyroK
To achieve what you want you can change this line:
<ul class="dropdown menu" data-dropdown-menu>
To this:
<ul class="dropdown menu" data-dropdown-menu data-close-on-click-inside="false">
An explanation of all dropdown plugin options can be found here.
How do I add a Font Awesome icon like <i class="fa fa-calendar"></i> to the following
{{form.date.label_tag}}
which uses widget_tweaks? I know generally you'd just do it like this
<h2><span>Add<i class="fa fa-plus"></i></span></h2> but I haven't had any luck.
It just outputs the "Date added:"
<form [formGroup]="variation" (ngSubmit)="onSubmit()">
<ion-list radio-group formControlName="color" *ngFor="let option of options">
<ion-list-header>
{{option.name}}
</ion-list-header>
<ion-item *ngFor="let opt of option.options">
<ion-label>{{opt}}</ion-label>
<ion-radio value="{{opt}}"></ion-radio>
<!--<ion-input type="text" formControlName="color" name="color" value=""></ion-input>-->
</ion-item>
</ion-list>
<button class="custom-button" block (click)="goToCart()">Submit</button>
</form>
Above is my forms in modal
I failed to push to another page from Forms in Modal.
Below is my push to another page method
goToCart() {
this.nav.setRoot(CartPage);
}
Below picture is after I clicked submit button in the form, the modal only slided half
Image to display problems
This is the code:
https://github.com/vinnchan/FormInModal
This app include first page that allow to click and open modal. You click the open modal button.
After that you click submit button and go to cart page.
Now you at cart page, when you click the side menu, it won't open.
I viewed the browser console pane, showed no error(s).
Try to dismiss the modal when submitting:
<button class="custom-button" block (click)="goToCart();dismiss();">Submit</button>
I need to add Icon to the button in a tree view
<button name="gen_link" type="object" icon="/custom_module/static/src/img/image.png" string="MyButton"/>
but as I inspect element in browser its shows me
<button type="button" class="" title="MyButton">
<img alt="MyButton" src="http://localhost:8000/web/static/src/img/icons//custom_module/static/src/img/image.png.png">
</button>
By default it always takes the default path, I am not able to give custom path for the icon.
Any Suggestion. . .
You can use /.. to move up /web/static/src/img/icons// directory.
Insert your button like this (tested):
<button name="gen_link"
type="object"
icon="/../../../../../../custom_module/static/src/img/image"/>
Problem: when Reveal data is taller than window height, scrolling moves the close icon off the page. I want to make it sticky so that you always have the option of closing the page without scrolling back up to the top.
I have tried loading the foundation 6 .sticky example into the reveal, but none of my attempts have been successful.
This is what I think should work, which is loaded into the reveal container <div id="modal2" style="height: 100%"></div> via ajax. Unfortunately, the close button just scrolls with the content.
<script>
// this script cannot be located in the layouts.js,
// because the trigger doesn't exist at page load.
$('#close-modal2').click(function(){
// $('#modal2').foundation('close'); didn't work for some reason.
// 'open' closes all other modals, so it accomplishes what I need.
$('#modal').foundation('open');
});
</script>
<div>
<button id="close-modal2" class="close-button sticky"
aria-label="Close reveal" type="button" data-sticky>
<span aria-hidden="true">×</span>
</button>
</div>
<div id="paragraph-wrapper" data-sticky-container>
<div class="row">
<div class="small-11 small-centered columns">
<div> Lots of content here, enough to overflow window...</div>
<div> Losts of content here..... etc.</div>
</div>
</div>
</div>
Am I missing something? Has anyone else been able to get a sticky close button in a reveal?
The basic behaviour of the Reveal is to close if the user clicks outside of the reveal container, so a user does already have a quick way of exiting the reveal.
However, you could also use position: fixed; on the close element.
That would keep it in the same spot while the modal scrolled up and down.
CSS
#modal2 > .close-button {
position: fixed;
top: 1rem; //or whatever
right: 2rem; //or whatever
}
e.g. in a Fiddle
Using position: fixed; is a bit of a pain for styling and mobiles but that will be depending on your particular design.