How to format HTML label and value for several rows[Answered] RSS

• • Reply
  comicrage

  Member

  48 Points

  295 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

  Participant

  1283 Points

  956 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.
  ♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠
• • Reply
  Ackerly Xu

  Contributor

  3500 Points

  1300 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 click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  comicrage

  Member

  48 Points

  295 Posts

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

  Feb 04, 2019 02:03 PM|comicrage|LINK

  Thanks. The flex css is working.