How to format HTML label and value for several rows

Reply

comicrage

Member

39 Points

254 Posts

How to format HTML label and value for several rows

Feb 01, 2019 07:04 PM|comicrage|LINK

HI,

I have an Angular dialog which display Label and the string value next for several lines. After populating the four lines, the Labels are vertically aligned but not the string values.

The web page section will looks something like

Added By: John Smith

Added Date: 02/01/2019

Updated By: Steven Jones

Updated By: 02/01/2019

it would be great if it would look like this:

Added By: John Smith

Added Date: 02/01/2019

Updated By: Steven Jones

Updated By: 02/01/2019

I tried css with left margin but that was the wrong approach. Any suggestions would be great. Thanks.

Here is my code which I am using div tag.

<div> <div> <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="1em"></div> <div> <label><strong>Added By:</strong></label><label>John Smith</label> </div> <div> </div></div> <div> <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="1em"></div> <div> <label><strong>Added Date</strong></label><label>{{ getAddDate() | date: 'MM/dd/yyyy'}}</label> </div> <div> </div> </div> <div> <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="1em"></div> <div> <label><strong>Updated By:</strong></label> <label>Steven Jones</label> </div> <div> </div></div> <div> <div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="1em"></div> <div> <label><strong>Updated Date:</strong></label> <label>{{ getUpdatedDate() | date: 'MM/dd/yyyy' }}</label> </div> <div> </div></div> <div></div> </div>

Reply

yogyogi

Member

530 Points

355 Posts

Re: How to format HTML label and value for several rows

Feb 03, 2019 03:50 PM|yogyogi|LINK

In your scenario CSS will do your job. All you have to use the "DEVELOPERS TOOLS" of the browser. Right click on the browser window and select "Inspect" and start inspecting the CSS applied on each element.

Then add your own css or modify the existing one and check the changes.

Regards.

Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.

Reply

Ackerly Xu

Contributor

2320 Points

911 Posts

Re: How to format HTML label and value for several rows

Feb 04, 2019 06:38 AM|Ackerly Xu|LINK

Hi comicrage,

You could use css style float:left .Below is my code.

  <div style="height:20px">
        <div style="float:left;width:10%;height:20px">
            <label><strong>Added By:</strong></label>
        </div>
        <div style="float:left;width:10%;height:20px">
            <label>John Smith</label>
        </div>

    </div>



    <div style="height:20px">
        <div style="float:left;width:10%;height:20px">
            <label><strong>Added Date</strong></label>
        </div>
        <div style="float:left;width:10%;height:20px">
            <label>1927/10/8</label>
        </div>

    </div>



    <div style="height:20px">
        <div style="float:left;width:10%;height:20px">
            <label><strong>Updated By:</strong></label>
        </div>
        <div style="float:left;width:10%;height:20px">
            <label>Steven Jones</label>
        </div>

    </div>


    <div style="height:20px">
        <div style="float:left;width:10%;height:20px">
            <label><strong>Updated Date:</strong></label>
        </div>
        <div style="float:left;width:10%;height:20px">
            <label>1994/09/08</label>
        </div>

    </div>

The result.

You could also use css flex, flex is a relatively new css style.

  <div style="display:flex;flex-direction:column">
        <div style="display:flex">
           
                <label style="width:10%"><strong>Added By:</strong></label>
            
           
                <label style="width:10%">John Smith</label>
            
        </div>

        <div style="display:flex">
          
                <label style="width:10%"><strong>Added Date:</strong></label>
           
                <label style="width:10%">1994/09/08</label>
           
        </div>

        <div style="display:flex;">
            
                <label style="width:10%"><strong>Updated By: </strong></label>
            
           
                <label style="width:10%">Steven Jones</label>
            
        </div>
        <div style="display:flex;">
            <label style="width:10%"><strong>Updated Date:</strong></label>


            <label style="width:10%">1994/09/08</label>
        </div>

    </div>

For more information about flex , you could refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Best regards,

Ackerly Xu

MSDN Community Support
Please remember to "Mark as Answer" the responses that resolved your issue.