search

tech-advantage / ngx-icon-picker

An Icon Picker Directive/Component for Angular 13+ which manages Font Awesome, Bootstrap Glyphicon, Font Awesome5 and Material.
MIT License
25 stars 33 forks source link

icons are no more justified and aligned in version 1.0.0 compared to 0.0.11 #21

Closed MoEffat closed 4 years ago

MoEffat commented 4 years ago

First, many thanks for the new version :)

The new [ipIconSize] parameter works perfectly

Now another issue occured. The icons are no more justified and aligned like they were on the version 0.0.11.

Please find in attachment 2 screenshots to show you the difference between the 2 versions. For your information in the version 1.0.0 the ipIconSize was not provided, so by default icons are not aligned.

version 0.0.11 with perfect icons alignment: version_0 0 11

version 1.0.0 with random icons alignment version_1 0 0

BallisticPain commented 4 years ago

Not sure this is helpful, but below is what I used to make my icons bigger before the 1.0 release. Also, it may need a fa-fw to make the width fixed... looks like the fa5 icon set. (It's what I'm using).

The override attribute I placed on my <body> tag ... <body override>

[override] .icon-picker div.icon-grid div button {
  width: 42px !important;
  padding: 2px !important;

  span {
    font-size: 2em;
  }
}

Edit: I'm attempting to test another feature at the moment or I would likely have a solution ready for the fixed width.

MoEffat commented 4 years ago

Hello @BallisticPain

I confirm that your solution to add an override attribute works fine. The icons are bigger and aligned. I just would prefer using the ipIconSize without extra css

greg7859 commented 4 years ago

The button size is computed according to the icon size and the padding. I added a new property ipIconPadding to change the padding if need. The default is 6px like before. I added a class applied to the button if you want to override CSS properties.

greg7859 commented 4 years ago

This issue is available on the 1.1.0 released on npm

MoEffat commented 4 years ago

Hello, Thanks for the new version,

I am facing a new minor issue though! Some icon buttons do not have the same height. Please find below a screenshot from version 1.1.0. Can you make sure that all icon buttons have the same height.

icon_button_smaller

greg7859 commented 4 years ago

I didn't reproduce the problem but I modified the component to set the width and height of the button. I added the horizontal (left/right) and vertical (top/bottom) padding to improve the padding control

greg7859 commented 4 years ago

Release 1.1.1

BallisticPain commented 4 years ago

@greg7859 That looks good. Thanks for the efforts!

@MoEffat I totally understand the desire to use the component without special overrides. I provided that to give the example of how I made the icons be the same size. I played with the CSS for a little while before arriving at those values.

MoEffat commented 4 years ago

@greg7859 The version 1.1.1 looks perfect for me :+1:

@BallisticPain Many thanks for the css solution, for your information I was using it until now ;-)