I have an app where i use MatDialogRef to open a component as a dialog.
The dialog shows a long text, but for some reason, the textarea scrolls to the bottom.
This does not happen when it's not a dynamically created component.
Heres an example: https://stackblitz.com/edit/matdialogref-textarea-scroll-issue
I hope someone can explain whats happening and how to fix it, so the textarea stays in the top of the scroll.
Thanks in advance!
From #angular/material dialog docs:
Once a dialog opens, the dialog will automatically focus the first tabbable element.
You can control which elements are tab stops with the tabindex attribute
Just add a tabindex=0 on the modal div:
<div class="dialog" tabindex="0">
<textarea class="texta" [(ngModel)]="data"></textarea>
</div>
Here's a Working Demo for your ref.
Here's another thread for your ref:
angular 6 mat-dialog scroll down to bottom automatically
Related
I have this div from an HTML component file
<div [ngStyle]="{'text-align':Setting.Position}" style="overflow:hidden">
The Setting.Position is a property that is in a component.ts file and it is being set from a modal with a dropdown (values either left, right, center) bound to Setting.Position model that is being loaded when a button is clicked.
After the button from the modal is clicked to save the value, the modal exits. However, the value of text-align is not reflected instantly. To have it take effect, I will need to reload the modal and exit.
I have already tried window.location.reload() but it reloads the whole page.
Appreciate any help on this.
I have p-checkbox components in a table and want to disable the component getting the focus and centering the view on it when clicked.
This is in my html:
<p-checkbox
name="select-{{rowIndex}}"
[(ngModel)]="quotationLine['selectedForDeletion']"
binary="true" (focus)="onFocus($event)"
(onChange)="onSelectedForDeletion(quotationLine, $event)">
</p-checkbox>
And this in my ts:
onFocus($event: FocusEvent) {
window.scrollBy(0, 0);
}
But it does not seem to disable the checkbox receiving center.
Could not get this component to not consume the focus and destroy the view so used a normal HTML5 checkbox instead and it works flawlessly when used inside a scroll able table.
I have a react component, which I am using as Modal and also as element in a page. It has radio buttons.
The problem is When the user is top of the page and modal is open. If the user selects anything in modal, the page is scrolled to another element (same component) in that page which will distract the user.
Since both elements are same, selecting in one will also selects in another. Thats understandable.
I tried, onChange for radio and e.preventDefault, but did not work.
Any suggestions would be helpful.
Closest i can reproduce is https://jsfiddle.net/3tbkLxcu/
Here, preventDefault works but not in my application.
When you click on label, it will scroll to the bottom.
<label htmlFor="test-id" onClick={this.handleClick.bind(this)}>Test radio</label>
handleClick(e) {
e.preventDefault();
}
I found a solution to you problem, just add the following css :)
.ReactModal__Body--open {
overflow: hidden;
}
I have this example: http://dabblet.com/gist/540b8d498447aaea159fa4215d18984f which gets me close.
I'd like for the click of the "I'm a Toggle" to hide itself and the top green box.
Is this possible without Javascript?
Thanks in advance!
As of 2016, there is no way to select the parent of an element in CSS. Check this link.
I want to highlight a div which is part of a form using fancybox.
<form>
...
...
<div id='sub-form'>
...
...
</div>
...
...
<form>
I want to show the div with id = sub-form in a popup window and also in the main page. When value of an element in the popup is changed then value of that element in the parent window should change accordingly.
Mean while i want to highlight that div.
I tried it using fancybox but fancybox is removing it from the form and also hiding from the parent window.
Is it possible to do with fancybox? OR any plugin is available to do this task? Thanks!