CODEWITHSUNDEEP
htmlcsscontenteditable
JadaLovelace
JadaLovelace

Reputation: 204

div with contenteditable turned on jumps when text is entered

I'm stumbling on a problem with some divs that have contenteditable set to true. Whenever i add text into the divs, they jump to a new position. Only when all divs are empty or all are filled with text, they have the same relative position.

You can find a JSfiddle with the code here.

What am i doing wrong?

Here is the code:

.editor_table {
  position: relative;
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.editor_row {
  display: table-row;
}
.editor_cell {
  display: table-cell;
  border: none;
  border-spacing: 5px;
  width: 22%;
  padding: 0px;
}
.editor_onvoldoende {
  background: #F00
}
.editor_voldoende {
  background: #FF0;
}
.editor_goed {
  background: #0F0;
}
.editor_uitstekend {
  background: #1B1;
}
.editor_onvoldoendead {
  background: #F00
}
.editor_voldoendead {
  background: #FF0;
}
.editor_goedad {
  background: #0F0;
}
.editor_uitstekendad {
  background: #1B1;
}
.editor_subject {
  position: relative;
  display: table-cell;
  border: none;
  width: 100px;
  padding: 10px;
  vertical-align: middle;
}
.editor_subject_input {
  position: relative;
  width: 100%;
  border: none;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.editor_inner_cell {
  margin: 5px;
  height: 90px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.05), 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.editor_textarea {
  position: relative;
  height: 100%;
  width: 100%;
  border: none;
}
<div class="editor_table">
  <div id="editor_a1" class="editor_row">
    <div class="editor_subject">
      <h3>
                        <input type="text" name="editor_subject1" class="editor_subject_input">
                        </h3>
    </div>
    <div id="editor_io" class="editor_cell">
      <div id="editor_io_content" class="editor_onvoldoendead editor_inner_cell" contenteditable="true">
      </div>
    </div>
    <div id="editor_iv" class="editor_cell">
      <div id="editor_iv_content" class="editor_voldoendead editor_inner_cell" contenteditable="true">
      </div>
    </div>
    <div id="editor_ig" class="editor_cell">
      <div id="editor_ig_content" class="editor_goedad editor_inner_cell" contenteditable="true">
      </div>
    </div>
    <div id="editor_iu" class="editor_cell">
      <div id="editor_iu_content" class="editor_uitstekendad editor_inner_cell" contenteditable="true">
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 178

Answers (2)

Rohit
Rohit

Reputation: 93

Replace your css class with below mention: I have added "float:left" and increased your width. 

.editor_cell {
display: table-cell;
border: none;
border-spacing: 5px;
width: 24%;
padding: 0px;
float: left;

}

Upvotes: 1

StardustGogeta
StardustGogeta

Reputation: 3406

/* ------------------ */
/* CSS for the editor */
/* ------------------ */

.editor_table {
    position: relative;
    display: flex;
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.editor_row {
    display: flex;
}

.editor_cell {
    border: none;
    border-spacing: 5px;
    width: 22%;
    padding: 0px;
    width: 90px;
}

.editor_onvoldoende {
    background: #F00
}

.editor_voldoende {
    background: #FF0;
}

.editor_goed {
    background: #0F0;
}

.editor_uitstekend {
    background: #1B1;
}

.editor_onvoldoendead {
    background: #F00
}

.editor_voldoendead {
    background: #FF0;
}

.editor_goedad {
    background: #0F0;
}

.editor_uitstekendad {
    background: #1B1;
}

.editor_subject {
    position: relative;
    border: none;
    width: 100px;
    padding: 10px;
    vertical-align: middle;
}

.editor_subject_input {
    position: relative;
    width: 100%;
    border: none;
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.05),0px 0px 10px 0px rgba(0,0,0,0.1);
}

.editor_inner_cell {
    margin: 4px;
    height: 90px;
    
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.05),0px 0px 10px 0px rgba(0,0,0,0.1);
}

.editor_textarea {
    position: relative;
    height: 100%;
    width: 100%;
    border: none;
}
<div class="editor_table">
                <div id="editor_a1" class="editor_row">
                    <div class="editor_subject">
                        <h3>
                        <input type="text" name="editor_subject1" class="editor_subject_input">
                        </h3>
                    </div>
                    <div id="editor_io" class="editor_cell">
                        <div id="editor_io_content" class="editor_onvoldoendead editor_inner_cell" contenteditable="true">
                        </div>
                    </div>
                    <div id="editor_iv" class="editor_cell">
                        <div id="editor_iv_content" class="editor_voldoendead editor_inner_cell" contenteditable="true">
                        </div>
                    </div>
                    <div id="editor_ig" class="editor_cell">
                        <div id="editor_ig_content" class="editor_goedad editor_inner_cell" contenteditable="true">
                        </div>
                    </div>
                    <div id="editor_iu" class="editor_cell">
                        <div id="editor_iu_content" class="editor_uitstekendad editor_inner_cell" contenteditable="true">
                        </div>
                    </div>
                </div>
                </div>

If you are able to make the switch, I would strongly recommend display: flexto solve this problem.

Upvotes: 0

Related Questions