I made an auto growing input field.
For this I used the „Solution with span:” solution from this CodePen: https://codepen.io/chriscoyier/pen/XWbqpzP
Basically a span tag with role="textbox"
My problem is when I copy text from websites it copies everything and when I paste it into the input field it contains all the html characters with styling.
So text has html elements such as div, p, etc... and styling like background-color, color, border...
Facebook uses the same solution with role="presentation" for comment writing input field for the posts. But it works fine there, it only shows text and numbers.
Is there any solution to get rid of the additional characters?
Here is a „case study” :)
I copied the CodePen's title from the top left corner, and paste it into the span filed. This picture is illustrates well:
https://i.stack.imgur.com/WFchM.jpg
And here is my code as well, if it helps to find something:
<span class="input__textarea input__textarea__msg" role="textbox" contenteditable></span>
And the css:
&__textarea{
border-radius: 19px;
background-color: $medium;
padding: 6px 30px;
font-size: 18px;
outline: none;
#include shadow();
display: block;
width: 100%;
overflow: hidden;
min-height: 34px;
max-height: 300px;
overflow-y: scroll;
span{
background-color: transparent !important;
color: $dark !important;
line-height: 1;
//user-select: text;
}
&__msg[contenteditable]:empty::before{
content: "Send message";
color: #757575;
}
And this is what I have in the console after I paste some content (this is not from CodePen):
https://i.stack.imgur.com/5hxDZ.jpg
Related
I'm trying to change the appearance of code sections on my Joomla 4 website using the Cassiopeia template. A sample HTML source looks like this:
<p>Trying to format a code section below.</p>
<pre><code>This is code line 1, starting at position 1
This is code line 2, starting at position 1 as well
This is code line 3, starting at position 1 as well
</code></pre>
<p>This text follows the code section.</p>
Without adding user CSS, this is displayed as follows:
All lines are left-aligned, as expected.
I'm adding the following CSS to the user.css file:
pre {
display: block;
width: auto;
max-height: 600px;
overflow: auto;
background-color: #eee;
border-radius: 10px;
border: 1px solid;
border-color: var(--cassiopeia-color-primary, #111 );
scrollbar-color: #ccc transparent;
margin: 20px 40px;
padding: 30px;
word-wrap: normal;
}
pre > code {
font-size: 1.0rem;
text-indent: 0;
color: #111;
white-space: inherit;
margin: 20px 20px;
}
The CSS (mostly) works as desired, i.e display the code in a bordered box with grey background. However, the first code line is indented by 2 characters. See here:
I tried to find the cause using Firefox Web Inspecting Tools (shift-crtl-i), but can't seem to find out. What is causing that 2 character indent?
Please update your code a bit, remove margins from styles for the code element and make it a block element:
pre {
display: block;
width: auto;
max-height: 600px;
overflow: auto;
background-color: #eee;
border-radius: 10px;
border: 1px solid;
border-color: var(--cassiopeia-color-primary, #111 );
scrollbar-color: #ccc transparent;
margin: 20px 40px;
padding: 30px;
word-wrap: normal;
}
pre > code {
display: block;
font-size: 1.0rem;
text-indent: 0;
color: #111;
white-space: inherit;
}
The <code> element is inline by default.
all. I've spent a few hours on what should be very simple before figuring out that chrome was my problem. Essentially, I'm trying to format a link of type "submit" such that it no longer looks like a button. My CSS is:
a[type="submit"]:link,
a[type="submit"]:focus,
a[type="submit"]:visited,
a[type="submit"]:active {
background: #fff;
border: 0 !important;
cursor: pointer;
outline: none!important;
display: block;
padding: 0;
margin: 0 auto;
text-decoration: none;
width: 100%;
height: 100%;
}
Text
Weirdly, it looks fine in this code snippet. However, when I run this in my project, chrome does not remove the border around the link that appears when I set the type to "submit". It does successfully change the background color to white. Things look fine when opened in firefox. Is there any way to get around this in chrome?
You seem to be getting confused between an anchor and a button
:visited and :link are CSS pseudo-classes usually used for styling an anchor element.
type="submit" is for a button element. And while type can be set on an anchor element, it will only...
specify the media type in the form of a MIME type for the linked URL. It is purely advisory, with no built-in functionality.
button[type="submit"],
button[type="submit"]:focus,
button[type="submit"]:active {
background: #fff;
border: 0 !important;
cursor: pointer;
outline: none!important;
display: block;
padding: 0;
margin: 0 auto;
text-decoration: none;
width: 100%;
height: 100%;
}
<button name="set" type="submit" value="set">Text</button>
I have a CSS code that I use in my blogspot site to store all my code and technical snippets.
.code {
background:#dae6ef;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow-y: auto;
padding: 10px 5px 5px;
width: 90%;
}
.code:hover {
background-repeat:no-repeat;
}
If I go to my web page to select only all text inside the text box it will
select all text in the whole page.
Not like this
I wanted it to be selecting only what's inside the code box when I hit CTRL + a.
I want this
Is that possible in CSS? BTW I have no CSS background, I just got that code from the web.
Use input fields for your Text. by that pressing [CTRL] + [a] will only select the text inside the input. You can style input fields as you want so they can look like your text-
its very simple , just assign contenteditable="true" in your html div and thats it
also check the similar question in Edit contenteditable text with Ctrl-A (Select All) removing all child elements
I have placed two elements within a div, one is a textarea tag and the other a time tag. The time tag placed on the div. When the textarea has few words, the space between the textarea tag and the time is fine. But when the textarea contains many characters it covers the time tag as shown in the picture below
My challenge is that how can I maintain the distance dynamically between the textarea and the time tag despite the number of characters in the time tag.
This is the CSS code to show my attempt
.messages textarea[readonly] {
font-size: 15px;
font-family: "Helvetica Neue";
margin: 0 0 0.2rem 0;
color: #000;
word-wrap: break-word;
resize: none;
overflow: hidden;
min-height: 5px;
height: 1px;
min-height: inherit;
background: #c2dfff;
margin-bottom: 0px;
z-index: 10;
}
.messages time {
font-size: 1.0rem;
color: #696969;
float: right;
position: absolute;
bottom: 10px;
right: 0;
z-index: 40;
padding-right: 5px;
}
This is the HTML view
<div class="message">
<textarea readonly elastic>{{ msg.Content }}</textarea>
<time datetime="2009-11-13T20:00">{{ humanize(msg.Time) }}</time>
</div>
If you don't mind having sometimes the date below the text, this could be a solution:
https://jsfiddle.net/91czko52/1/
Basically, we're creating a phantom :after element inside the paraghaph (the phantom elem is the black one > should be transparent) of the same MAX date size (or maybe a little more). So the text will never touch the date.
NOTE: this also implies the use of a 'classic' paragraph element instead of textarea: I hope and guess you probably don't really need textarea.
A possible solution, by duplicating the date and using pseudo element. https://jsfiddle.net/jLo9rnfz/1/
Similar to above but not using the max-width, here you always have the correct width. Whichever you prefer :)
/* Using a trick by duplicating the date you can keep the space to ensure no wrapping */
.container {
background: red;
position: relative;
line-height: 1.4;
}
.item {
/* This ensure you always have the correct spave available and never wrap over the visible date */
background: orange;
color: transparent;
word-break: keep-all;
word-wrap: normal;
white-space: nowrap;
}
.item::before {
/* Here you have a duplicate date but this one is visible and correctly positioned
Adding the date to css can be done with js or php, google search will help you out there */
content: '5 days ago';
position: absolute;
color: black;
right: 0;
}
<div class="container">
paragraph here to test wrappingparagraph here to test wrappingparagraph here to test wrappingparagraph here to test wrapping
<span class="item">
5 days ago
</span>
</div>
Also consider checking out how it is done (inspect element) in existing apps that show similar behaviour, such as WhatsApp web.
I have applied the following html
<input type="image" value="Search" class="button" src="" onclick="this.form.searchword.focus();">
and this is the css...
#header form .button
{
/*border:solid 1px #999;*/
background:#664335 url(../images/btn-search.jpg) no-repeat ;
/*color:#fff;*/
display: inline-block;
font-size: 0;
width: 16px;
height: 20px;
vertical-align: middle;
background-color: transparent !important;
border: none;
}
I tried by removing the width and height and setting a padding value to it but no-success for this. As I searched different questions, I came to know that if src attribute is not applied then border will appear. But in my case the markup I can't edit, so is there any method to remove that bug.
Anyway I solved it by changing type image to button with jquery.
Apply CSS:
#header form .button {
border: solid 1px #999;
background: #664335 url(../images/btn-search.jpg) no-repeat;
color: #fff;
display: inline-block;
font-size: 0;
width: 16px;
height: 20px;
vertical-align: middle;
background-color: transparent !important;
// delete this
border: none;
}
This questing has been asked more than one time, and the best posible solution to this is just to use type="submit" instead of type="image"and just style it in CSS as you like
P.S. type="image" will not work in chrome as you want, try finding another way for your code, because that border is place holder for an error image like in IE widely known red cross in white box, its just there, you may try adding image that has "Search" written on it or maybe add 1x1 px transparent image there, but thats all.