CODEWITHSUNDEEP
javascripthtmlcss
Harry
Harry

Reputation: 782

Left side of JavaScript-added div getting cut off

I am dynamically adding a "Side Navigation Bar" in a fixed position on my page. It adds fine, no errors or warning. The problem is, the left side of each "Circle" in my nav bar seems to be cut off. It is very subtle but I don't want to let it go and would like to know why it is happening. Here is what I mean:

nav

As you can see, it is very subtle and "small" but why is it happening?

JSFiddle to demonstrate: http://jsfiddle.net/nymovqt5/5/

Here is the JS to add the Nav Bar:

//initialize side nav bar
jQuery(document).ready(function() {
  var SideBar = document.createElement("Div");
  SideBar.setAttribute("id", "SideBarNav");

  var Circle1 = document.createElement("Div");
  Circle1.setAttribute("id", "Circle1");

  var Circle2 = document.createElement("Div");
  Circle2.setAttribute("id", "Circle2");

  var Circle3 = document.createElement("Div");
  Circle3.setAttribute("id", "Circle3");

  var Circle4 = document.createElement("Div");
  Circle4.setAttribute("id", "Circle4");

  var Circle5 = document.createElement("Div");
  Circle5.setAttribute("id", "Circle5");

  var Circle6 = document.createElement("Div");
  Circle6.setAttribute("id", "Circle6");

  SideBar.appendChild(Circle1);
  SideBar.appendChild(Circle2);
  SideBar.appendChild(Circle3);
  SideBar.appendChild(Circle4);
  SideBar.appendChild(Circle5);
  SideBar.appendChild(Circle6);
  document.body.appendChild(SideBar);

});

and I am styling like this:

#Circle1:hover, #Circle2:hover, #Circle3:hover, #Circle4:hover, #Circle5:hover, #Circle6:hover{
 cursor: pointer;
}
#Circle1 {
    border-radius: 50px/50px;;
    height: 15px;
    width: 15px;
    margin: 0 auto;
    background: blue;
    opacity: 0.7;
    margin: 10px;
 opacity: .7;
}

#Circle2, #Circle3, #Circle4, #Circle5, #Circle6 {
    border-radius: 50px/50px;;
    height: 15px;
    width: 15px;
    margin: 0 auto;
    background: blue;
    opacity: 0.7;
    margin: 10px;
 opacity: .7;
}
#SideBarNav {
 display: inline-block;
 color: white;
 position: fixed;
 top: 50%;
 right: 0;
 transform: translate(-50%, -50%);
 text-align: center;
 border: 2px solid rgba(0, 0, 255, 0.5);
}

Upvotes: 0

Views: 116

Answers (2)

Vis
Vis

Reputation: 51

Remove Transform property from #sideBarNav . You can use some other style to position it. Transform property general create a border as far as i know.

Upvotes: 0

Taryn East
Taryn East

Reputation: 27747

You're making a fake circle by drawing a blue square inside a box with a white margin around it... and using a white border with curved corners overlaid over the corners of the blue square to make the blue bit seem circular. ie the white borders have to be just the right size to cover the blue corners the right way.

The issue is that the total width of the square-plus-margins is an odd number of pixels (35px) which means that the left-hand side might apply slightly differently (ie one pixel over) from what is applied to the right-hand side which means one less pixel of coverage and thus one more pixel of white-margin showing.

Changing the width to 16px means each side of the square is even and you can be sure it'll cover each side the same.

Upvotes: 1

Related Questions