style border and width issue

Question

I have the following div style

.myDivStyle{
    width: 0px;
    position: absolute;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
}

which is applied to my div

<div id="myDiv" class="myDivStyle">...</div>

which looks perfect, and the following script returns 0px, again perfect.

alert($("#myDiv").css("width"));

But if I add a border to that style such as :

border: 1px solid #cccccc;

then there is a small 2px wide bod on the screen, and the js code above return a width of 2px.

How can I get the bordered div to not be visible on the screen and return a 0px width? The show/hide of the div is controlled by javascript. I know I can use display:none; and turn it on again with the javascript but I want to see if it can be done by adjusting the style?

alert($("#myDiv").css("width"));

.myDivStyle {
  width: 0px;
  position: absolute;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="myDiv" class="myDivStyle">...</div>

Try this: change your border to `outline: 1px solid #cccccc` — Jeremy, Apr 05 '18 at 06:50
Try to set on your css: border: 1px solid transparent, and then with your other changes in js - change it to something else. — A. Meshu, Apr 05 '18 at 07:03

score 1 · Answer 1 · answered Apr 05 '18 at 06:56

1

You can use:

Box-sizing: border-box;

So that your width of your css width also controls your border.

For the Javascript try using: $(id).innerWidth(); or $(id).outerWidth(); and see what fits your expectations.

answered Apr 05 '18 at 06:56

Riccardo

32
4

That still leaves a 2px wide line on the screen. – DeclanMcD Apr 05 '18 at 07:12

score 0 · Answer 2 · answered Apr 05 '18 at 06:51

You can use outline style. Read here for different between outline and border From: https://www.tutorialrepublic.com/css-tutorial/css-outline.php

Outlines do not take up space, because they always placed on top of the box of the element which may cause them to overlap other elements on the page.

Unlike borders, outlines won't allow us to set each edge to a different width, or set different colors and styles for each edge. An outline is the same on all sides.

Outlines don't have any impact on surrounding elements apart from overlapping.

Unlike borders, outlines don't change the size or position of the element.

Outlines may be non-rectangular.

style border and width issue

2 Answers2