Web SDk Forms

  • 8 May 2023
  • 1 reply
  • 62 views

Userlevel 1
Badge +1

Hi


I am testing a more complex Web SDK Form ( using Mirotone examples ) and, so far, it is working fine.
But I have some questions:

(1) How do I change the App Form Pop-up size ?
The current width is 368 but I did not see any CSS defining it.
(2) Is there any way to get a floating Form instead of a fixed one ?

As far as I understand Miro creates this Form and my App “runs” inside it, so I don’t know if I have control over it from the App code.

Thanks

const App = () => {
React.useEffect(() => {
addSticky();
}, []);

return (
<div className="grid form-example">
<form className="cs1 ce12 form-example--main-content">

<div className="form-group">
<label htmlFor="form-example-input-1">Input label</label>
<input className="input" type="text" id="form-example-input-1" placeholder="Enter something"/>
</div>

<div className="form-group">
<label htmlFor="form-example-input-3">Input label</label>
<select className="select" id="form-example-input-3">
<option value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
<option value="4">Option four</option>
</select>
</div>

<div className="form-group">
<label className="checkbox">
<input type="checkbox"/>
<span>Select this option</span>
</label>
</div>

<div className="form-group">
<label className="radiobutton">
<input type="radio" name="radio"/>
<span>Option 1</span>
</label>
<label className="radiobutton">
<input type="radio" name="radio"/>
<span>Option 2</span>
</label>
</div>
</form>

<button type="button" className="cs1 ce12 button button-primary"
onClick={button_onClick}>
OK
</button>

</div>
);
};

 


1 reply

Userlevel 2
Badge

Hi @Siegmar,

Thank you for raising this! I think this portion of documentation will help you, but let me list a few answers anyway:

  • currently size of a panel (this is how we call the app form) is fixed and attached to the app toolbar, 368 is a default value for width of the panel.
  • you can create modals to have a little bit more flexibility, you can check out our example app using a modal as a… well, example :) 

Let me know if you have any additional questions. 

Thank you,

Elena.

Reply