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)
Related
I am trying to figure out why my font is not being vertically aligned. I'm using Spartan MB font provided by Google and it's just not looking right, see here.
My HTML markup is this:
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Spartan&display=swap" rel="stylesheet">
<style>
button, input {
font-family: 'Spartan', sans-serif;
}
</style>
</head>
<body>
<button>Click me</button>
<input type="text" value="Hello world" />
</body>
</html>
Why using regular Arial font has no issue whatsoever?
Approaches I have tried
Setting different line-heigh properties. Does not help.
Setting vertical-align: text-bottom does not help.
Modifying the font itself using ftxdumperfuser utility as described here by changing ascender and descender attirbutes. That helped a bit but only worked in Chromium browsers.
Could someone enlighten me on this behaviour? Is there a cross-browser way to fix this?
The problem is by the font its self, how its rendered. You can only work with different padding from top/bottom.
button, input {
font-family: 'Spartan', sans-serif;
}
.trick {
font-family: 'Spartan', sans-serif;
padding-top: 3px;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Spartan&display=swap" rel="stylesheet">
</head>
<body>
<button>Click me</button>
<button class="trick">Click me</button>
</body>
</html>
Input also fixed
button, input {
font-family: 'Spartan', sans-serif;
vertical-align: middle;
}
input {
padding-top: 4px;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Spartan&display=swap" rel="stylesheet">
</head>
<body>
<button><span style="vertical-align: sub;">Click me</span></button>
<input type="text" value="Hello world" />
</body>
</html>
(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>
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>
Is there a way to focus on the field, but without this jarring animation? The behavior is especially bad when the keyboard is visible.
Demo
http://plnkr.co/edit/9OydOFO0KUeKuaH8u70A?p=info
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form>
<input>
<input>
<input>
<input>
<input>
...
<input>
</form>
</body>
</html>
After some more research, this appears to be related to a focus jumping bugs in iOS. (https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios#focus-jumping)
One neat trick that fixed it some instances was to set float: left; clear: left; on the input field (Jumping input fields in Safari)
But that fix doesn't work if it needs to interact with a position: fixed element. The jumping bug persists.
I am trying to layer 2 inputs on top of each other in HTML. In most browsers (Safari, FF, IE7) I do this with the following code and it works fine so that the second input is placed on top of the first with the lighter text color, and when you click in the area the focus goes to it. In IE8 however, the first one appears to be over the second one, so that when you click it and start typing you see the lighter colored text.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css" media="screen">
input {
background-color: transparent;
}
</style>
</head>
<body>
<input style="position:absolute;z-index: 1;color: #dedede;">
<input type="text" style="position:relative;z-index: 3;">
</body>
</html>
The problem seems pretty similar to that one, so I think you'll have to wrap a <input> into a <div> with higher z-index.