Base solution for your next web application
Open Closed

Metronic Dropdown with From #8986


User avatar
0
datalab created

I need to create a drop-down menu with a form inside, I used the code from the following link https://keenthemes.com/metronic/preview/demo2/features/bootstrap/dropdown.html

but it doesn't work. What is the correct way to make it happen whit your framework?

Myprodut is: ASP.NET Zero 8.1 for Angular and .Net core 3.1

Best Regards Dennis Bellancini


3 Answer(s)
  • User Avatar
    0
    datalab created

    I used this code but when I place the cursor on the textbox the menu closes.

    <div class="btn-group dropdown" dropdown container="body">
                                <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" dropdownToggle>
                                    <i class="flaticon-email"></i> Invia Notifica
                                </button>
                                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-lg-right" *dropdownMenu>
                                    <form class="form-horizontal" #sendClaimNotification="ngForm">
                                        <div *ngIf="!isAdmin" class="form-group">
                                            <label for="notificationMessage">Destinatario</label>
                                            <select name="userId" id="userId" [(ngModel)]="claimNotification.toUserId" class="form-control" required>
                                                <option value="undefined">Seleziona un utente a cui inviare la notifica</option>
                                                <option *ngFor="let user of users" [value]="user.id">{{user.name}} + ' ' + {{user.surname}}</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="notificationMessage">Messaggio</label>
                                            <textarea name="notificationMessage" id="notificationMessage" rows="8" [(ngModel)]="claimNotification.message" class="form-control"></textarea>
                                        </div>
                                        <button [disabled]="!sendClaimNotification.form.valid" type="button" class="btn btn-primary" (click)="sendNotification()"><i class="flaticon2-send-1"></i> Invia</button>
                                    </form>
                                </div>
                            </div>
    
  • User Avatar
    0
    datalab created

    I have resolted it by add this line of code for every form input element

    (click)="$event.stopPropagation();"

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks **@datalab ** :)