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>
							<nav>
								<div class="button-div">
									<button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
										<img src="images/undo.png">
									</button>
									<button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
										<img src="images/redo.png">
									</button>
								</div>
								<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>
							</nav>
							
							<div id="editor" touch-action="none"></div>
						</div>
					
					</div>
				</div>		
			</form>
		</div>
	</div>

 

Kind regards,

Glyn


1 Comment

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:

https://myscript.github.io/iinkJS/examples/v4/math-inside-page.html

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,


Gwenaëlle

Login or Signup to post a comment