Product: PowerShell Universal
Version: 3.7.9
It seems i need to make the Modal larger as what I want is in there.
Show-UDModal -Content {
New-UDAutocomplete -Id 'AccessReviewer' -Label "Choose Access Reviewer" -OnLoadOptions {
Read-GacAFdb -Connection $connection -Query ("SELECT TOP(5) DisplayName,Mail FROM users WHERE DISPLAYNAME like '{0}%'" -f $Body) | ForEach-Object {
'{0} [ {1} ]' -f $PSItem.DisplayName, $PSItem.Mail
} | ConvertTo-Json
}
Hi Kevin,
You have the -MaxWidth parameter for Show-UDModal. Does this help?
Thanks Matt, with -MaxWidth xl its is very small.
Show-UDModal -FullWidth -Content {
New-UDAutocomplete -Id 'AccessReviewer' -Label "Choose Access Reviewer" -OnLoadOptions {
Read-GacAFdb -Connection $connection -Query ("SELECT TOP(5) DisplayName,Mail FROM users WHERE DISPLAYNAME like '{0}%'" -f $Body) | ForEach-Object {
'{0} [ {1} ]' -f $PSItem.DisplayName, $PSItem.Mail
} | ConvertTo-Json
} -OnChange {
@Matt.Harris I had a typo here. However, my code looks like above not my previous paste. The screenshots are current. Sorry about the initial typo here.
With Show-UDModal -FullWidth it is across the entire page.
I have had issues with this, and with the docs being lackluster, combined with me knowing nothing about CSS: I asked chatGPT for help.
Yes, you can use the -Style parameter of Show-UDModal to adjust the width of the modal based on its content.
One way to achieve this is by setting the width property of the modal to auto. This will make the modal adjust its width based on the width of its content. Here’s an example:
powershell
New-UDDashboard -Title "Modal Example" -Content {
New-UDButton -Text "Open Modal" -OnClick {
Show-UDModal -Content {
New-UDCard -Title "My Modal" -Content {
"This is the content of my modal"
}
} -Style @{
width = "auto"
}
} -Size Medium
}
In this example, we’re setting the width property of the modal to auto. This will cause the modal to adjust its width based on the width of its content.
Note that this approach may result in the modal being wider than its container, which could cause horizontal scrolling. If you want to avoid horizontal scrolling, you could set a max-width property to the modal to prevent it from growing too wide. For example:
powershell
New-UDDashboard -Title "Modal Example" -Content {
New-UDButton -Text "Open Modal" -OnClick {
Show-UDModal -Content {
New-UDCard -Title "My Modal" -Content {
"This is the content of my modal"
}
} -Style @{
width = "auto"
maxWidth = "80%"
}
} -Size Medium
}
In this example, we’re setting a max-width property of 80% to the modal to prevent it from growing too wide. This will make the modal adjust its width based on its content, but it won’t be wider than 80% of its container.
Can you share the query you gave CHATGPT to generate that response?
The quotes are my questions - prior to this we talked about f it knew powershell universal.
can an UDMODAL be configured for automatic width?
Yes, you can configure an UDModal component to have automatic width by setting the AutoSize property to true.
Here’s an example of how to create an UDModal with automatic width:
powershellCopy code
New-UDModal -Content {
New-UDCard -Title "My Modal" -Content {
"This is the content of my modal"
}
} -AutoSize
In this example, we’re creating an UDModal component with a single UDCard component as its content. We’ve set the AutoSize property to true to enable automatic sizing.
When AutoSize is set to true, the UDModal component will automatically adjust its width based on the width of its content. This can be useful if you want to ensure that the modal is wide enough to display its contents without any wrapping or truncation.
Note that automatic sizing may not always be desirable, especially if you have a lot of content or if the content is very wide. In those cases, you may want to set a fixed width for the modal using the Width property instead.
that information is outdated. Show-UDmodal is the newest command, and it does not have an autosize parameter
You’re right that the Show-UDModal cmdlet in the latest version of Universal Dashboard Community Edition (3.x) does not have an AutoSize parameter. I apologize for the outdated information.
However, you can still achieve automatic sizing for UDModal components in Universal Dashboard 3.x by using a combination of CSS and JavaScript.
Here’s an example of how you can create an UDModal component with automatic sizing using CSS and JavaScript:
powershellCopy code
New-UDButton -Text "Open Modal" -OnClick {
Show-UDModal -Content {
New-UDCard -Title "My Modal" -Content {
"This is the content of my modal"
}
} -Id "my-modal"
} -Size Medium
New-UDHtml -Markup {
@"
<script>
// Wait for the modal to finish rendering
window.setTimeout(function() {
// Get the modal element
var modal = document.getElementById("my-modal");
// Get the content element
var content = modal.querySelector(".modal-content");
// Set the modal width to the content width
modal.style.width = content.offsetWidth + "px";
}, 100);
</script>
<style>
/* Hide the scrollbar on the modal */
.modal-body {
overflow-y: hidden;
}
</style>
"@
}
In this example, we’re using the Show-UDModal cmdlet to display a modal when a button is clicked. We’ve given the modal an Id of “my-modal” so we can target it with JavaScript later.
After the Show-UDModal cmdlet, we’re using the New-UDHtml cmdlet to insert a custom HTML block into the dashboard. Inside this block, we’re using JavaScript to set the width of the modal to the width of its content.
The JavaScript code waits for the modal to finish rendering, then gets the modal and content elements using the getElementById and querySelector functions, respectively. It then sets the width property of the modal element to the offsetWidth of the content element.
Finally, we’re using CSS to hide the vertical scrollbar on the modal. This is optional, but can make the modal look better if it doesn’t have enough content to fill the entire height.
With this approach, the modal will automatically adjust its width based on the width of its content. The JavaScript code ensures that the modal is sized correctly even if the content changes dynamically.
I hope this helps!
it does not look like Show-udmodal support the -id parameter
You’re correct, the Show-UDModal cmdlet does not support the -Id parameter. I apologize for the confusion.
In that case, you can still use the same approach of using CSS and JavaScript to achieve automatic sizing for the modal. However, you’ll need to modify the JavaScript code to target the correct modal element.
Here’s an updated example that doesn’t use the -Id parameter:
powershellCopy code
New-UDButton -Text "Open Modal" -OnClick {
Show-UDModal -Content {
New-UDCard -Title "My Modal" -Content {
"This is the content of my modal"
}
}
} -Size Medium
New-UDHtml -Markup {
@"
<script>
// Wait for the modal to finish rendering
window.setTimeout(function() {
// Get the modal element
var modal = document.querySelector(".modal.show");
// Get the content element
var content = modal.querySelector(".modal-content");
// Set the modal width to the content width
modal.style.width = content.offsetWidth + "px";
}, 100);
</script>
<style>
/* Hide the scrollbar on the modal */
.modal-body {
overflow-y: hidden;
}
</style>
"@
}
In this example, we’re using the querySelector function to get the modal element and the content element. The querySelector function searches the entire document for the specified selector, so we’re using the ".modal.show" selector to target the modal that’s currently being displayed.
The rest of the JavaScript code is the same as in the previous example. We wait for the modal to finish rendering, then set the width of the modal to the width of its content.
I hope this helps!
Show-udmodal has a -style parameter that accepts css, can it be used to dynamically adjust the width of the modal?
Yes, you can use the -Style parameter of Show-UDModal to dynamically adjust the width of the modal.
You can define a CSS class with a max-width property and set the width of the modal using the style parameter of Show-UDModal. Here’s an example:
powershellCopy code
New-UDDashboard -Title "Modal Example" -Content {
New-UDButton -Text "Open Modal" -OnClick {
Show-UDModal -Content {
New-UDCard -Title "My Modal" -Content {
"This is the content of my modal"
}
} -Style @{
maxWidth = "80%"
}
} -Size Medium
}
In this example, we’re setting the max-width property of a CSS class to 80%. Then, we’re using the -Style parameter of Show-UDModal to set the style attribute of the modal to include the CSS class.
This will make the modal 80% of the width of its container. You can adjust the max-width property to whatever value you’d like.
that adjusts the width based on its container, can it be used to adjust width based on its content?
Yes, you can use the -Style parameter of Show-UDModal to adjust the width of the modal based on its content.
One way to achieve this is by setting the width property of the modal to auto. This will make the modal adjust its width based on the width of its content. Here’s an example:
powershellCopy code
New-UDDashboard -Title "Modal Example" -Content {
New-UDButton -Text "Open Modal" -OnClick {
Show-UDModal -Content {
New-UDCard -Title "My Modal" -Content {
"This is the content of my modal"
}
} -Style @{
width = "auto"
}
} -Size Medium
}
In this example, we’re setting the width property of the modal to auto. This will cause the modal to adjust its width based on the width of its content.
Note that this approach may result in the modal being wider than its container, which could cause horizontal scrolling. If you want to avoid horizontal scrolling, you could set a max-width property to the modal to prevent it from growing too wide. For example:
powershellCopy code
New-UDDashboard -Title "Modal Example" -Content {
New-UDButton -Text "Open Modal" -OnClick {
Show-UDModal -Content {
New-UDCard -Title "My Modal" -Content {
"This is the content of my modal"
}
} -Style @{
width = "auto"
maxWidth = "80%"
}
} -Size Medium
}
In this example, we’re setting a max-width property of 80% to the modal to prevent it from growing too wide. This will make the modal adjust its width based on its content, but it won’t be wider than 80% of its container.
the last example worked perfectly
Great, I’m glad to hear that the example worked for you! Don’t hesitate to reach out if you have any more questions or run into any issues.
while autosizing does work, the modal is no longer displayed center on the screen when size is changed based on content - can css force it to be centered?
Yes, you can use CSS to center the modal on the screen, even when it’s sized based on its content.
One approach is to use a combination of position: fixed, top: 50%, and left: 50% to center the modal horizontally and vertically. You can then use a negative margin-top and margin-left to shift the modal up and to the left by half its height and width, respectively. Here’s an example:
powershellCopy code
New-UDDashboard -Title "Modal Example" -Content {
New-UDButton -Text "Open Modal" -OnClick {
Show-UDModal -Content {
New-UDCard -Title "My Modal" -Content {
"This is the content of my modal"
}
} -Style @{
width = "auto"
maxWidth = "80%"
position = "fixed"
top = "50%"
left = "50%"
marginTop = "-150px"
marginLeft = "-40%"
}
} -Size Medium
}
In this example, we’re setting the position property of the modal to fixed to position it relative to the screen. Then, we’re using top: 50% and left: 50% to center the modal horizontally and vertically. Finally, we’re using a negative marginTop of -150px and marginLeft of -40% to shift the modal up and to the left by half its height and width, respectively.
Adjust the values of marginTop and marginLeft to suit your needs, based on the size of your modal.