Remove or reduce padding between Sections on datapage

[DesiLogi]

Is there a way to reduce or remove the padding between sections in a datapage (Details datapage)? I looked into Styles but couldn't find anything for Sections. 

I have to use a Section to show/hide (using Rules) a button (that's in an html block in the Section) at the top of the datapage (there's a lot of fields in a complicated table layout and I can't show/hide a section within that table because when hidden the entire table/datapage disappears- so I put a section at the very top, above the table's beginning). 

Problem is there's a lot of whitespace between the top Section and the next Section where the table starts. Like 150 px of whitespace. I can't figure out how to adjust it and I really need to remove that whitespace because there's a lot of data to show and it gets pushed down too far. Any help would be appreciated. 

 

[MayMusic]

It is better if you hide the section using JS

Around that section add HTML Block one on top and have : <div id="section1">

Below it add another HTML Block : </div>

Use a code in following format to hide the div in last HTML Block after closing div

<script>
  
  if (CONDITION){
  document.getElementById('section1').style.display:none;
  }
else {
document.getElementById('section1').style.display:block;
}
</script>

 

 

[DesiLogi]

Thanks for the tip on that- I'll give that a shot. That said- for the (Condition) I have a regular field called 'PortalID'. The rule I'm using is 'If PortalID IsBlank Hide Section1 and If PortalID is Not Blank Hide Section2. How would I put that in the Condition? 

Your solution brings up a good point also. I originally wanted to just show/hide an html block (with a button in it) based on the if PortalID is blank/not blank but I didn't know how/if this could be done- so I used Sections and the Rules.

Is it possible using your method above to:

 if 'PortalID' is blank hide html block 1 (or button in it) and show html block 2 (or button in it)

or if PortalID is not blank then show html block 1 (or button in it) and hide html block 2 (or button in it) 

Doing that instead of using Sections, it'd be  cleaner datapage.

The ultimate goal is to show 1 of 2 buttons based on whether 'PortalID' is blank or not blank. I don't know if this should all just be done in a single html block (which would be cleanest from a layout pov) or the above. Thanks very much for helping on this- 

[DesiLogi]

To clarify, the scenario I need (if it's not done with Sections but in an html block itself) is something like, in plain language. I've scoured SO and this forum and I can't figure out the exact way to put this syntax- will this work in a single html block or should it be in multiple html blocks the way you laid out for Sections? Thanks for walking me through this, I'm learning js as I go. 

The scenario:

If PortalID is Null Then

button1.visible = true

button2.visible = false

Else

button1.visible = false

button2.visible= true

End

Where

button1= <a href="../../portal?PortalID=[@field:PortalID]" target="_self"><input class="cb_custom_btn3" type="button" value="Create Portal" /></a>

button2 = <a href="../../portal2?PortalID=[@field:PortalID]" target="_self"><input class="cb_custom_btn3" type="button" value="Go to Portal" /></a>

 

[DesiLogi]

Ok I got it figured out to work using a variation of your method. Instead of using Sections I just put the html blocks you posted around an html block with the button I'm trying to show/hide. This gives more flexibility in terms of where I can place the button on the page (it's a complicated datapage, layout-wise). 

The code I used, if anyone needs to do an if/then with a Caspio field is:

HTML block above the html block that show/hides:

<div id="section1">

HMTL block below the html block that show/hides

</div>
<script>
   var v_portalid = parseFloat(document.getElementById("EditRecordPortalID").value);

if(!isNaN(portalid))
{
  document.getElementById('section1').style.display:none;
  }
else {
document.getElementById('section1').style.display:block;
}
</script>

This makes it so if the record's field 'PortalID' is null it hides the html block with the button in it. If the 'PortalID' is Not Null then the html block with the button (that uses that PortalID value as a parameter) is visible and the user can then access a new, related page via the button.

Thanks for pointing the way to do this- I would've have preferred to do it all in a single html block but I couldn't figure that out. But this method works nicely. 

[DesiLogi]

Well I spoke to soon. When the PortalID is null then the entire datapage is not visible. So maybe it does have to be in a section to work. However, I still think the most elegant solution is to have the whole thing in a single html block- meaning check the PortalID for Null and do an If (Condition) to display/hide the button (I just don't know the syntax to identify the button and then use that id to display/hide it. I've scoured the internet but can't find a simple example. 

If anyone could help with this particular part I think it would be a great solution. 

Something like this in a single html block is what I need, but that doesn't make the whole datapage invisible when PortalID is null

<div style="text-align: right;"><a href="../../portal-designer?PortalID=[@field:PortalID]" target="_self"><input id="section1" class="cb_custom_btn3" type="button" value="Client Portal" /></a></div>

<script>
   var v_portalid = parseFloat(document.getElementById("EditRecordPortalID").value);

if(!isNaN(portalid))
{
  document.getElementById('section1').style.display:none;
  }
else {
document.getElementById('section1').style.display:block;
}
</script>

 

[DesiLogi]

the above doesn't work, though it must be close- can anyone help?

[JayMont]

Hi, DesiLogi!

I noticed a syntax error in the code. The variable name inside the if conditional should match your declared variable. It should be:

 

<div style="text-align: right;"><a href="../../portal-designer?PortalID=[@field:PortalID]" target="_self"><input id="section1" class="cb_custom_btn3" type="button" value="Client Portal" /></a></div>

<script>
   var v_portalid = parseFloat(document.getElementById("EditRecordPortalID").value);

if(!isNaN(v_portalid))
{
  document.getElementById('section1').style.display = "none";
}
else
{
document.getElementById('section1').style.display ="block";
}
</script>

Notice the variable inside isNaN().

[DesiLogi]

Hi JayMont,

Thanks for pointing that out- I thought I might have missed something like that. I changed it but it's still not working. Not sure what the problem is- seems it should be a simple function. 

I tested it with a popup message just to see if the code was running to check the PortalID but got nothing. So it seems like the If IsNull part isn't even running. I'll dig in further but if there are any other suggestions I'm definitely open to them. 

[JayMont]

The entire datapage is still hidden?

[DesiLogi]

Actually, when putting the script in the footer it does seem to run the code- so that's a start..

 

[DesiLogi]

Ok- it seems like it's working now with the script in the footer of the datapage and just the div with the button in the html block. The weird thing is I had it backwards in terms of PortalID=null then invisible. The code that works is below. An odd thing also is now that button has underlined text when it's visible. I need to figure that out but it seems like it's essentially working. One mod I'll be making is to put another button there as well so if PortalID= null button1 shows and if PortalID=NotNull then button2 shows. This will really add a lot of flexibility to datapage UI design, when Rules can't be used. 

Thanks again JayMont and MayMusic for helping out with that. 

Here's the code that worked, if anyone needs something similar:

In the HTML block:

<div style="text-align: right;"><a href="../../portal-designer?PortalID=[@field:PortalID]" target="_self"><input id="section1" class="cb_custom_btn3" type="button" value="Client Portal" /></a></div>

In the datapage footer:

<script>
   var v_portalid = parseFloat(document.getElementById("EditRecordPortalID").value);

if(!isNaN(v_portalid))
{
  document.getElementById('section1').style.display = "block";
}
else
{
document.getElementById('section1').style.display ="none";
}
</script>

 

[JayMont]

You're welcome!

You can remove the underline by adding a tex-decoration: none; to your div like so:

<div style="text-align: right; text-decoration: none;"><a href="../../portal-designer?PortalID=[@field:PortalID]" target="_self"><input id="section1" class="cb_custom_btn3" type="button" value="Client Portal" /></a></div>

 

To extend it to the functionality that you want with two buttons, you can just add two more lines in your code. Let's assume you added button2 with id="section2". It would look something like:

<script>
   var v_portalid = parseFloat(document.getElementById("EditRecordPortalID").value);

if(!isNaN(v_portalid))
{
  document.getElementById('section1').style.display = "block";
  document.getElementById('section2').style.display = "none";
}
else
{
  document.getElementById('section1').style.display = "none";
  document.getElementById('section2').style.display = "block";
}
</script>

 

[DesiLogi]

Thanks for the extra button code- works nicely. For some reason the text in the button is still underlined, even with the text-decoration. Very strange because there's nothing else different about it.

[JayMont]

I just realized there's <a>. Try this one

<div style="text-align: right;"><a style=" text-decoration: none;"  href="../../portal-designer?PortalID=[@field:PortalID]" target="_self"><input id="section1" class="cb_custom_btn3" type="button" value="Client Portal" /></a></div>

The <a> tag add's an underline by default.

[DesiLogi]

That works fantastic- thanks very much for the help on this!

(obviously, I'm learning javascript and this kind of thing is key..)

[JayMont]

Awesome. You're welcome!