iink SDK Web

Control the size of the editor using Bootstrap 5.

I want to control the size of the editor (columns and row depth) by placing it in a bootstrap 5 container so that it does not take up the whole page. My code only works on the <nav> portion of the html.


<div id="handwritingTest"  class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
		<div class="col-lg-12 col-md-12 col-sm-12 col-12 gamma">
			<h3>Handwriting Test</h3>

			<form data-toggle="validator" role="form" id="showHandwritingForm">
				<div class="row container-fluid">

					<div class="col-lg-12 col-md-6 col-sm-6 col-12">
								<div class="button-div">
									<button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
										<img src="images/undo.png">
									<button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
										<img src="images/redo.png">
								<select id="language"></select>
								<div class="spacer"></div>
							    <input type="text" class="input-field" id="importContentField" data-type="text/plain" placeholder="e.g. hello world">
							    <button class="classic-btn" id="importContent">Import</button>
							<div id="editor" touch-action="none"></div>


Kind regards,


I am slowly working my way through this. I think the key is to remove the line width: 100vw; from #editor in the css. 

Hello Glyn,

Thank you for your question.

We don't have such a ready to go example, but you can probably draw inspiration from the "math inside page" example:


In this example, you click on the equation to open a fixed size box where you can modify the equation.

The corresponding code is available here https://github.com/MyScript/iinkJS/blob/master/examples/v4/math-inside-page.html

Best regards,