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>
Related
I'm making as simple game as a webpage with HTML/CSS/JS (no framework). I decided to try out muicss for styling. I added an appbar to the page, but there is still a white gap above it.
Here's an example:
<html lang="en">
<head>
<title>MUI CSS Appbar Example</title>
<link
href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
</head>
<body>
<div class="mui-appbar">
<h1>Appbar</h1>
</div>
</body>
</html>
What I get
How do I get rid of the white stripe at the top? Examples from their docs don't have that. What am I missing
Add custom CSS style...
<html lang="en">
<head>
<title>MUI CSS Appbar Example</title>
<style>
h1 {
margin-top: 0px!important;
}
</style>
<link href="https://cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.muicss.com/mui-0.10.3/js/mui.min.js"></script>
</head>
<body>
<div class="mui-appbar">
<h1>Appbar</h1>
</div>
</body>
</html>
Immediately after posting this, I found that muicss declares a style
h1, h2, h3 {
margin-top: 20px;
margin-bottom: 10px;
}
So the whitestripe is caused by the margin-top on the h1 element.
Test Links.
Using Bootstrap classes, modify the div element with the id "links" so that on extra small
resolutions (<576px), each link and ad takes one whole row. It should look like this:
On small resolutions and higher (≥576px), both links should take one half of the row and the ads
should be invisible. It should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tests</title>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a,
div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links">
Aptitude tests
<div>Ads!</div>
Programming tests
<div>More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
You are getting close with your answer. To get it to work, these are the changes you need to make to the original code in your question:
add the class row to the container that has your cols (i.e. the links div) - cols must be in a row
Add col-12 col-sm-6 to the a elements (you just had the wrong breakpoint when you said col-12 col-md-6) Ref: Bootstrap breakpoints, Bootstrap Grid Mix & Match Col classes
For the divs, add d-sm-none to hide it on small screens (Ref: Bootstrap Display property) and col-12 to show it full width on all other screens.
You can see it working here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a, div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links" class="row">
Aptitude tests
<div class="d-sm-none col-12">Ads!</div>
Programming tests
<div class="d-sm-none col-12">More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tests</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a, div {
outline: 1px solid black;
}
#media (min-width: 576px ) {
#links {
display: flex;
flex-direction: column;
padding-right: none;
padding-left: none;
}
}
#media (max-width: 576px ) {
#links {
flex-direction: row;
}
}
</style>
</head>
<body>
<div id="links">
Aptitude tests
<div class="d-none d-md-block">Ads!</div>
Programming tests
<div class="d-none d-md-block">More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
This is the code I got with it.
The background-color CSS property in Chrome is not working when I implement it into the body. However, when I test it in CodePen, the body's background color changes accordingly. Here is the link to the CodePen code: https://codepen.io/Ag_Yog/pen/rzezYw.
Here is the code that does not work in notepad:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
CSS:
html, body {
width: 100%;
height: 100%;
background-color: #00e676 ;
}
.quoteCard{
background-color: #fff176;
}
.text{
position: relative;
vertical-align:middle;
font-family: 'Acme', sans-serif;
font-size: 30px;
padding: 20px 20px 20px 20px;
}
When inspecting the code on Google Chrome, it shows that there is no background-color, even though I specified it in the CSS:
Bootstrap's background color is overwriting your main.css so the background-color property is taken from the bootstrap css file. Change the order of your css files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container quoteCard">
<p id="quote" class= "text">Txt</p>
<button class = "btn getQuote ">Get new Quote</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src = "main.js"></script>
</body>
</html>
This will work
On codepen the body is already responsive, whereas your Chrome's page needs to be made responsive to react to the % of your CSS Properties.
Add these meta tags-
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta name="viewport"content="height=device-height, initial-scale=1.0">
</head>
Now your webpage can detect the devices width and height and set the style attributes according to them.
However, if this still doesn't work. Change your height properties value from 100% to something specific with px or use em if you want it to be responsive with different devices DPR.
I found I was having the same issue when using all of the CSS code for the body tag. I removed the background-color tag from that grouping and put it into a separate grouping for the same tag and everything worked as intended. It's an organizational problem, but it is functional.
Here's the example from my code (This is in my main.css file):
<style>
body {
font-family: Trebuchet MS;
margin-left: autopx;
margin-right: autopx;
margin-bottom: autopx;
margin-top: autopx;
}
body {background-color: #242424;}
</style>
(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 am trying to do a DIV-box with a height of 60px with bootstrap.
<div class="container" >
<div id="TopRow"class="row">
<div id="TopDiv" class="col-sx12"></div>
</div>
</div>
Then I assign a height to either TopRow or TopCol:
#TopRow{
height:60px;
box-sizing: border-box;
}
I expect to get a row container of 60px. The correct Value is shown for the element, however chrome shows me a height around 80px.
I did not find a ruler feature in IE 11 to check if it is a Browser issue.
Maybe you experienced anything similar?
This is the full code that is giving me the output in the picture. The ruler shows a heigt of about 80px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Top Box</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<style>
#TopRow{
height:60px;
max-height:60px;
box-sizing: border-box;
}</style>
</head>
<body>
<div class="container" >
<div id="TopRow"class="row">
<div id="TopDiv" class="col-sx12"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
Demo (problem doesn't occur)
add max-height
#TopRow{
height:60px;
max-height:60px;
box-sizing: border-box;
}
I finally found the cause of displaying a different height than set in css:
If you zoom your page (even in another window at another time) the developer window will remember and zoom you page to the last used value! No hint shown whatsoever....