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 pletely 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.

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 pletely 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.

• javascript
• css
• materialize

4 Answers 4

just add class :browser-default to your element

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.

If you want to remove predefined styling from any element either add the overwrite into the attributes

<div style="border:none;"></div>

or overwrite using CSS

#element {
    border: none;
}

if CSS overwrite doesn't automatically work use !important.

#element {
    border: none !important;
}

With this code you can remove MaterializeCSS:

<style type="text/css">

  .MyDiv input[type=text]:not(.browser-default){
    padding: 1% 6%;
     box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;  
    height: 33px;
}

.MyDiv input[type=text]:not(.browser-default):focus:not([readonly]){
           -moz-box-shadow: 0 0 8px #88D5E9;
    -webkit-box-shadow: 0 0 8px #88D5E9;
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
</style>


<div class="MyDiv">
    <input type="text" name="username">
</div>