How do you fix a broken dashboard layout (does not display as indicated)

[ryanhill]

What do you do when ServiceNow won't display your dashboards correctly? I had a nice, pretty 2-column dashboard with a header and a footer. On the left were reports, on the right were reports, and all was well. But one day when experimenting with other layouts, when I tried to go back to the 2 equal-width columns layout, it wouldn't go. And now none of them appear right.

It should look like this:

Instead it looks like this:

It's a super-wide left column, then a narrow right column. As of THIS MORNING without making any changes since yesterday, the top header section also now expands past the width of the entire page. Why would it behave this way? What can I do to fix it?

My browser is set to 100% zoom magnification, so it isn't that (in case you're thinking of this). It appears this way in Chrome and Edge browsers.

In IE it appears this way, slightly different:

Notice the header content is zoomed way in. Same element.

[palmen]

Have you done something to the layout (Homepage admin -> Layout)?

The OOTB code for this layout look like this

<?xml version="1.0" encoding="utf-8"?>
<j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
	<table border="0" cellspacing="6" id="${jvar_name}" role="presentation" width="100%">
		<tr>
			<td colspan="2" id="dropzone0" dropzone="true"/>
		</tr>
		<tr>
			<td id="dropzone1" dropzone="true" valign="top" width="50%"/>
			<td id="dropzone2" dropzone="true" valign="top" width="50%"/>
		</tr>
		<tr>
			<td colspan="2" id="dropzone999" dropzone="true" valign="top"/>
		</tr>
	</table>
</j:jelly>

[ryanhill]

Palmen -- no, I have not done anything with the layout, or any of the layouts.

I actually don't have access to admin or code in our system, so I don't know that I'd be able to check and verify this code either.

[palmen]

OK, what happens if you create a new page from scratch and select the layout and add the reports/gadgets/gauges to it? Does it still show in a strange way?

[ryanhill]

Actually looking at that code:

			<td id="dropzone1" dropzone="true" valign="top" width="50%"/>
			<td id="dropzone2" dropzone="true" valign="top" width="50%"/>

It looks pretty simple and straightforward.

I checked the source on the dashboard page and found

<table border="0" cellspacing="6" width="100%" id="homepage_grid"><tr><td colspan="2" dropzone="true" id="dropzone0"></td></tr><tr><td width="50%" dropzone="true" valign="top" id="dropzone1"></td><td width="50%" dropzone="true" valign="top" id="dropzone2"></td></tr><tr><td colspan="2" dropzone="true" valign="top" id="dropzone999"></td></tr></table>

So... it looks accurate. 50%/50%.