Objective: My goal is to reposition a div (containing a mat-select dropdown) ABOVE a mat-card-title when the user is accessing the site from a mobile device. If the user is not on a mobile device, the div should remain in its original position to the right of the mat-card-title.
Appearance on non-mobile devices: https://i.sstatic.net/RMPEa.png
Approaches Tried:
- I attempted to use ngIf conditions above and below the div, but found it cluttered the HTML structure.
- I considered media queries but realized they typically involve elements moving down rather than up, especially when nested.
- Following a Stack Overflow article on JavaScript manipulation of DOM elements, I experimented with vanilla JavaScript.
- While jQuery solutions were also explored, I ultimately decided against using jQuery for this project.
Challenge: I encountered TS2339 error regarding the 'before' property not existing on type 'HTMLElement' or 'HTMLTextAreaElement'.
Despite attempting various variable casts as suggested in a similar Stack Overflow thread, the issue remains unresolved.
Seeking guidance on potential next steps.
HTML Snippet:
<div class="title-container">
<mat-card-title id="signInTitle" class="text-center" i18n="@@MoVeSeLo_H1_1">
Please Sign In
</mat-card-title>
<div id="langDropDown">
<div *ngIf="(_lang_switch_controls)">
<form [formGroup]="_siteForm">
<mat-form-field class="language-field" appearance="outline">
<mat-select (selectionChange)="changeSite($event)" [value]="languages[i].value">
<mat-option *ngFor="let language of languages" [value]="language.value">
{{language.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</form>
</div>
</div>
</div>
TypeScript Snippet:
const signInTitle = <HTMLTextAreaElement>document.getElementById("signInTitle");
const langDropDown = <HTMLDivElement>document.getElementById("langDropDown");
var uagent = navigator.userAgent.toLowerCase();
if (uagent.match(/iPad|iPhone|android/)) {
signInTitle.before(langDropDown);
}