(I simply the question I asked previously in this thread).
I am trying to configure a textarea in HTML. And I want it to do exactly what the resource string tells about white-spacing and newlines (except wrapping).
For example, given a string 1234,\n 5678, 1234567890123456789\n 123. \n means going to a newline, and space means a white spacing. Thus, i want it to be printed in the textarea as follows:
1234,
5678, 12345678901234
56789
123
Note that 1234567890123456789 is wrapped, because it reaches the max width of the textarea. It is totally normal, and what I expected.
However, my current code does not give the right output, here is the code:
<!DOCTYPE html>
<html>
<body class="ms-font-m">
<textarea id="myTextarea" style="font-size: 16px; font-family: monospace; height: 15em; resize: none; white-space: pre-line;"></textarea>
<script>
document.getElementById("myTextarea").value = "1234,\n 5678, 1234567890123456789\n 123"
</script>
</body>
</html>
And here is the result:
Does anyone know how to amend the code such that it prints what I expected?
PS: the whole JSBin
PS: I tried all the keywords of white-space in this page, no one gives me the satisfactory result...
Original answer: An approach of how to resize the textarea width so the content will be contained in their rows respectively without overflow but respecting the breakpoints \n.
In my original answer I misunderstood what do you mean. After the feedback I noticed that I was wrong on what I was doing so here is the solution for your problem.
If you want that the words breaks into the next line when they overflows and respecting the spaces at the same time you just have to remove white-space: pre-line; and add word-break: break-all; property.
document.getElementById("myTextarea").value = "1234,\n 5678, 1234567890123456789\n 123"
#myTextarea{
font-size: 16px;
font-family: monospace;
height: 15em;
resize: none;
word-break: break-all;
}
<textarea id="myTextarea" style=""></textarea>
It would appear it is going unto the next line because of the font the size of the letters or the width size but I'm not getting the output you get, it doesn't go unto the next line. With a width of 20em it doesn't work but with 18em it does. Do you want to have the large text of DDDDDD.... be allowed to be scrolled or not wrap? Use white-space: nowrap; instead of pre-line.
<!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;
height: 15em;
resize: none;
white-space: nowrap;
width: 10em;
overflow: hidden;
}
</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;"></textarea>
</div>
<script>
document.getElementById("myTextarea").value = "=AAAA,\n BBBB, DDDDDDDDDDDDDDDDDDDDDDDDD\n CCCC"
</script>
</div>
</body>
</html>
Related
I'm trying to make a fairly simple site which there's a div with some text inside, centered both horizontally and vertically on the page.
I wouldn't have thought this would be that difficult to do, but something quite weird's happening. Here's the source that does work. Let's call this source A.
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
and here's the source that doesn't work. Let's call this source B.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
They both use the same stylesheet, which is here:
* {
font-family: 'Josefin Sans';
margin: 0;
padding: 0;
}
div.wrap {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}
div.content {
border: 1px solid red;
text-align: center;
width: 100%;
}
And the problem is that the div.wrap is only vertically aligned when I link to the stylesheets outside of the html head tags. This is the only difference between the source that works and the source that doesn't.
I know that you're meant to include source inside the head tags and that's why I think it's so strange that it only works when I do the opposite of this.
I would include a link to some exampls on jsfiddle or something, but the problem is how I'm including the stylesheets, which jsfiddle doesn't let me change.
I've tried this on all of the browsers I have (Opera, Firefox, and Chrome,) and the problem persists between them.
Is this some sort of HTML bug? Or am I making some obvious mistake?
Here are some screenshots.
Source A:
Source B:
I viewed the source in a web browser, and even when I link to the stylesheet outside the head, it seems to put it in there. So, in both examples, when actually viewed, the stylesheet is automatically being put in the head tags.
If my question isn't clear, it's basically this:
Why is this strange behavior happening, and how can I fix it?
It's not strange but your HTML is invalid by doing it that way in A.
Browsers are required to do the best they can with invalid markup. The problem with that, of course, is that you are relying on the browser to guess correctly at your intentions so don't write invalid markup.
There is a simple example with 2 inputs. One with custom google font and another with default browser font.
https://plnkr.co/edit/kh7KbhdLjjDn6niy8rzt?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
</head>
<body>
<input type="text" value="jgyq">
<input type="text" value="jgyq" class="custom-font">
</body>
</html>
input {
font-size: 16px;
}
.custom-font {
font-family: 'Open Sans';
}
If you try to select input text and drag to top or bottom, you will notice that input text jumps 1-4px to top or bottom (depend on line-height, height input attributes actually, but jumps always)
Have tried different compinations of padding, line-height, height properties.
I used line-height:1.2; + padding:6px 0; properties to have crossbrowser input (height) in the past. Is there any other good way to set crossbrowser text input withut such jumps and other problems. (IE11+, and modern Chrome, FF, O)
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:
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?
For textareas you can simply use rows="4" to increase the amount of rows.
And this css rule will disable the resize triangle
textarea {
resize: none;
}
1. I want the height of the text area to be larger, like 8 rows for example
height: 8em;
2. I want to remove the small triangle symbol at the right bottom of the area.
resize: none;
Snippet
.ms-TextField.ms-TextField--multiline .ms-TextField-field {
font-family: monospace;
height: 8em;
resize: none;
}
<div class="ms-TextField ms-TextField--multiline">
<textarea class="ms-TextField-field" id="myTextarea" spellcheck=false style="font-size: 16px;">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFG</textarea>
</div>
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>
I'm building a basic webpage to practice HTML, but am having trouble right off the bat.
Here is my HTML:
<!DOCTYPE html>
<html lang=“eng”>
<html>
<head>
<meta charset="utf-8">
<link type=“text/css” rel="stylesheet" href="style.css">
<title>Greg’s Page</title>
</head>
<body>
<div ID=“header”>Hello</div>
</body>
</html>
And here's my CSS:
#header {
height: 15px;
width: 100px;
background-color: #4A7B6F;
border-radius: 5px;
border: 2px solid #9EAEB3;
margin: auto;
}
Now for some reason, when I preview this HTML file on my computer it just looks like this: Hello. I've looked up syntax everywhere and I can't see anything I am doing wrong.
Change the quotes for id. Also change the case of ID.
Instead of
<div ID=“header”>Hello</div>
use
<div id="header">Hello</div>
Demo : http://jsfiddle.net/GCu2D/586/
Looks like there are a few things that are probably causing this. First, you have two html tags. second, ID is capitalized (not sure if that would cause any issues), and third you're not using ASCII quotes. “ (character code 8220) is not the same as " (character code 34).
Note that that quote issue most commonly comes from copying from a text editor, like Word. If you look at what you put, you'll see that the ID isn't the only thing with the wrong type of quotes.
Your code with those things fixed works:
#header {
height: 15px;
width: 100px;
background-color: #4A7B6F;
border-radius: 5px;
border: 2px solid #9EAEB3;
margin: auto;
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>Greg's Page</title>
</head>
<body>
<div ID="header">Hello</div>
</body>
</html>
Your quotes are wrong...
Check this fiddle
<div ID="header">Hello</div>
Demo https://jsfiddle.net/qq5sk3nf/
Have you copied the code from somewhere or typed it? The double-quotes used is incorrect. Use the ASCII quotes (the ones we use normally by pressing the Shift key and the quote key)
Make changes as below:
Change this <html lang=“eng”>
to <html lang="eng">
Change this <link type=“text/css” rel="stylesheet" href="style.css">
to
<link type="text/css" rel="stylesheet" href="style.css">
Change this <div ID=“header”>Hello</div>
to <div ID="header">Hello</div>
Your code would work fine after that. See your output below:
Change the line the below line:
<div ID=“header”>Hello</div>
By this
<div id="header">Hello</div>
Just make sure every quote you use in an html tag isn't curly-ish. On a standard keyboard, the quote symbol is what you get when you hold shift and press the key between the colon and the main enter key. Also, using en for the value for lang stands for standard english. The working code is below.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Greg’s Page</title>
</head>
<body>
<div ID="header">Hello</div>
</body>
</html>
Your style.css file (must be located in same folder as above HTML file):
#header {
height: 15px;
width: 100px;
background-color: #4A7B6F;
border-radius: 5px;
border: 2px solid #9EAEB3;
margin: auto;
}
Working JSFiddle
Fixed code:
<div id="header">Hello</div>
Problems:
id cannot be in caps
You cannot use “ quotes. You must use ".
Change the quotes for div id.
Wrong use---
<div ID=“header”>Hello</div>
Right use---
<div id="header">Hello</div>
then write css #header
Try this instead, I think the problem is because you used background-color
color: #4A7B6F;
With some HTML like this:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
td {
width:10px;
}
</style>
</head>
<body>
<table>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>WHOA I'M A LONG STRING!</td><td>Text</td><td>Text</td><td>Text</td></tr>
</table>
</body>
</html>
The tds don't get a width of 10px, they are just as long as the longest string in them.
How do you make this work?
You can change the css to:
max-width: 10px;
overflow: hidden;
but that will chop off the words mid-letter, wherever the edge happens to be.
I think all you could do is wrap the content in a div and give the div a width and overflow:hidden. It cuts off the text (or content), so that may not be what you're looking for.