SoftTimur SoftTimur - 6 months ago 24
HTML Question

Override 2 settings of textfield

I have the following HTML code to make a textarea.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Title</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<link href="Office.css" rel="stylesheet" type="text/css" />
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
<link href="Common.css" rel="stylesheet" type="text/css" />
<script src="Notification.js" type="text/javascript"></script>
<script src="Home.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
<style>
.ms-TextField.ms-TextField--multiline .ms-TextField-field {
font-family: monospace;
}
</style>
</head>
<body class="ms-font-m">
<div id="content-main">
<div class="padding">
<div class="ms-TextField ms-TextField--multiline">
<textarea class="ms-TextField-field" id="myTextarea" spellcheck=false style="font-size: 16px;">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG</textarea>
</div>
</div>
</body>
</html>


Here is how the result looks like:

enter image description here

I would like to change 2 settings:

1) I want the height of the text area to be larger, like 8 rows for example

2) I want to remove the small triangle symbol at the right bottom of the area.

Does anyone know how to do that?

Answer

I want to remove the small triangle symbol at the right bottom of the area.

  • resize:none to hide the triangle, because you won't be able to resize the textarea anymore

I want the height of the text area to be larger, like 8 rows for example

  • some height that could be in px/em/rem/vh to have around 8 rows.

textarea {
  font-family: monospace;
  font-size:16px;
  resize: none;
  height: 10rem;
  padding: 0
}
<textarea class="ms-TextField-field" id="myTextarea" spellcheck=false>=ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG=ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG=ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG=ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG=ABCDEFGHIJKLMNOPQRSTUVW</textarea>

Comments