Forums

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

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