As I'm modifying my current div, I need to add a vertical line in the center of it. I've come across various solutions where a left border is added and then shifted using the left property by 50% (which effectively places it in the middle).
Here's how I'm structuring my div:
if (id == "Metricbar" ) {
var Parentdiv = document.getElementById("homeContainer");
var rowDiv = document.createElement("article");
rowDiv.setAttribute("class", "col-sm-12 col-md-12 col-lg-12");
rowDiv.style.border = "1px solid #ddd";
rowDiv.style.marginBottom = "1px";
rowDiv.style.marginTop = "1px";
rowDiv.style.borderLeft = "2px solid #ddd";
Parentdiv.appendChild(rowDiv);
var ctrlDiv = document.createElement("div");
ctrlDiv.setAttribute("data-widget-editbutton", "false");
ctrlDiv.className = "jarviswidget";
ctrlDiv.setAttribute("data-widget-fullscreenbutton", "false");
ctrlDiv.id = id;
var temp = $compile(ctrlDiv)($scope);
angular.element(rowDiv).append(temp);
rowDiv.appendChild(ctrlDiv);
}
The question arises on how to centrally position this line. Is there a method to achieve that?
I have attempted the following:
rowDiv.style.borderLeft.marginLeft = "50%";
rowDiv.style.borderLeft.Left = "50%";
rowDiv.style.borderLeft.leftMargin = "50%";
Unfortunately, none of these approaches seem to be effective. Can anyone provide guidance in the right direction?
HTML File :
<section id="widget-grid" class="" style="padding-left:13px;padding-right:13px;">
<div class="row" id="homeContainer"></div>
<div class="modaldialogs" style="display: none">
<div class="center">
<img alt="" src="img/ajax-loader.gif" />
</div>
</div>
</section>
It's worth mentioning that I utilize this div multiple times based on its id.
The desired outcome is to have a black line displayed as depicted in this image https://i.sstatic.net/gitej.png