I am writing a script to display the repeated words of a text highlighted by distinct colors, I display it by copying a text into my first textarea with id called "texto"
<textarea cols="70" rows="15" id="texto" ></textarea>
My code works well and find that words and display it after paste the text and press the button: Change color, using:
<div id="out1" ></div>
<div class="wrapper">
<button class="button buttom0" style="vertical-align:middle;background-color:SpringGreen" onclick="myFunction()"; ><span>Change Color</span></button>
</div>
and:
document.getElementById("out1").innerHTML = newText;
The problem is that the text is displayed out of the limits of my second textarea with id: "ou1", I would like to appreciate a suggestion to fix this problem I build the following https://jsfiddle.net/qhed57z0/15/ file to show the problem and this is the short text that I used to test it:
The ACCESSKEY attribute specifies a single Unicode character as a shortcut key for giving focus to the TEXTAREA. Authors can set the access key on the TEXTAREA element or the LABEL element associated with it. Entities (e.g. é) may be used as the ACCESSKEY value.
Remove the rule white-space in the css for #out1
#out1 {
width: calc(100% - 150px);
font-style: normal;
font-weight: bold;
font-size: 28px;
white-space: pre;//REMOVE
background-color: gray;
padding: 25px;
border: 25px solid navy;
margin-left: auto;
margin-right: auto;
box-shadow: 0 8px 16px white;
}
Result : https://jsfiddle.net/cmedina/qhed57z0/18/
Remove white-space: pre; from #ou1 and use pre-wrap instead.
"white-space: pre; is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML"
"white-space: pre-wrap; is preserved by the browser. Text will wrap when necessary, and on line breaks"
see fiddle https://jsfiddle.net/qhed57z0/20/
#out1 {
width: calc(100% - 150px);
font-style: normal;
font-weight: bold;
font-size: 28px;
white-space: pre-wrap;
background-color: gray;
padding: 25px;
border: 25px solid navy;
margin-left: auto;
margin-right: auto;
box-shadow: 0 8px 16px white;
}
http://www.w3schools.com/cssref/pr_text_white-space.asp
Related
I am coding an application that displays text inside <pre> tags. Sometimes there will be a datetime input that I styled using css (see below). Unfortunately, it seems that, only on firefox, my css code works poorly when the input is in <pre> tags. In other browsers, like Chrome, this problem does not occur.
How can I fix this problem ?
Here is my code (simplified) :
<body>
<style>
input {
flex-shrink: 1;
border-width: 1px;
border-color: black;
--tw-border-opacity: 0;
--tw-bg-opacity: 1;
background-color: white;
border-radius: 0.5rem;
height: 1.5rem/* 24px */;
padding-left: 0.5rem/* 8px */;
padding-right: 0.5rem/* 8px */;
font-size: 0.75rem/* 12px */;
line-height: 1rem/* 16px */;
line-height: 1.625;
}
</style>
With pre tag : <br>
<pre><input type="datetime-local"/></pre>
Without pre tag :<br>
<input type="datetime-local"/>
</body>
And for people who don't use Firefox, here is a screenshot
Edit: I tried with a normal div with the whitespace-pre-wrap property but it don't works too !
Edit 2: Found the solution! Just add the property white-space: normal; to the input so that the text centers well.
I just found the solution :
Just add the property white-space: normal; to the input so that the text centers well.
<body>
<style>
input {
flex-shrink: 1;
border-width: 1px;
border-color: black;
--tw-border-opacity: 0;
--tw-bg-opacity: 1;
background-color: white;
border-radius: 0.5rem;
height: 1.5rem/* 24px */;
padding-left: 0.5rem/* 8px */;
padding-right: 0.5rem/* 8px */;
font-size: 0.75rem/* 12px */;
line-height: 1rem/* 16px */;
line-height: 1.625;
white-space: normal; /* !!! */
}
</style>
With pre tag : <br>
<pre><input type="datetime-local"/></pre>
Without pre tag :<br>
<input type="datetime-local"/>
</body>
I've been relentlessly trying to resize the text of my buttons to fit within the parent div, and have had no success with fitty and other external plug-ins which work inconsistently or not at all.
I'm attempting to make my own simplified version that simply reduces the font-size of my answer_button_1_text element by 1px until it's smaller than the parent answer_button_1 element.
Using clientWidth returns 281 for answer_button_1 and 253 for answer_button_1_text regardless of if the text in the button extends past the boundaries.
How can I get the actual length of the text?
I've attempted to use the canvas.measureText method, but am unfamiliar with using canvases and when I apply a canvas to the entire HTML in this codepen, none of the elements on my screen are visible. I'm sure I'm making a basic mistake, but if anyone could help me find a way to return the actual space that my answer_button_1_text element takes up, I would really appreciate it.
Here is a codepen:
https://codepen.io/TheNomadicAspie/pen/oNWpZrg
Here is my code:
<button id="button" class="button lower-button">
<div id="button_text">Really long button</div>
</button>
<div id="question_text">Test</div>
body {
background-color: gray;
}
.button {
display: block;
position: relative;
height: 20%;
width: 10%;
background-color: black; /*Button Color*/
color: #f5f5f5;
font-family: open_sans;
font-size: 1.5rem;
font-size: min(6vw, clamp(1rem, 4.5vh, 4rem));
border-radius: 20px;
text-decoration: none;
box-shadow: 0.1em 0.2em black;
transition: 0.2s;
}
.lower-button {
white-space: nowrap;
}
#question_text {
position: absolute;
color: blue;
font-size: 40px;
margin-top: 100px;
}
const question_text = document.getElementById('question_text')
let text_var = button.clientWidth + ' ' + button_text.clientWidth
question_text.innerText = text_var
This is a simple question:
This code prints WELCOME in RED.
<p style='color:red;'>WELCOME</p>
When I switch to a css style sheet it prints it in BLACK
p {
font-size: 12pt;
text-align: left;
padding: 1em 1em 0 1em;
color: RED;
}
<p> WELCOME </p>
How come?
Every time I've tested the css style sheet version, I changed the font-size and text-align properties. And each time the browser rendered those changes but ignored color.
For example,
p {
font-size: 30pt;
text-align: left;
padding: 1em 1em 0 1em;
color: GREEN;
}
<p> WELCOME </p>
Rendered very large type ... but still in BLACK.
So I'm making this flash card app, and I'm using Angular to let the user enter text in an input text box and the text displays on a flash card below it. The problem is that when the user types a lot, the text overflows moves past and outside the div box. Here is my code.
<input type="text" ng-model="ctrl.note">
<div class="box">
<div class="note">{{ctrl.note}}</div>
</div>
</div>
CSS:
.box {
border: solid;
height: 300px;
width: 600px;
margin: 30px auto;
border-radius: 25px;
box-shadow: 8px 8px 10px #ccc;
}
.note {
text-align: center;
margin: 50px;
font-weight: bold;
font-size: 40px;
}
The input type="text" box is meant for single line text.
To get what you are looking for you need to use a <textarea> HTML tag.
HTML textarea tag
You could write:
<textarea col="20" rows="5" ng-model="ctrl.note"></textarea>
As advised by Ted A.
Set a width in the .note CSS class so that your browser knows what "outside the box" means.
Also consider the word-wrap property
I have 3 text fields. Each of them has margin-right: 5px. Google Chrome automatically adds 3-4px on margin-right into each element. I don't know how to fix this. I notice this because when I use JQUERY to generate more text fields on click event. I don't see these extra margin. These extra margin added only when the elements are rendered from my HTML, not from the string in my Javascript. Any idea? Thanks.
HTML:
<input type="text" class="text_input" name="field_class_0" />
<input type="text" class="text_input" name="field_book_title_0" />
<input type="text" class="text_input" name="field_isbn_0" />
CSS:
.text_input {
margin: 0 5px 5px 0;
padding: 5px 7px;
}
https://jsfiddle.net/3g42rjdp/2/
Although, this may be dependent on the browser version, Chrome generally have these CSS rules for the input element:
-webkit-appearance: textfield;
background-color: white;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
padding: 1px;
border: 2px inset;
and these for the input, textarea, keygen, select, button:
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;
and this for input, textarea, keygen, select, button, meter, progress:
-webkit-writing-mode: horizontal-tb;
So, this does not relate to the browser stylesheet rules.
UPDATE
If you add a white-space like
space
tab
newine ( This is your case )
between them, a gap will appear.
Depending on the situation, you can use either of the following methods to get rid of the gap:
Add a negative margin-left
Use float
Remove the whitespace between the elements, which can be done:
1- Put theme in one line
<input type="text"><input type="text"><input type="text">
2- Removing the space ( Don't worry, it is correct! :) )
<input type="text"><
input type="text"><
input type="text">
3- Use HTML comments
<input type="text"><!--
--><input type="text">
I suggest you to use the Number 1 method (Put theme in one line), but either will work.