Display a pair of distinct items side by side on a webpage

When needing to display information in the format below:

Reason :  reason number 1
          reason number 2
          reason number 3

Code :    code number
Remarks : remark

In this scenario, Reason, Code, and Remarks serve as headings enclosed in <strong> tags, while the values - reason number 1, reason number 2, code number, and remark - are displayed as content.

If an attempt is made to use a <p> tag for the heading, the value automatically moves to a new line. The question arises of how to display them as key-value pairs on a single line without utilizing float, which would be preferable in this case.

htmlcssangular

Answer №1

Take a look at this method:

Live Demonstration

.html

<table border="1">
    <ng-container *ngFor="let item of list1; let i = index">
        <tr>
            <td> {{list1[i]}}</td>
            <td *ngIf="list2[i].length > 1">
                <li *ngFor="let li of list2[i]">
                    {{li}}
                </li>
            </td>
            <td *ngIf="list2[i].length <= 1">
                {{list2[i]}}
            </td>
        </tr>
    </ng-container>
</table>

.ts

  list1 = ["Steps to Follow", "Code Explanation"];
  list2 = [["Step 1", "Step 2"], ["The reason code is explained here"]];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strategies for preventing focus from shifting to tabbable elements within a chat component that has been minimized

There is a chat feature in my website that appears in a sidebar when the chat icon on the site header is clicked. To improve accessibility, I added tabindex = 0 to key elements such as the minimize and close icons on the chat container, as well as all th ...

angularaccessibilitychatbot

Angular 8 dropdown menu that closes when clicking outside of it

Hello, I am currently using the click function on the p tag. When a user opens the dropdown menu, I want to close it when they click outside of it in Angular. Here is the HTML code: <div class="select_cat"> <p class="cat_name" (click)="openC ...

htmlangular

What is the reason tailwind does not take precedence over locally defined styles?

I've been experimenting with changing the default text color using Tailwind CSS, but for some reason, it's not taking effect. I've noticed that Bootstrap is able to override the default style without any issues. I'm fairly new to Tailw ...

javascriptcssvue.jswebpacktailwind-css

Modify the view to display the router outlet as a sidebar

Hello, I am trying to figure out why I am unable to access a child route in my application. I have a sidebar where I want to display a list, and if I want to add or edit an item, I would like the view to change within the sidebar from the list to a form a ...

angularsyncfusion

Hiding my valuable content with a sneaky CSS nav bar

My current issue involves the nav bar overlaying my content Here is a link to the problem for reference I am seeking advice on how to resolve this issue, as I'm unsure of what steps to take The nav bar functions properly in responsive/mobile mode, ...

htmlcsscss-float

Insert content into a designated DIV

Progress bars are essential for tracking certain metrics. Take a look at the progress bars below: <div id="lifeBar-holder"> <div id="lifeBar"></div> </div> <div id="discretionBar-holder"> <div id="discretionBar"&g ...

htmlcss

I'm having trouble getting the pasted HTML to work properly

I have been having some trouble with pasting an HTML table into my WordPress site using the Text Editor. I have styled the table with CSS and I have verified that both codes are correct. However, when I paste the table into WordPress or even use the W3Sch ...

htmlwordpress

Alter the status of a checkbox programmatically

There are two checkboxes available: <input type="checkbox" id="id3"></input> <input type="checkbox" id="id4"></input> The desired functionality is that when clicking on id3, id4 should also be checked. Initially, this works as e ...

javascriptjqueryhtml

Primeng color selection panel not displaying fully

I am having an issue with the primeng colorpicker. When I click on the colorpicker, the panel that comes up is cut off like this: https://i.sstatic.net/t7Z5V.png How can I make the panel pop out instead of being cut off? I tried using appendTo=body but i ...

angularprimengcolor-picker

Guide on altering a Tailwind Class depending on the React State or Props

Currently, I am working on a Progress Bar Component and utilizing the following versions: "next": "13.4.4", "react": "18.2.0", "react-dom": "18.2.0", "classnames": "^2.3.2", I ...

cssreactjsnext.jstailwind-cssclass-names

What could be causing my dangerouslySetInnerHTML to show altered content?

I am working on a project using React and have encountered an issue with the code: const externalMarkup = ` <a data-refpt='DN_0OKF_177480_ID0EMPAC' /> <ol> <li value='1'> <p> <strong&g ...

javascripthtmlreactjs

Tips for ending a page prematurely

I am currently facing an issue with hosting images on my webpage where the bottom of the images are uneven, creating a messy look at the bottom of the page. https://i.sstatic.net/N3XvJ.png Normally I would attempt to align them in a perfect square layout ...

htmlcssimage

What is the best way to collapse a button in asp.net using javascript after setting it to hidden?

I have a scenario where I have 3 buttons in a row on my asp.net page. Using JavaScript, I am setting the middle button (ButtonSR) to invisible. However, I want the button below it to move up and take its place instead of leaving an empty space. ...

javascripthtmlasp.net

Setting the maximum width for images across various Bootstrap responsive sizes: a step-by-step guide

I'm struggling with optimizing images of varying sizes in bootstrap to ensure they are responsive without losing quality. Current Image: https://i.sstatic.net/akoNy.jpg Desired Image: https://i.sstatic.net/37VFX.jpg HTML: <div class="row"> ...

htmlcssbootstrap-4

What is the best way to create a transparent sticky header that blends with the background while still maintaining visibility over images and text?

On my web page, the background features a radial gradient but the content extends beyond the viewport, causing the center of the gradient to not align with the center of the screen, producing the desired effect. However, I'm facing an issue with a sti ...

javascripthtmlcsssticky

Problem with the purity of :global() CSS-module selectors in NextJS

Currently in the process of migrating an app from CRA to NextJS, I've encountered an issue with the .module.scss files of certain components and pages: Syntax error: Selector ":global(.label-primary)" is not pure (pure selectors must contain ...

cssreactjssassnext.jscss-modules

Guide on adding HTML to a specific div element in jQuery by utilizing the keyword "(this)"

I have been working on a script for my PHP page in Wordpress to add titles to images in my photo gallery that open in a lightbox. Here's what I developed: $(".responsive1").bind("click", function() { $(this).("<div class='imgTitle ...

javascriptjqueryhtmlappendto

issues with redirection of form validation

I am currently working on a Django project where users can add comments to posts. The information is saved directly in the database, which is functioning properly. However, I am facing an issue where after submitting the comment, the form keeps resubmittin ...

pythonhtmldjangobootstrap-4

glyph containing an undesirable space filled in

I have a character that I want to draw. The outline is correct but the filling isn't showing up as expected. Take a look at the comparison below (1. is what I want, 2. is what I currently have): c.beginPath(); //draw the curves c.closePath(); c.fi ...

javascripthtmlcanvasfontsfill

Content Management System editing plan

Have you ever wondered if there is a structured approach to editing content management systems like Wordpress and Joomla? When it comes to editing aspects such as CSS and JavaScript, what steps do you usually take? Personally, I have been creating files l ...

javascriptcsscontent-management-systemfrontendoverwrite