HTML Element with Display:none defaulting width

Question

In my CSS, I have set a div to display:none, for when the page originally loads, and width set to 100%. However, on the page load, I also have a slickgrid getting generated, using that container. When I then set the div to display:block via jquery, I see that the slickgrid is not a width of 100%, but defaulting to 100px - when stepping through the slick grid code, I am seeing the following code returning 100, for my container which is set to display:none

$.css($container[0], "width", true)

Is there any way to get around what seems to be a default width for an element with display:none? I have tried setting the width in the same CSS block, with no luck.

 .data-grid{
        height: 350px;
        display: none;
        width: 100%;
}

TIA

can you create a jsfiddle? any why width true? normally there is no default width and I don't know where you got that width = true from — gulty
This is odd, I have a site that uses display: none; width: 100%; and it works perfect. Are you sure you dont have any conflicting CSS or any misspellings? I know it sounds basic but those are things I find myself missing. — PugsOverDrugs
display:none should not affect the width. You have something wrong elsewhere. — King King
Unfortunately, can't create a jsFiddle, as I have restricted access at work. To clarify, after I set 'display:block', the width is at 100% - it's only before then that accessing the width returns 100, instead of 100%. — user2699970
When I remove the display:none from the CSS completely, my slickgrid is displaying correctly (with the width I expect), which is what leads me to believe that it's the display:none that's causing the issue — user2699970

user2699970 user2699970 · Accepted Answer · 2014-06-11T16:38:03

Figured it out - apparently you cannot use percentage with display:none - changed it to a fixed pixel width, and it's working now

HTML Element with Display:none defaulting width

2 Answers