Mixing
Angular: Event listener to dynamic element from external lib
I have implemented some input typeahead autocomplete from bootstrap in my input element it also have a switchable lang (right to left and left to right).
The default of the dropdown menu is text-align: left and its created dynamically when typing. I'm trying to attach an eventListener to it when it's on the RTL input it will override its css to text-align: right and back to left if it's on LTR.
I tried this for each ltr/rtl:
let dd_element = document.getElementsByClassName('dropdown-menu')[0]
dd_element.classList.add('dropdown-toLeft')
But I get undefined error since the element is not exist yet
So.. How can I control the dynamic element and it's behavior?
javascript css angular
asked Nov 20 '18 at 17:09
Roi SadikaRoi Sadika
9710
add a comment |
I have implemented some input typeahead autocomplete from bootstrap in my input element it also have a switchable lang (right to left and left to right).
The default of the dropdown menu is text-align: left and its created dynamically when typing. I'm trying to attach an eventListener to it when it's on the RTL input it will override its css to text-align: right and back to left if it's on LTR.
I tried this for each ltr/rtl:
let dd_element = document.getElementsByClassName('dropdown-menu')[0]
dd_element.classList.add('dropdown-toLeft')
But I get undefined error since the element is not exist yet
So.. How can I control the dynamic element and it's behavior?
javascript css angular
asked Nov 20 '18 at 17:09
Roi SadikaRoi Sadika
9710
When switching to the rtl language, does thedirattribute get set anywhere in the html? Potentially you could solve it with just css:[dir="rtl"] .dropdown-menu { text-align: right!important; }
– Alex K
Nov 20 '18 at 20:38
the element is not created yet so if I try to change something I got undefined
– Roi Sadika
Nov 26 '18 at 13:30
If you target the dropdown element with CSS, it won't matter whether the element exists or not. The CSS rule will be applied whenever the element is created. Can you post the HTML markup for the dropdown element for ltr and rtl?
– Alex K
Nov 26 '18 at 15:12
I tried it out, but it wont affect when I'm switching the components
– Roi Sadika
Dec 2 '18 at 15:16
add a comment |
I have implemented some input typeahead autocomplete from bootstrap in my input element it also have a switchable lang (right to left and left to right).
The default of the dropdown menu is text-align: left and its created dynamically when typing. I'm trying to attach an eventListener to it when it's on the RTL input it will override its css to text-align: right and back to left if it's on LTR.
I tried this for each ltr/rtl:
let dd_element = document.getElementsByClassName('dropdown-menu')[0]
dd_element.classList.add('dropdown-toLeft')
But I get undefined error since the element is not exist yet
So.. How can I control the dynamic element and it's behavior?
javascript css angular
asked Nov 20 '18 at 17:09
Roi SadikaRoi Sadika
9710
I have implemented some input typeahead autocomplete from bootstrap in my input element it also have a switchable lang (right to left and left to right).
The default of the dropdown menu is text-align: left and its created dynamically when typing. I'm trying to attach an eventListener to it when it's on the RTL input it will override its css to text-align: right and back to left if it's on LTR.
I tried this for each ltr/rtl:
let dd_element = document.getElementsByClassName('dropdown-menu')[0]
dd_element.classList.add('dropdown-toLeft')
But I get undefined error since the element is not exist yet
So.. How can I control the dynamic element and it's behavior?
javascript css angular
javascript css angular
asked Nov 20 '18 at 17:09
Roi SadikaRoi Sadika
9710
asked Nov 20 '18 at 17:09
Roi SadikaRoi Sadika
9710
asked Nov 20 '18 at 17:09
Roi SadikaRoi Sadika
9710
asked Nov 20 '18 at 17:09
Roi SadikaRoi Sadika
9710
asked Nov 20 '18 at 17:09
Roi SadikaRoi Sadika
9710
9710
When switching to the rtl language, does thedirattribute get set anywhere in the html? Potentially you could solve it with just css:[dir="rtl"] .dropdown-menu { text-align: right!important; }
– Alex K
Nov 20 '18 at 20:38
the element is not created yet so if I try to change something I got undefined
– Roi Sadika
Nov 26 '18 at 13:30
If you target the dropdown element with CSS, it won't matter whether the element exists or not. The CSS rule will be applied whenever the element is created. Can you post the HTML markup for the dropdown element for ltr and rtl?
– Alex K
Nov 26 '18 at 15:12
I tried it out, but it wont affect when I'm switching the components
– Roi Sadika
Dec 2 '18 at 15:16
add a comment |
When switching to the rtl language, does thedirattribute get set anywhere in the html? Potentially you could solve it with just css:[dir="rtl"] .dropdown-menu { text-align: right!important; }
– Alex K
Nov 20 '18 at 20:38
the element is not created yet so if I try to change something I got undefined
– Roi Sadika
Nov 26 '18 at 13:30
If you target the dropdown element with CSS, it won't matter whether the element exists or not. The CSS rule will be applied whenever the element is created. Can you post the HTML markup for the dropdown element for ltr and rtl?
– Alex K
Nov 26 '18 at 15:12
I tried it out, but it wont affect when I'm switching the components
– Roi Sadika
Dec 2 '18 at 15:16
When switching to the rtl language, does the
dir attribute get set anywhere in the html? Potentially you could solve it with just css: [dir="rtl"] .dropdown-menu { text-align: right!important; }– Alex K
Nov 20 '18 at 20:38
When switching to the rtl language, does the
dir attribute get set anywhere in the html? Potentially you could solve it with just css: [dir="rtl"] .dropdown-menu { text-align: right!important; }– Alex K
Nov 20 '18 at 20:38
the element is not created yet so if I try to change something I got undefined
– Roi Sadika
Nov 26 '18 at 13:30
the element is not created yet so if I try to change something I got undefined
– Roi Sadika
Nov 26 '18 at 13:30
If you target the dropdown element with CSS, it won't matter whether the element exists or not. The CSS rule will be applied whenever the element is created. Can you post the HTML markup for the dropdown element for ltr and rtl?
– Alex K
Nov 26 '18 at 15:12
If you target the dropdown element with CSS, it won't matter whether the element exists or not. The CSS rule will be applied whenever the element is created. Can you post the HTML markup for the dropdown element for ltr and rtl?
– Alex K
Nov 26 '18 at 15:12
I tried it out, but it wont affect when I'm switching the components
– Roi Sadika
Dec 2 '18 at 15:16
I tried it out, but it wont affect when I'm switching the components
– Roi Sadika
Dec 2 '18 at 15:16
add a comment |
0
active
oldest
votes
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%2f53398075%2fangular-event-listener-to-dynamic-element-from-external-lib%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53398075%2fangular-event-listener-to-dynamic-element-from-external-lib%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
When switching to the rtl language, does the
dirattribute get set anywhere in the html? Potentially you could solve it with just css:[dir="rtl"] .dropdown-menu { text-align: right!important; }– Alex K
Nov 20 '18 at 20:38
the element is not created yet so if I try to change something I got undefined
– Roi Sadika
Nov 26 '18 at 13:30
If you target the dropdown element with CSS, it won't matter whether the element exists or not. The CSS rule will be applied whenever the element is created. Can you post the HTML markup for the dropdown element for ltr and rtl?
– Alex K
Nov 26 '18 at 15:12
I tried it out, but it wont affect when I'm switching the components
– Roi Sadika
Dec 2 '18 at 15:16