locked
How to format HTML label and value for several rows RRS feed

  • Question

  • User956626884 posted

    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  fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="1em">
    <label><strong>Added By:</strong></label><label>John Smith</label>
    </div>
    <div  fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="1em">
    <label><strong>Added Date</strong></label><label>{{ getAddDate() | date: 'MM/dd/yyyy'}}</label>
    </div>  
    <div  fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="1em">
    <label><strong>Updated By:</strong></label> <label>Steven Jones</label>
    </div>
    <div   fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="1em">
    <label><strong>Updated Date:</strong></label> <label>{{ getUpdatedDate() | date: 'MM/dd/yyyy' }}</label>
    </div>
    Friday, February 1, 2019 7:04 PM

Answers

  • User-893317190 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 4, 2019 6:38 AM

All replies

  • User-2054057000 posted

    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.

    Sunday, February 3, 2019 3:50 PM
  • User-893317190 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 4, 2019 6:38 AM
  • User956626884 posted

    Thanks. The flex css is working.

    Monday, February 4, 2019 2:03 PM