Is there a way to align items in a row or column based on conditions within an *ngFor loop?
I want the input type to display on the next line if it is textarea, and on the same line otherwise.
Check out this Stackblitz Demo for dynamically generated HTML input from JSON data.
If you are looking to achieve a specific layout, simply include an additional class within the div being looped through using *ngFor, like so:
<div
*ngFor="let item of itemsArray"
[ngClass]="{ 'custom-class': item.type !== 'description' }"
>
You can then utilize this class to style the element with an inline-block display property to prevent it from wrapping to the next line, such as:
.custom-class {
display: inline-block;
width: 50%;
}
(Additionally, specifying a width may be necessary based on your design requirements)
Here is how it will appear:
https://i.stack.imgur.com/k3aoY.png
To see this in action, check out the modified version of your stackblitz demo here: https://stackblitz.com/edit/typeinformationdynamic-i24na7?file=app/dynamic-form.component.ts
I am currently working on making my WordPress website responsive. On one of the pages, I have two images that I want to set a max-width of 100% to ensure they are responsive. However, when I shrink the page in Chrome dev tools, I noticed that the <html& ...
I have a code that is functioning perfectly. However, I need to make a modification so that there is a default panel open when the page loads or refreshes. #acc-label { display: block; float: left; height: 330px; width: 50px; margin-bottom: 10px ...
My current design uses clip-path for a gradient effect at the top of the page. Ideally, I want the two angles to meet seamlessly without any visual issues. I initially positioned the top so that they touch perfectly and nothing interferes with the angled ...
Has anyone successfully implemented a function in react.js to change the image source based on the direction of an arrow click? For instance, I have an array set up where clicking the right arrow should move to the next image and clicking the left arrow s ...
Hey there! I'm currently working with the Speed dial component for MUI and I'm having trouble figuring out how to style the tooltipTytle. I can only seem to style them when they are all displayed at once, but that's not what I want. I ...
An imperfect DIV with text that requires a scroll bar For example: <div id="text" style='overflow:scroll;width:200px;height:200px'> <div style='font-size:64px;'>BIG TEXT</div> Lorem Ipsum is simply dummy text of th ...
My experience with Prismic as a headless CMS has been mostly positive, but I recently encountered an issue that surprised me - the lack of support for a simple blockquote. It's baffling to me that such a basic HTML element is not natively supported by ...
Despite searching through the console, I am unable to find a solution to this issue. There are two images in play here - one is supposed to appear at specific coordinates while the other should follow the mouse cursor. However, the image intended to track ...
Is there a way to ensure css isolation works properly when passing a class as an argument to a child component? In the following code snippet, I anticipated the child component would display in blue, but that's not happening. Parent.razor <div cla ...
Currently, I am in the process of building a website on my laptop while following an instructor's video tutorial. It has been important for me to set the same pixel measurements as the instructor in order to replicate the design they provided. However ...
My donate page has a header with a generic placeholder image. On mobile devices like iPhones and Androids, the page initially looks great. However, when I scroll down and then back up, the header disappears for a moment before reappearing as originally ren ...
I am attempting to rotate a face of a cube twice in order to have that face fall flat on one side. For reference, please see the illustration of my goal here: https://i.stack.imgur.com/kwO8Z.png I have included my current progress below, using a 45-deg ...
My objective is to incorporate 3 input options for selecting the color, size, and amount of cubes. The image below showcases my peer's final project, but unfortunately, he refused to share the code with me. We were given a basic template to begin with ...
Just starting out with web development, and I have a div element with the following attributes: <div class="" id=":1" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" aria-labelledby=":1.label" aria-setsize="10" aria-posinset= ...
I'm working on aligning 2 input fields side by side within the same line. To achieve this, I've been utilizing Flexbox. However, I've observed that when using Flex with both 'row' and 'column', it introduces extra spacing ...
I created a script to generate an HTML file containing information about the services on a computer, along with some additional styling. $a = "<style>" $a = $a + "BODY{background-color:peachpuff;}" $a = $a + "TABLE{border-width: 1px;border-style: so ...
Here is the situation: I have an SVG with dimensions of 1920*1920 pixels () This is what I require: I intend to use it as a background-image for a div that spans the full width of the screen. The background image for the div must be responsive. An essent ...
I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes. Currently, I've been using fixed margin values to adjust the position, ...
As someone who is new to Ruby on Rails, I am currently facing a challenge. I want to extract data from specific fields in my database and utilize them for styling purposes. For instance, within my 'Student' database, there are height and width f ...
Is it possible to design a webpage using purely valid HTML and CSS that can dynamically adjust its size based on the browser window, while ensuring none of the content is lost or cut off? Please refer to the linked image for a visual representation of what ...