Custom widget help with HTML

[Franchesca Liz1]

hi all,

I am trying to make a widget that I cloned from the HRI employment information widget. I need the widget to look like this. All this information are pulled from the HR Profile table [Overall background clearance, Opened date, Closed date, Drug test status are all custom fields]

Right now this is what I have, but I need to make it like the screenshot above. The name of the field should be on left side and the value of the field should be on the right side. I know I need to edit the HTML but I been having no luck figuring this out.

Here is the code that is on the HTML, Client and Server Script. This is pretty much the code on the HR Employment Information widget. I have changed line 5 on the client script to the 4 custom fields only. Overall background clearance, Opened date, Closed date, Drug test status

 

 

 

[Claude DAmico]

Did you copy the CSS as well from the original widget? It looks like a lot of the formatting missing is related to that not being set so start with that.

[Franchesca Liz1]

there is nothing on the CSS 

[Claude DAmico]

This is absolutely a trial on my part. I don't have that widget in the instance I have access to for testing, but here is a potential CSS you can try.

sp-editable-field:first-child > span {
	font-weight: bolder;
}

sp-editable-field:first-child > span {
	font-weight: bolder;
	color: #2c7521;
}

sp-editable-field > :first-child {
	float: left;
}

sp-editable-field > :last-child {
	float: right;
}

sp-editable-field > span {
	font-weight: bold;
}

sp-editable-field {
	border-bottom: 1px solid black;
}

p {
	border-bottom: 1px solid black;
}

[Franchesca Liz1]

I have tried it and it didnt really change the look