I have developed a custom form field control for Angular 8 that is compatible with Reactive Forms and Angular Material. This form control features a simplified rich-text editor with a header containing various buttons for user actions.
Is there a way to reposition the placeholder label from below the header of the input control to inside the actual textarea?
It seems my question went unanswered, so I will share the solutions I came up with for this issue. One is a bit rudimentary (Solution 2) and the other is what I consider more appropriate (Solution 2, even though it may seem otherwise).
I attempted to make my code more configurable by making a small change - switching one variable to static. This variable is used to declare the ID that MatFormField uses in a class definition within itself, allowing us to customize the appearance of our component.
This variable is named controlType. By using this variable, we can determine when our component is being used by directly referencing its class name following the naming convention
mat-form-field-type-<controlType>controlType = "app-text-editor", I can utilize it like this:
.mat-form-field-type-app-text-editor:not(.mat-form-field-should-float) .mat-form-field-label-wrapper > .mat-form-field-label {
margin-top: 2.5rem;
padding: .5em;
}
What I did was modify my component to use
encapsulation: ViewEncapsulation.Noneapp-text-editor) and then employed CSS Sibling selector to target the floating label and placeholder to adjust the position of my TextEditor header and revert it to its default once the label is floating. The resulting CSS appears as follows:
app-text-editor {
// Styling for actual TextEditor
&.floating ~ .mat-form-field-label-wrapper > .mat-form-field-label {
margin-top: initial;
padding: initial;
}
& ~ .mat-form-field-label-wrapper > .mat-form-field-label {
margin-top: 2.5rem;
padding: .5em; // Used to properly align the content inside my contenteditable
}
Alternatively, with just CSS, it would appear as:
app-text-editor.floating ~ .mat-form-field-label-wrapper > .mat-form-field-label {
margin-top: initial;
padding: initial;
}
app-text-editor ~ .mat-form-field-label-wrapper > .mat-form-field-label {
margin-top: 2.5rem;
padding: .5em; /* Used to properly align the content inside my contenteditable */
}
Surprisingly, despite the somewhat unconventional method I used for repositioning, the animation transition still appears smooth.
If you are willing to dive into advanced CSS selectors (Can I Use: Advanced CSS3 selectors), the solution can be made even more concise:
SCSS:
app-text-editor {
// Styling for the actual TextEditor
&:not(.floating) ~ .mat-form-field-label-wrapper > .mat-form-field-label {
margin-top: 2.5rem;
padding: .5em; // Used to properly align the content inside my contenteditable
}
Pure CSS:
app-text-editor:not(.floating) ~ .mat-form-field-label-wrapper > .mat-form-field-label {
margin-top: 2.5rem;
padding: .5em; /* Used to properly align the content inside my contenteditable */
}
In my code, I am retrieving an image from a specific source: <img src={event.eventData?.foto_portada} /> The issue arises when I attempt to utilize that image within my CSS properties as shown below: .background-image { background-image: url(); ...
I'm struggling with retrieving an array from within an object. The structure is shown below: [] 0: Array(4) 0: 0 1: 5 2: 500 3: (5) [{…}, {…}, {…}, {…}, {…}] Despite attempting methods like using object.keys, for loop ...
Currently, I am enhancing my portfolio and looking to apply a PNG mask on some images. While the webkit image mask works well, I am interested in achieving similar results on Firefox and Opera as well. Is there a JavaScript solution that can help me achiev ...
Having trouble with the number field in Firefox and Safari browsers (and possibly Opera, although I haven't tested it there). When entering an initial value in the number field that contains leading zeros, Firefox and Safari automatically remove them. ...
I'm facing an issue with my menu links on a webpage where they are not directing to the intended header sections but instead jumping to the end of the sections, creating confusion for users. I have attempted a couple of solutions; here is the first at ...
Conditionally declaring Services using Angular2's dependency injection mechanism is a powerful feature. An example from thoughtram's website demonstrates this: { provide: Engine, useFactory: () => { if (IS_V8) { return new V8Engi ...
I'm currently working on an HTML document with dynamic content that needs to adjust its styling based on data from Google Sheets. I've successfully loaded the JSON data, but I'm struggling to figure out how to dynamically change the CSS. Can ...
I'm attempting to replicate the content below inside a DIV. <ul class="pie-legend"><li><span style="background-color:#0066CC"></span>10-0-1</li><li><span style="background-color:#33CC33&q ...
My code has a few issues that I am looking to fix: One problem is the sudden color change that occurs when the submit button is clicked. It seems like a glitchy animation, and I want to remove it. Right after clicking the submit button, there is an abru ...
My interface contains a <div id=content> element with a large number of elements. When the list extends beyond the height of the screen, a scrollbar should appear within the list. The element is set to fill the remaining height space in the right col ...
I have encountered a challenge with posting data from button clicks on an HTML page to Python CGI for insertion into a PostgreSQL database. My script seems to be struggling with this task. Here is the structure of my HTML, ajax, and javascript: '&ap ...
I'm having an issue with my code where the 'name' variable is POSTed but the 'project' variable is not when submitting through an 'onchange' event. I need both variables to go to session variables on submit. Can anyone sp ...
I've designed a unique form using a textarea to display messages from users, rather than the traditional ul list. Additionally, I have included an input form where users can type their messages. My goal is to make this input form visible on the textar ...
I used JQuery to dynamically generate a table, but I'm having trouble applying CSS to the columns. You can see an example at this Codepen link here. Specifically, I need to set the width of the first column to 100px. Could someone please assist me wi ...
Is it possible to pass the i+1 data when clicking on the i-th anchor in Angular 2 using ngFor? Could someone please assist me with this? <ul> <li *ngFor="let menu of _menus; let k=index" > <a (click)="GoToSectionPag ...
Having a strange issue with videojs. I've been attempting to load videojs in the same way as outlined in the documentation, using a dynamic video tag. videojs(document.getElementById('myVideo'), { "controls": true, "autoplay": false, "prelo ...
After a successful login, I have a div that displays a success message and then hides after 4 seconds using the following JavaScript code: document.getElementById('success').style.display = 'none'; }, 4000); While this functionality wo ...
I am struggling with my ajax response as it seems to evaluate only some of the html, but not all of it. For instance, I have this code that replaces a div with the response from the request: eval(document.getElementById("test").innerHTML-xmlhttp.response ...
I've encountered a puzzling situation with the function in my component : public limit: number = 3 public logLimit(limit) { console.log(limit) } and in my template : <div (click)="logLimit(--limit)">Decrease and log limit</div> Stra ...
In the scenario where there is an HTML element with multiple siblings: <div id=parent> <div></div> <div></div> <div></div> ... <div id=fourthToLast></div> ...