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.
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.
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>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.
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.
The result.
You could also use css flex, flex is a relatively new css style.
For more information about flex , you could refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Best regards,
Ackerly Xu
Please remember to "Mark as Answer" the responses that resolved your issue.
Member
39 Points
254 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.