[solved] Hiding element on page load

PowerShell Universal
1

Using the latest 1.3 nightly release.

I’m trying to hide a “New-UDCard” on page load.

I’ve tried:

New-UDCard -Style @{
style = "display:none"
}

also:

Set-UDElement -id 'bleh' -Properties @{
style = 'display:none'
}

I’ve had luck using:

Invoke-UDJavaScript -JavaScript '
document.getElementById("myid").style.display = "none";
 '

but only after the page has loaded from user action, not on page load itself.

Any ideas?

2

There’s a sample code for loading bar I found the other day where OP uses visibility in CSS, maybe that helps?

Instead of “display”, he uses “visibility” style

3

I think the problem with visibility as opposed to display, is display will actually shuffle the elements to take up the space of the now hidden element, visibility doesn’t.

Would leave a big gap on my form. Thanks for the idea though.

4

There is a collapse value for visibility, would that work?
https://www.w3schools.com/cssref/playit.asp?filename=playcss_visibility_collapse

5

Didn’t know about that one. It might work, I’ll give it a try tomorrow when I’m back at work.

Thanks for the idea

6

There is Remove-UDElement not tried to do what your doing but got and example of using this command here:-

7

Thanks psDevUK but since that is happening after form load it’s pretty much the same as how i have it working now with Invoke-UDJavascript.

I also don’t know if I could set the value of the drop-down via that method since it seems to convert to a list with about a dozen classes on run.

I think I could do it if I could get the scripts parameter back from New-UDDashboard in v2.

I might try to edit the client HTML and add my scripts there. Was hoping for an official answer from Adam though on how we are really supposed to add scripts in Universal now.

8

I figured out how to do it. Yay, sharing it here in case it helps anyone else.

  1. Install UDStyle because it is needed for this to work
  2. Wrap the element you want to hide like so:
New-UDStyle  -Style 'display:none;' -Content {
#content you want to hide
New-UDCard -id 'myID' -Content {
}
#end hidden content
}
  1. Now, normally we’d use the “ID” of our UDStyle element but that doesn’t seem to work, no matter what I specify for “ID” it doesn’t actually get rendered in the HTML so instead we do like this:
Invoke-UDJavaScript -JavaScript '
document.getElementById("myID").parentElement.style.display = "none";
'

What this does is get the parent of the element we DO know (myid) and grabs the randomly generated ID of the New-UDStyle element and hides it.

  1. To show again, just use block or inline instead:
Invoke-UDJavaScript -JavaScript '
document.getElementById("myID").parentElement.style.display = "block";
'
3 Likes
9

@BenevolentD just wanted to say a big thanks for this. You’ve got me out of a right pickle with this! Using text boxes dynamically with switches and set-udelement just doesn’t seem to work no matter what way I tried it I always got odd behaviour. This worked perfectly though so thanks!

1 Like
10

cheers mate - glad it helped someone else.

11

The Enable JS you are using doesn’t work anymore I’m using v3.0.0

12

You can do this natively now.

New-UDDashboard -Title "Hello, World!?" -Content {
    New-UDElement -Tag 'div' -Id 'dynamic' -Content {
        New-UDCard -Text "Hello"
    }

    New-UDButton -Text 'Hide' -OnClick {
        Set-UDElement -Id 'dynamic' -Properties @{
            attributes = @{
                style = @{ 'display' = 'none' }
            }
            
        }
    }

    New-UDButton -Text 'Show' -OnClick {
        Set-UDElement -Id 'dynamic' -Properties @{
            attributes = @{
                style = @{ 'display' = 'block' }
            }
        }
    }
}
1 Like