Thank you for reading my message, here is my problem :
I'm using a navbar made with Bulma in which I display either login/register buttons or a profile picture icon from FontAwesome using {{#if currentUser}} as shown below ("S'inscrire" and "Se connecter" means register and login in French) :
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
{{#if currentUser}}
<!-- Displayed only when the user is logged in-->
<i class="fas fa-user icon is-large" id="userProfile"></i>
{{else}}
<!-- Displayed when the user is NOT logged in-->
<a class="button is-primary register">
<strong>S'inscrire</strong>
</a>
<a class="button is-light login">Se connecter</a>
{{/if}}
</div>
</div>
</div>
When the user is not logged in it only show the buttons :
And when he logs in I have only the icon :
My problem is that when user logs out, I got both user icon and buttons :
and if I log in and out multiple times I get multiple icons.
Looks like it's a problem with FontAwesome icon, I've tried with a normal image instead of the icon and it behaved normally, but I need to use icons inside this type of statement in some place of my app.
Thanks in advance !
This is because font awesome 5 replaces the <i> tag with an svg which will break your code reactivity if it's not wrapped inside another flow element. Try wrapping the <i> with a <span> in order to keep the reactivity going:
<span>
<i class="fas fa-user icon is-large" id="userProfile"></i>
</span>
You could also make this a short stateless template:
<template name="icon">
<span>
<i class="fas fa-{{name}} {{#if large}}is-large{{/if}}" id="{{id}}"></i>
</span>
</template>
and call it like
{{>icon name="user" large=true id="userProfile"}}
Related
I created a story using MDX. I want to demonstrate my inhouse-styles for buttons.
The story contains the following:
<a class="btn btn-primary">
Primary Button
</a>
When rendered, story book shows
<a class="sbdocs sbdocs-a btn btn-primary css-19nbuh3" target="_top">
Primary Button
<a>
As a result, my button does not display with the correct css.
How do I prevent storybook MDX from changing markup?
Put your markup inside of <Preview> tags:
<Preview>
<a class="btn btn-primary">
Primary Button
</a>
</Preview>
I have a table like below with a custom toolbar icon in the top left.
This icon enables/disables the Filter Control.
It is setup like:
<div id="toolbar">
<button id="filterable" type="button" class="btn btn-secondary">
<i class="fas fa-sliders-h"></i>
</button>
</div>
<table>
..
</table>
Is it possible to integrate this custom icon in the other icons on the right side?
E.g. after the pagination switch icon?
Its currently not possible with the bootstrap-table internal functions.
But there is a pull request which allows adding custom buttons.
I tried to show shopping cart icon always in right side for mobile,tab,desktop using boostrap but it is not working for responsive.How can i show shopping cart icon always right side.
<div class="shopingicons mr-auto">
<a href="cart.html" class="icons-btn d-inline-block bag">
<span class="icon-shopping-bag"></span>
<span class="number">2</span>
</a>
</div>
Demo:https://jsfiddle.net/nvk87are/9/
Add your following code after </ul> tag in the navbar code. I tried it in your code and it worked.
<div style="float:right">
<div class="shopingicons mr-auto">
<a href="cart.html" class="icons-btn d-inline-block bag">
<span class="icon-shopping-bag"></span>
<span class="number">2</span>
</a>
</div>
</div>
Want more help? Reply and ask again
Your navbarResponsive is hidden in responsive mode and in larger view it's showing up and taking the place of your cart icons.
You can swap the position of your #navbarResponsive and the .shoppingicons. screenshot
Here you can check the working-demo
as cake3 is using foundation framework, how can I use the reveal moadl function?
I tried simply copy and paste this to my view:
<p><a data-open="exampleModal1">Click me for a modal</a></p>
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
But when I test it, I don't get any error but also the div is visible and not hidden and the "Click me for a modal" does also nothing.
Do I need to include any further files on order to use this in cake?
I'm using a template based on Bootstrap 3 and there is a weird display issue with Firefox for file input elements: basically the click area covers a huge part of the page, which means that anything around them cannot be clicked without triggering a file upload.
Here is what I mean by large area (with Firebug, based on the <input type="file"> element):
While with Chrome it's fine:
And with IE it's also fine.
Here is the link to the theme page where you see the issue (only happening to the first type of "advanced file input", where the input element itself is displayed): http://www.keenthemes.com/preview/metronic_admin/components_form_tools.html
And here is the code for the file display:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group input-large">
<div class="form-control uneditable-input span3" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="documents-0">
</span>
Remove
</div>
</div>
Any idea how I can force the input element click zone to stay within its limits on Firefox?
Thanks in advance!