Stephanevg/PSHTML

Is there a support for Checkbox in PSHTML?

harikanth64 opened this issue · 5 comments

harikanth64 commented

Subject of the issue

I am trying to include input -type 'checkbox', it displays in output but not able to check using mouse click. Using tab key and spacebar I can check

Steps to reproduce

                            div -Class "custom-control custom-checkbox" {
                            input -name "checkbox" -id "checkbox_1" -type "checkbox" -Class "custom- control-input" -value "so"
                            label -Class "custom-control-label" "StoreOnce"

Expected behaviour

Should be able to check with mouse click

Actual behaviour

Not able to click using mouse, checks with keyboard.

Stephanevg commented

hi @harikanth64
That is a pretty strange behaviour, what browser are you using? Have you tried on another browser?

I tried on my machine in Chrome and it actually works.

 $e = div -Class "custom-control custom-checkbox" {
            input -name "checkbox" -id "checkbox_1" -type "checkbox" -Class "custom- control-input" -value "so"
            label -Class "custom-control-label" "StoreOnce"
} 
Out-PSHTMLDocument -HTMLDocument $e -OutPath C:\admin\plop.html -Show

image

harikanth64 commented

@Stephanevg Thanks for your reply.
I found the issue. The issue with CDN link which I am using.
If I add this bootstrap cdn
``link "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" -rel "stylesheet"

It doesn't work. When I removed CDN it, it works.
I even tried downloading the css source from Bootstrap portal to local system. It doesn't work.
Is there any issue with the CDN / css with checkbox?

For the same example please try adding Bootstrap CDN and check.

Stephanevg commented

Have you managed to find a workardoun @harikanth64 ?

Please try:

link -href "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" -rel "stylesheet"

If it doesn't work, do you have errors in the console part of the chrome developer tools? (press F12 in the chrome browser when on the page)

Alternativley,
You could use the follwing in head section

Write-pshtmlAsset -Name BootStrap

It will add a link to the local version of bootstrap which ships with the module.

Also, you can try to add

harikanth64 commented

@Stephanevg I have tested it is working.
Can you help me understand the usage of Write-pshtmlAsset -Name BootStrap?
Thanks for your help.

Stephanevg commented

@harikanth64 I am so sorry for the (pretty ?...) late reply. I am happy your issue got fixed.

If you haven't found the answer yet to your question regarding Assets, (which I doubt) you can read the documentation about write-pshtmlAsset and assets in general right Here.

I have think I wrote quite some explainations around it, and how to use assets in general.

If you still have questions about it (Or perhaps new questions), I invite you to open a new issue.

#Stéphane