How create a floating button in page

1

Hello Radzen team, could you so kind to explain how insert in page a floating button like your chat button in
Radzen site?
Is there a tutorial for this in documentation?

Thanks

2

Do you want the button to appear in every page? If yes you can edit the Main layout and drag and drop a Button component in the Footer (which is already fixed at the bottom).

If you want the button to appear only in specific page do the following:

  1. Drag and drop a button in the page

  2. Set its Position property (under Style) to fixed. This makes the button float via the position: fixed CSS attribute.

  3. Set the Bottom and Right properties to specify the exact position you want the button to appear.

    55
    Screen Shot 2018-11-19 at 11.24.55.png3142×1764 459 KB

    If the button appears below certain elements you will have to set its z-index. At the moment Radzen doesn't allow this via the property grid but you can manually edit the JSON file of your page (meta\pages\<page-name>json):

             {
           "icon": "",
           "name": "button1",
           "style": {
             "bottom": "100px",
             "position": "fixed",
             "zIndex": 5000,
             "right": "100px"
           },
           "text": "Floating button",
           "type": "button"
         }
3

Hi Korchev, thanks for your suggestion. I confirm you that I have insert the floating button with success, but
I have these questions:

  1. the setting of zIndex is deleted if I modify the page or layout by Radzen. How I can preserve it when file
    json of the page is rewrite of the Radzen?

  2. How I can obtain the same aspect of your chat button in your site, that is shadow and icon?

  3. How I can adjust the icon dimension of the button? If I change button size, the icon not change its
    size.

  4. Could you so kind to do a example how open a slide panel when floating button is pressed, similar
    your chat panel in your site?

Thanks a lot.