I'm having this problem:
I'm starting with Angular 6, so I wanted to do a text editor which shows the css styles while you are typing.
Seeing that I wasn't able to show the Css styles inside of Textareas, I tried with an editable div when I show the text on [innerHTML]="".
The main problem is when I call the method bound to an (input), the cursor goes to the start of the div, instead of go to the last position to keep typing.
I'm using the following div:
<div class="derecha" id="editable" [innerHTML]="textoCompleto" contenteditable="true" (input)="aTexto($event.target.innerText)"></div>
Thank you so much
Related
I have an input tag inside a div tag. I need to hide the div tag after clicking three times in the input tag. How do I achieve this in HTML using angular?
You have endless solutions for this but, the idea would be that you have a counter that start at 0, after each click you increment it and when it reaches 3 you change the class/style applied to the div parent.
I have created a stackblitz app as an example for you, hope it helps:
https://stackblitz.com/edit/hide-element-after-3-clicks?file=src/app/app.component.html
Image to show postion
Hello there,
I would like to add a label to the box below (where it says 209) in the same style and aligned to the text above. These boxes are generated trough plugins. I have css styled them a bit, but I am unsure how to add text. Any help would be apreciated, since I am but only a humble noob.
Do it with jQuery:
jQuery('.classNameHere').text('text to be inserted');
I am having an issue with my Angular 7 application when initializing. I have a class called "testing", and all it does is change the text color to red. I had the class listed in either the index.html file inside a style tag, or in the styles.scss file with all my global styles. I tested both ways with same results. I'm using angular/cli and ng serve to test my application and the following is how I have my index.html page laid out:
<body>
<app-root>
<div class="container">
<span class="testing">Application is loading, please wait...</span>
</div>
</app-root>
</body>
Expectation: The text inside the span should be red with a slight indent (via bootstrap container class).
Actual Results:
When I type localhost:4200 in the url and hit enter, the text appears to the top far left of the screen with no red color before the app gets rendered.
If I hit refresh the same thing as #1 happens.
If I hit shift+refresh, for a split second #1 happens before the text gets indented into the bootstrap container div and changes to red.
Can someone explain to me what is happening here, and what do I need to do to make #3 happen without any split second style changes? If any additional information is needed to answer, please let me know.
First, of all this is not right way to write even a single word in tag because it behaves as template directive or you can say empty box to be filled by app.component.html content, and this is why you observing little flick (appears before render) and best way to write your content in app.component.html and style it through app.component.css / app.component.scss or you can write that css in main file for css (style.css) but each class should be in their component styling. Because angular is about separate modules/component/section.
Hope this helps you
I have a div inside an ng-include template that won't highlight when you mouse over. The cursor does change to a pointer on hovering over the text, but when you actually click and drag to highlight the text, nothing highlights.
This is important because I can't tab through the elements inside the ng-included template, which is a requirement for screen readability. Any ideas what's going on?
Parent template:
<div ng-controller="EntryController">
<!-- Stuff that works -->
<div ng-include="'entry_review.html'"></div>
</div>
entry_review.html:
<div>hello</div>
Result - not able to click and drag a highlight over "hello". Also can't tab through it (which is the real problem).
It probably has 'user-select: none;' somewhere in the CSS?
Angular shouldn't have any affect on this.
I'm struggling to replicate the login form found at the top of the PayPal website.
I have been able to create the username and password fields including the 'blue glow' from searching the web for tutorials; however, I'm unable to find any coding to add the 'clickable' question mark to the field.
I would like to be able to replicate the drop down when the question mark is clicked.
Any help will be greatly appreciated.
I hope I have made it clear.
What you could do is in your form have the question-mark image trigger a java-function... Ex:
<img src="my_image.jpg" onClick="myjava_function()">
Then in your java function you could have a div containing the drop-down displayed.
<script type="text/javascript">
myjava_function(){
document.getElementById('mydiv').style.display="block"
}
</script>
Then in near the form you could have your div that contains the drop down first being hidden but shown on the click.
<div id="mydiv" style="display:none;"><form><select><option value=1>1</option></select></form></div>
This would be my approach to getting it done. Firstly, try and get a log that is similar to the question mark, and position it in the div that you would place your area at. In the CSS for the logo apply float right so that the logo would appear to the right of that div. Then build a whole div that appears when you click the log before hand and give it the CSS display none, hence it would not be shown. Write a javascript function that works with the onclick you apply on the logo that changes the CSS of that div to display block and hence the whole div appears when you click it. The div by itself has a cross mark that could trigger another javascript call to change the CSS to display none. Good luck.