ngx-numeric-textbox align right
I'm using ngx-numeric-textbox in Angular 6 App, and this work well, but by default the text is aligned at left and I want to align to right. I tried many ways in CSS but none works. How can I overwrite this so that it goes to the right instead? I'm using HTML and SASS...
This is my HTML:
<ngx-numeric-textbox
name="inputPrecio" [min]="0" [max]="99999999"
[disabled]="false" [decimals]="0" [format]="'$ 0,0'"
[placeholder]="'Ingrese un precio'"
[rangeValidation]="true"
[(ngModel)]="item.precio"
(ngModelChange)="calcularSubtotal()"
required>
</ngx-numeric-textbox>
And this is my SASS:
ngx-numeric-textbox {
&input {
text-align: right !important;
}
}
html css angular sass
edited Nov 14 '18 at 16:09
Zain Farooq
2,0002928
asked Nov 14 '18 at 16:04
CodeliousCodelious
13
add a comment |
I'm using ngx-numeric-textbox in Angular 6 App, and this work well, but by default the text is aligned at left and I want to align to right. I tried many ways in CSS but none works. How can I overwrite this so that it goes to the right instead? I'm using HTML and SASS...
This is my HTML:
<ngx-numeric-textbox
name="inputPrecio" [min]="0" [max]="99999999"
[disabled]="false" [decimals]="0" [format]="'$ 0,0'"
[placeholder]="'Ingrese un precio'"
[rangeValidation]="true"
[(ngModel)]="item.precio"
(ngModelChange)="calcularSubtotal()"
required>
</ngx-numeric-textbox>
And this is my SASS:
ngx-numeric-textbox {
&input {
text-align: right !important;
}
}
html css angular sass
edited Nov 14 '18 at 16:09
Zain Farooq
2,0002928
asked Nov 14 '18 at 16:04
CodeliousCodelious
13
Did you try to add::ng-deepinto your selector rule? i.e.&::ng-deep input {...}I think you are running into an issue with the encapsulation of styles.
– Daniel W Strimpel
Nov 14 '18 at 16:10
Thanks a lot Daniel, finally I solve this with your advice and it works well.
– Codelious
Nov 14 '18 at 16:24
add a comment |
I'm using ngx-numeric-textbox in Angular 6 App, and this work well, but by default the text is aligned at left and I want to align to right. I tried many ways in CSS but none works. How can I overwrite this so that it goes to the right instead? I'm using HTML and SASS...
This is my HTML:
<ngx-numeric-textbox
name="inputPrecio" [min]="0" [max]="99999999"
[disabled]="false" [decimals]="0" [format]="'$ 0,0'"
[placeholder]="'Ingrese un precio'"
[rangeValidation]="true"
[(ngModel)]="item.precio"
(ngModelChange)="calcularSubtotal()"
required>
</ngx-numeric-textbox>
And this is my SASS:
ngx-numeric-textbox {
&input {
text-align: right !important;
}
}
html css angular sass
edited Nov 14 '18 at 16:09
Zain Farooq
2,0002928
asked Nov 14 '18 at 16:04
CodeliousCodelious
13
I'm using ngx-numeric-textbox in Angular 6 App, and this work well, but by default the text is aligned at left and I want to align to right. I tried many ways in CSS but none works. How can I overwrite this so that it goes to the right instead? I'm using HTML and SASS...
This is my HTML:
<ngx-numeric-textbox
name="inputPrecio" [min]="0" [max]="99999999"
[disabled]="false" [decimals]="0" [format]="'$ 0,0'"
[placeholder]="'Ingrese un precio'"
[rangeValidation]="true"
[(ngModel)]="item.precio"
(ngModelChange)="calcularSubtotal()"
required>
</ngx-numeric-textbox>
And this is my SASS:
ngx-numeric-textbox {
&input {
text-align: right !important;
}
}
html css angular sass
html css angular sass
edited Nov 14 '18 at 16:09
Zain Farooq
2,0002928
asked Nov 14 '18 at 16:04
CodeliousCodelious
13
edited Nov 14 '18 at 16:09
Zain Farooq
2,0002928
asked Nov 14 '18 at 16:04
CodeliousCodelious
13
edited Nov 14 '18 at 16:09
Zain Farooq
2,0002928
edited Nov 14 '18 at 16:09
Zain Farooq
2,0002928
edited Nov 14 '18 at 16:09
Zain Farooq
2,0002928
2,0002928
asked Nov 14 '18 at 16:04
CodeliousCodelious
13
asked Nov 14 '18 at 16:04
CodeliousCodelious
13
asked Nov 14 '18 at 16:04
CodeliousCodelious
13
13
Did you try to add::ng-deepinto your selector rule? i.e.&::ng-deep input {...}I think you are running into an issue with the encapsulation of styles.
– Daniel W Strimpel
Nov 14 '18 at 16:10
Thanks a lot Daniel, finally I solve this with your advice and it works well.
– Codelious
Nov 14 '18 at 16:24
add a comment |
Did you try to add::ng-deepinto your selector rule? i.e.&::ng-deep input {...}I think you are running into an issue with the encapsulation of styles.
– Daniel W Strimpel
Nov 14 '18 at 16:10
Thanks a lot Daniel, finally I solve this with your advice and it works well.
– Codelious
Nov 14 '18 at 16:24
Did you try to add
::ng-deep into your selector rule? i.e. &::ng-deep input {...} I think you are running into an issue with the encapsulation of styles.– Daniel W Strimpel
Nov 14 '18 at 16:10
Did you try to add
::ng-deep into your selector rule? i.e. &::ng-deep input {...} I think you are running into an issue with the encapsulation of styles.– Daniel W Strimpel
Nov 14 '18 at 16:10
Thanks a lot Daniel, finally I solve this with your advice and it works well.
– Codelious
Nov 14 '18 at 16:24
Thanks a lot Daniel, finally I solve this with your advice and it works well.
– Codelious
Nov 14 '18 at 16:24
add a comment |
1 Answer
1
active
oldest
votes
Finally I solve this, adding ::ng-deep into the selector rule. This was an issue with the encapsulation of styles:
ngx-numeric-textbox {
&::ng-deep input {
text-align: right !important;
}
}
showing in firefox
answered Nov 14 '18 at 16:30
CodeliousCodelious
13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304318%2fngx-numeric-textbox-align-right%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Finally I solve this, adding ::ng-deep into the selector rule. This was an issue with the encapsulation of styles:
ngx-numeric-textbox {
&::ng-deep input {
text-align: right !important;
}
}
showing in firefox
answered Nov 14 '18 at 16:30
CodeliousCodelious
13
add a comment |
Finally I solve this, adding ::ng-deep into the selector rule. This was an issue with the encapsulation of styles:
ngx-numeric-textbox {
&::ng-deep input {
text-align: right !important;
}
}
showing in firefox
answered Nov 14 '18 at 16:30
CodeliousCodelious
13
add a comment |
Finally I solve this, adding ::ng-deep into the selector rule. This was an issue with the encapsulation of styles:
ngx-numeric-textbox {
&::ng-deep input {
text-align: right !important;
}
}
showing in firefox
answered Nov 14 '18 at 16:30
CodeliousCodelious
13
Finally I solve this, adding ::ng-deep into the selector rule. This was an issue with the encapsulation of styles:
ngx-numeric-textbox {
&::ng-deep input {
text-align: right !important;
}
}
showing in firefox
answered Nov 14 '18 at 16:30
CodeliousCodelious
13
answered Nov 14 '18 at 16:30
CodeliousCodelious
13
answered Nov 14 '18 at 16:30
CodeliousCodelious
13
answered Nov 14 '18 at 16:30
CodeliousCodelious
13
13
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304318%2fngx-numeric-textbox-align-right%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you try to add
::ng-deepinto your selector rule? i.e.&::ng-deep input {...}I think you are running into an issue with the encapsulation of styles.– Daniel W Strimpel
Nov 14 '18 at 16:10
Thanks a lot Daniel, finally I solve this with your advice and it works well.
– Codelious
Nov 14 '18 at 16:24