Add Space Between Numbers #38

Activity

1. AlexMiniApps commented on Jun 8, 2021

   

   AlexMiniApps

   on Jun 8, 2021

   Owner

   More actions

   Hi, thanks for the advice. I will think about, because the library can have arbitrary amount of numbers
2. AlexMiniApps

   added

   investigating

   on Jun 8, 2021
3. danielehrhardt commented on Jun 8, 2021

   

   danielehrhardt

   on Jun 8, 2021

   Last edited by danielehrhardt

   Author

   More actions

   Hi, thanks for the advice. I will think about, because the library can have arbitrary amount of numbers

   Maybe a every option would be good.

   Every 3. Every 2.
   [][][]__[][][]__[][][]
4. AlexMiniApps

   added

   enhancementNew feature or requestNew feature or request

   on Jun 10, 2021
5. AlexMiniApps

   removed

   investigating

   on Sep 16, 2021
6. rozpuszczalny commented on Dec 1, 2023

   

   rozpuszczalny

   on Dec 1, 2023

   More actions

   Hi, first of all, thanks Alex for the library, it helps a lot!

   For anyone who might be interested in the spacings between inputs, you can do it via SCSS, like so:

   code-input {
   
     // Change nth-child(2n) to whatever you want. 2n is every two inputs.
     // You could also do only one gap, by specifying after which field a gap should appear, e.g. 4
     &::ng-deep > span::nth-child(2n):not(:last-child) {
       --item-spacing: 24px; // Or whatever gap value you want
     }
   }

   You can extend it to e.g. include dash separators with some more SCSS magic:

   code-input {
     &::ng-deep > span::nth-child(3n):not(:last-child) {
       --item-spacing: 20px;
       position: relative;
   
       &::after {
         position: absolute;
         top: 0;
         bottom: 0;
         right: 5px;
         width: 10px;
         content: "-";
       }
     }
   }

   Note about dash separators: If someone pastes a code e.g. "0000-abcd" into the 8 characters long input, the code will be "0000-abc", as "-" will not be considered as a separator, but a part of code. Worth remembering 😉
7. AlexMiniApps commented on Dec 20, 2023

   

   AlexMiniApps

   on Dec 20, 2023

   Owner

   More actions

   @rozpuszczalny Thank you for the workaround!
8. rbalet commented on Feb 8, 2024

   

   rbalet

   on Feb 8, 2024

   Last edited by rbalet

   Contributor

   More actions

   @AlexMiniApps What about adding a css variable to each span ?

   The would let anybody change the spacing as they wish, without having to use ng-deep or anything else.

   

   Let me know and I'll do a pull-request
9. AlexMiniApps commented on Feb 9, 2024

   

   AlexMiniApps

   on Feb 9, 2024

   Owner

   More actions

   @rbalet thanks for the suggestion, I will think about