I want to make Materialize.css cards editable on doubleclick. To do that I place input within card div, instead of p.
div.row
each cards
div.col.m4.s12
div.card.teal
div.card-content.white-text
if openCard
//input(type='text' value='#{text}')
textarea.materialize-textarea #{text}
else
p #{text}
problem is that input (and textarea) elements have extensive material design styling, including line underneath the input. In other occasions it looks very neat, but inside the card it is completely unnecessary.
Is there a way how to remove styling from input element, so it would be usable in such double-click edit mode?
Or maybe there are other solutions, how to do edit with double-click on card, that would not involve reuse of previously styled elements?
p.s. I run it within Meteor, and there is Jade preprocessor. However, those facts should not affect neither the question, nor answer.
If double-click isn't essential for other functionality, you can optimize by dropping both double-click and textarea leaving just <p> with added attribute contentEditable="true". Also use onBlur event listener to save edited text.
So in jade file you would have this:
div.row
each cards
div.col.m4.s12
div.card.teal
div.card-content.white-text
p(contentEditable="true") #{text}
And in template events this:
'blur .card-content p': function(event) {...}
P.S. While testing locally found out weird issue with chrome: additional div on enter - be sure to take it in account.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments