nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Hiding crosstab through javascript

Arif shah

Hi, 
I want to hide a crosstab by clicking on a button. I have created a text element and inside it, I am calling a javascript to set the display property of both row and crosstab to none. The row is a fixed height and I have set the overflow property of the cell to scroll so that the crosstab does not go to the next page 
Below is what the crosstab looks like originally
 
<img src="http://i.stack.imgur.com/32DBC.jpg" alt="32DBC.jpg">
 
The problem is that when I set the display:none for both row and crosstab, I can still see empty iframe with scrollbar as below. 

<pre class="_prettyXprint">
 document.getElementById("crtGridRow").style.display = "none";
 document.getElementById("crosstab").style.display = "none";</pre>
 
This only happens in Internet Explorer. In FF and other browsers, It hides fine <img src="http://i.stack.imgur.com/5vz7H.jpg" alt="5vz7H.jpg"> 

 
 
Now here is the second Issue. When through another button, I turn the Display to block 

<pre class="_prettyXprint">
document.getElementById("crtGridRow").style.display = "block";
 document.getElementById("crosstab").style.display = "block";</pre>

In Internet Explorer, the Crosstab and its data shows fine but in FF and other browsers, the crosstab does not show up. Instead I can see an empty space that seems to be the space for the crosstab but I only see a white space with no crosstab or its data <img src="http://i.stack.imgur.com/vlUed.jpg" alt="vlUed.jpg"> 
Can someone please help me fix this issue 
Arif

Find more posts tagged with

Comments

Arif shah

HI,
 
I hide a gridrow which has a cell overflow set to scroll by using the following javascript in Text Item
<pre class="_prettyXprint">
document.getElementById(bookmark).style.display = "none";</pre>
When I again show the gridrow by using a javascript
<pre class="_prettyXprint">
document.getElementById(bookmark).style.display = "block";</pre>
Anything that is inside the row won't show up whether a crosstab, chart or anything
 
If I set the overflow property of the cell back to auto, then the objects show up inside the cell. However, with overflow of cell set to scroll, If I hide the row and then show again, those charts won't show up.
 
I need the cell's overflow set to scroll as its a crosstab and has a lot of content and I do not want it to go to the next page. I want it to be scrollable within a certain row height
 
Can someone please help how to fix this
 
Arif

kclark

What version of IE are you outputting to. I can only recreate part of your issue in IE 11. I can hide a div, but can't show it again using the following
<pre class="_prettyXprint _lang-">
<script>
function showhide() {
var xtab = document.getElementById('xtab');
var xtabgrid = document.getElementById('xtabgrid');

if(xtab.offsetLeft > 0) {
xtab.style.display = 'none';
xtabgrid.style.display = 'none';
}else{
xtab.style.display = 'block';
xtabgrid.style.display = 'block';
}
}
</script>

<button type="button" onClick="showhide();">Show/Hide</button>
</pre>

Arif shah

The div is hiding alright for me too. I am also facing an issue of showing the object/charts again after the div has been hidden. Could you find any solution for this?
 
Arif

kclark

I'm unsure why the div isn't showing. I've created several show/hide examples using divs before. I'll have to dive into this a little more and let you know what I find. Can you file a bug for this?