I have a div inside my editable container and when I press enter the div duplicate and I end up have two divs one on the top of the other.
the container have contenteditable as true, this might be causing this issue.
but is there anyway i can prevent this
<div class="singlediv"></div>
with the css
.singlediv {
border-color: rgb(155, 196, 243);
border: dotted 1px;
width: 100%;
padding: 10px;
min-height: 75px;
}
code here
You can have a function like following in your js :-
const handleEnter=(e)=>{
if(e.keyCode===13)
{
e.preventDefault();
}
}
And your html will be-
<div contenteditable="true" onkeypress="handleEnter(event)">
<div class="singlediv"></div>
</div>
The function handleEnter ensures to prevent the the default behaviour when pressing enter button on a div with .contentEditable attribute. The key code for Enter key is 13.
This is more of a hack. If you can prevent having the inner div, then do so.
That's really simple, if you make contenteditable with a div withing then you press enter an another div will be created. This code run corretly :
.singlediv {
border-color: rgb(155, 196, 243);
border: dotted 1px;
width: 100%;
padding: 10px;
min-height: 75px;
}
<div contenteditable="true" class="singlediv"></div>
Related
I followed the instructions I found online when using :target, but it's not working. When the first link is clicked, I want the background color and font color of #div1 to change. When the second link is clicked, I want the border of #div2 to change. But nothing changes when I click either of the links.
What am I doing wrong?
a.div1:target {
background-color: blue;
color: yellow;
}
a.div2:target {
border: 10px dotted green;
}
div {
width: 300px;
border: 1px solid;
padding: 50px;
margin: 20px;
}
First Link
Second Link
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
:target matches the element that is linked to, not the link itself.
div#div1:target {
background-color: blue;
}
I have this almost good piece of code. Almost because IE 11 breaks it:
.textarea {
text-align: left;
background: white;
border: 1px solid grey;
border-style: inset;
height: 150px;
overflow-y: auto;
word-wrap: break-word;
width: 400px;
}
<div class='textarea' contenteditable='true' id='sec1'>blabla</div>
Why does the text (first line) move down after I hit return? I want either the text to appear at first where it will drop to, or just stay there. This will happen even if the 'first line' is entered manually, with no initial content.
This happens because IE adds p when you press enter. Using Shift + Enter will enter a br like the rest of the browsers.
Alternatively you could style the p elements in there to not have top margin
.textarea {
text-align: left;
background: white;
border: 1px solid grey;
border-style: inset;
height: 150px;
overflow-y: auto;
word-wrap: break-word;
width: 400px;
}
.textarea p{margin-top:0;}
<div class='textarea' contenteditable='true' id='sec1'>blabla</div>
But the basic problem is that IE creates different HTML.
Also have a look at avoid ie contentEditable element to create paragraphs on Enter key which comes with its own issues (explained in the answer & comments there)
EDIT from op
First thanks for the great answer. Second, this is how I fixed this using JS:
this.iebreak = function (event) {
if (event.which == 13 && !event.shiftKey) {
event.preventDefault();
this.field.appendChild(document.createElement("br"));
}
}
and of course add this if your' on i.e.:
this.field.addEventListener('keydown',function(event){thisObject.iebreak(event);});
I have problem with using animation in css and event handler in JS.
I have to specific styles for my button (normal and with :active suffix). This solution let's me simulate 'clicking button'. In Html(this is angular directive) I have directive ng-click on that button but it only runs event when I click body of a button not border. But my css sets pointer on the border and there is animation an on clicking border too.
I am looking for the best practice/solution to repair that incident. Maybe I must leave css style with active suffix or add something to my styles.
CSS
#addButton {
padding: 5px;
float: left;
background: linear-gradient(#92AFDE, #668FED);
border: solid 2px #14438F;
margin-left: 10px;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
}
#addButton:ACTIVE {
transform: translateY(4px);
}
HTML
<div class="card">
<img ng-click="selectCard()" style="width: 150px; height: 200px;" ng-src="cards/\{{cardId}}.png"></img>
<button ng-click="addCard()" id="addButton">Add<div class="count">0</div></button>
<div id="delButton">X</div>
</div>
Because when you specify border it comes after the actual width of the element.
Use
#addButton{
box-sizing:border-box
}
This css property will merge the border space in actual width.
Faced the same issue on a project I am developing. I used the above answer https://stackoverflow.com/a/38826326/7622397. But it didn't work. Clicking on border does not fire the click event. But it's important to add box-sizing: border-box (as mentioned in the answer) to make sure the below mentioned workaround works
The reason mentioned in the comment seems to be correct
OK i know where is the problem. If i click on the button the "activate" suffix moves the button down and browser don't notice click on this button because pointer is outside my div (after moving)
As a workaround, I created a div outside the button, gave a padding-top css (value is same or greater as the height of translateY) and give the onClick event to the div and not the button. I know, it's not a tidy fix, but it certainly works.
Code for reference
.sw-form-button-card {
padding: 5px 10px;
text-decoration: none;
background: #668ad8;
color: #FFF;
border: none;
box-sizing:border-box;
border-bottom: solid 3px #627295;
border-radius: 3px;
cursor: pointer;
}
.sw-form-button-card:active {
-ms-transform: translateY(2px);
-webkit-transform: translateY(2px);
transform: translateY(2px);
border-bottom: none;
}
HTML part:
<div data-bind="click: () => openDDDialog()" style="padding-top: 5px;">
<button class="sw-form-button-card">
<span style="font-size: 15px;" data-bind="text: 'Button text'"></span></div>
</button>
</div>
in my html page I have div with css:
padding: 0px;
color: rgb(51, 51, 51);
background: none repeat scroll 0% 0% rgb(255, 255, 255);
position: relative;
overflow: visible;
in this div I have form and horizontal line:
<hr color="#424242" size="2">
How can I add this this line after form ? his example work on bigger display but when I see my page on the phone line is next to div
Unless you have a special reason to use presentational and nonstandard markup like <hr color="#424242" size="2">, omit this element and use CSS instead to draw a bottom border on the form element:
form {
border-bottom: solid #424242 2px;
}
If desired, add some padding-bottom and/or margin-bottom to this rule, to create vertical spacing before and/or after the line, respectively.
If you need to use the markup, see my comment to the question. But whatever the cause of the problem might be, the CSS approach should avoid it, since at attaches the horizontal line to the form element.
You can use the CSS:
clear: both;
To make a div clear (or go under) another element.
Is this what you mean?
hr {
border-bottom: 1px solid #424242;
clear: both;
display: block;
margin-bottom: 10px;
padding-top: 10px;
width: 100%;
}
I want to create something like quicknote and at first I thought it will be easy task.
HTML
<div class="quicknote">
<textarea></textarea>
</div>
CSS
.quicknote
{
width: 308px;
height: 400px;
background: url('../images/note-bg.gif') 0 0;
outline: none;
padding: 10px;
}
.quicknote textarea
{
border: 0;
width: 100%;
height: 100%;
resize: none;
background: transparent;
outline: none;
font: 12px/22px Arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px dashed #aeaeae;
text-align: baseline;
}
Here is div which contains textarea. Textarea lineheight is set to 22px, when enter is pressed cursor is positioned on right place. (I know text is on the middle of the line).
But when scroll happen it seems text is not scrolled for 22px. Check out screen cast video to see what happend.
http://screencast.com/t/RYsPD5DH
I probably wouldn't see this without those lines in background. Does anyone know what is wrong here?
SOLUTION
I think that I have solution but don't ask me why this works. With little help of jQuery:
$textarea.on('scroll', function() {
$textarea.scrollTop($textarea.prop("scrollHeight"));
})
and experimenting with textarea height, on example 332px, 354px, it seems it works well. Because 332 isn't divided with 22, remineder is 2, when I changed above jQuery with:
$textarea.on('scroll', function() {
$textarea.scrollTop($textarea.prop("scrollHeight")+2);
})
all start to work as expected as you can see here http://screencast.com/t/pfhNJoUrSQS.
It appears to be working correctly with a 22px line height; however, you may want to remove the overflow:hidden property so that you can view scrolling.