Don't showing more than 4 child elements

[c0nf1gur4t0r]

Notice that when I put more than 4 elements, the directive simply ignore the "excess".

See here: http://plnkr.co/edit/BcGEhsLSoFxhgDLzon26

So what is going wrong? Please, can you help me?

[nobitagit]

You have to rebuild the CSS file accordingly as to support as many buttons as needed. See the docs for the way to do it properly. Let me know if you need further help.

[c0nf1gur4t0r]

Really thanks a lot, but in a cenario that intends to be more dinamic as possible, how I could do these adjusts dinamically?

[nobitagit]

Being it tied to a css stylesheet there is no way to recompile it on the fly, as far as I know. You could sort of replicate the logic behind the scss to work in the JavaScript and calculate the positions dynamically but in the end i am quite sure that the cost in term of work and performance would just not be justified.

My suggestion: simply define a sensible maximum amount of buttons your layout can support (I hardly see anyone needing more than 7-8 buttons, let alone have sufficient real estate for them in the page), choose an effect and make a custom build as explained in the docs linked above.

You'll end up with some lines of potentially unused CSS but it will probably affect next to zero your overall performance and your layout will support a variable amount of buttons from 0 to n without any problem.

[c0nf1gur4t0r]

I've decided to solve the problem as you have said, that is define sensibly the maximum amount of buttons. But by the Docs that you've sent me, I changed just the property "$number-of-child-buttons" to "5" instead "4 !default" and I rebuilt the SASS file to generate CSS. Sadly, I think isn't just that.

Please, can you help me? Best regards.

[nobitagit]

Check this Plunkr.

I generated the css form a scss file like the my-custom.scss you see in the Plunkr, which is simply:

$number-of-child-buttons: 6;
$effects-slidein: false;
$effects-slidein-spring: false;
$effects-fountain: false;
@import "../bower_components/ng-mfb/mfb/src/mfb.scss";

You just need to tell your task runner to compile this my-custom.scss file and it will generate the appropriate code in your own css.

[c0nf1gur4t0r]

Yeah yeah, I've managed it yesterday but thanks a lot.

[ghost]

$number-of-child-buttons: 6; works fine. thanks