Comments (6)
Hi, thanks for the advice. I will think about, because the library can have arbitrary amount of numbers
from angular-code-input.
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.
[][][]__[][][]__[][][]
from angular-code-input.
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 😉
from angular-code-input.
@rozpuszczalny Thank you for the workaround!
from angular-code-input.
@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
from angular-code-input.
@rbalet thanks for the suggestion, I will think about
from angular-code-input.
Related Issues (20)
- Add placeholder support HOT 3
- Angular-Code-Input couldn't be imported in Angular 16. HOT 1
- Accessibility: Reflects text input behaviors HOT 3
- Autocapitalize HOT 1
- Programmatically add code HOT 4
- Add Option to Auto Capitalize inputs HOT 3
- Add support for angular 13 HOT 21
- Add --item-background-focused css var HOT 1
- auto select first input when click & empty HOT 2
- styling of input text HOT 2
- on screen material keyboard and code-input HOT 4
- Add css class on exist error HOT 1
- Keep focus after completing input HOT 1
- Usage in angular 13 project HOT 2
- Allow specifying custom input pattern HOT 1
- Need to press keyboard key twice to go change the input that have the focus on iOS HOT 6
- codeCompleted method calling function twice when code is entered quickly. HOT 2
- Input color and font-weight stylig is not applied HOT 7
- Responsive view HOT 1
- Add support for angular 16 HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-code-input.