要素がDIVの外に出る

Question

スタイリングの問題がどこにあるかわからないので、私は非常に迷惑になります。私のbtnBox divはnoteBoxes divの外に出ています。私は1時間以上それを使いこなしましたが、まだ問題を解決できません.JSについて心配しないでください。私は divをnoteBoxes divとテキストエリアの右側に配置するのに助けが必要です。どんな助けもありがとうございます。

/* textarea styling for notes */ 

.notesE { 
    width: 478px; 
    max-width: 478px; 
    height: 100px; 
    margin: 0 auto; 
    margin-left: 0; 
    border: none; 
    padding: 5px; 
    overflow: hidden; 
    resize: none; 
    clear: both; 
} 

.btnBox { 
    height: 100px; 
    border: none; 
    width: 11px; 
    clear: both; 
    top: 0px; 
} 


/* remove note button */ 

.removeNote { 
    width: 10px; 
    height: 50px; 
    margin-left: 0; 
    margin-right: 0; 
    background-color: #fc7979; 
    border: none; 
    cursor: pointer; 
    margin-top: -4px; 
    margin-left: 0; 
    clear: both; 
} 

.saveNote { 
    width: 10px; 
    height: 50px; 
    margin-left: 0; 
    margin-right: 0; 
    background-color: #46e68b; 
    border: none; 
    cursor: pointer; 
    clear: both; 
} 


/* div that holds note and button and date */ 

.noteBoxes { 
    width: 510px; 
    height: 128px; 
    margin-bottom: 15px; 
} 

.dateTxt { 
    margin-bottom: 0; 
    margin-top: 0; 
    color: #ccc; 
} 

<div id="custNotes" style="width: 550px; margin: 0 auto;"> 
    <h3> 
    <!-- Customer Value-->Notes</h3> 
    <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button> 


    <p id="Message"></p> 
    <div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;"> 
    <div id="notesBox" style="padding: 10px; width: 510px;"> 
     <!-- <div class="btnBox" style="width: 10px; height: 100px;"> 
     <button class="saveNote"></button> 
     <button class="removeNote" style="margin-top: -4px; margin-left: 0;"></button> 
     </div> --> 
    </div> 
    </div> 
</div> 

Answer 1

あなたはnoteboxesに設定されたデフォルトの高さを持っているように見えるので、ボタンボックスをレンダリングするときには、デフォルトの高さを超えてレンダリングします。デフォルトの高さを削除すると、ノートボックスが伸びてボタンボックスが含まれます。それはあなたが探しているものですか？

var noteCount = 0; 
 

 
function addNote(style) { 
 

 
    const notesBox = document.getElementById('notesBox'); 
 
    var noteBoxes = document.createElement('div'); 
 
    textarea = document.createElement('textarea'), 
 
    btnBox = document.createElement('div'), 
 
    save = document.createElement('button'), 
 
    remove = document.createElement('button'), 
 
    today = new Date(); 
 

 
    var txtElement = document.createElement('p'); 
 
    var dateString = '' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes(); 
 
    txtElement.innerHTML = dateString; 
 
    txtElement.setAttribute('class', style); 
 
    txtElement.className = 'dateTxt'; 
 
    txtElement.setAttribute('id', style); 
 
    txtElement.id = 'note ' + noteCount + ' date'; 
 
    txtElement.setAttribute('data-month', today.getMonth() + 1); 
 
    txtElement.setAttribute('data-year', today.getFullYear()); 
 
    // div that holds each note and remove button and date 
 
    notesBox.appendChild(noteBoxes); 
 
    noteBoxes.setAttribute('class', style); 
 
    noteBoxes.className = 'noteBoxes'; 
 
    noteBoxes.setAttribute('id', style); 
 
    noteBoxes.id = 'note box ' + noteCount; 
 
    noteBoxes.appendChild(txtElement); 
 
    noteBoxes.appendChild(textarea); 
 
    noteBoxes.appendChild(btnBox); 
 

 
    // note that is added 
 
    textarea.setAttribute('class', style); 
 
    textarea.className = 'notesE'; 
 
    textarea.setAttribute('id', style); 
 
    textarea.id = 'note' + noteCount; 
 

 
    // button box 
 
    btnBox.setAttribute('class', style); 
 
    btnBox.className = 'btnBox'; 
 
    btnBox.setAttribute('id', style); 
 
    btnBox.id = 'btnBox' + noteCount; 
 
    btnBox.appendChild(save); 
 
    btnBox.appendChild(remove); 
 

 
    // save button 
 
    save.setAttribute('title', style); 
 
    save.title = 'save'; 
 
    save.setAttribute('class', style); 
 
    save.className = 'saveNote'; 
 
    save.setAttribute('id', style); 
 
    save.id = '+Note' + noteCount; 
 

 
    // button to remove note 
 
    remove.setAttribute('title', style); 
 
    remove.title = 'delete'; 
 
    remove.setAttribute('class', style); 
 
    remove.className = 'removeNote'; 
 
    remove.setAttribute('id', style); 
 
    remove.id = '-Note' + noteCount; 
 
    remove.onclick = function() { 
 
    // confirm alert dialog 
 
    // deletes the note if user selects 'OK' 
 
    if (confirm("Are you sure you want to delete this note?") == true) { 
 
     // removes the noteBoxes div of which the button clicked is in. 
 
     this.parentElement.remove(); 
 
    } 
 
    } 
 
    noteCount++; 
 
    console.log(textarea.id); 
 

 

 
    var month = document.getElementById('selectMonth'); 
 
    var year = document.getElementById('selectYear'); 
 
    var searchDate = document.getElementById('searchDate'); 
 

 

 

 

 
}

/* textarea styling for notes */ 
 

 
.notesE { 
 
    width: 478px; 
 
    max-width: 478px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
    margin-left: 0; 
 
    border: none; 
 
    padding: 5px; 
 
    overflow: hidden; 
 
    resize: none; 
 
    clear: both; 
 
} 
 

 
.btnBox { 
 
    height: 100px; 
 
    border: none; 
 
    width: 11px; 
 
    clear: both; 
 
    top: 0px; 
 
} 
 

 

 
/* remove note button */ 
 

 
.removeNote { 
 
    width: 10px; 
 
    height: 50px; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    background-color: #fc7979; 
 
    border: none; 
 
    cursor: pointer; 
 
    margin-top: -4px; 
 
    margin-left: 0; 
 
    clear: both; 
 
} 
 

 
.saveNote { 
 
    width: 10px; 
 
    height: 50px; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    background-color: #46e68b; 
 
    border: none; 
 
    cursor: pointer; 
 
    clear: both; 
 
} 
 

 

 
/* div that holds note and button and date */ 
 

 
.noteBoxes { 
 
    width: 510px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.dateTxt { 
 
    margin-bottom: 0; 
 
    margin-top: 0; 
 
    color: #ccc; 
 
}

<div id="custNotes" style="width: 550px; margin: 0 auto;"> 
 
    <h3> 
 
    <!-- Customer Value-->Notes</h3> 
 
    <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button> 
 

 

 
    <p id="Message"></p> 
 
    <div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;"> 
 
    <div id="notesBox" style="padding: 10px; width: 510px;"> 
 
     <!-- <div class="btnBox" style="width: 10px; height: 100px;"> 
 
     <button class="saveNote"></button> 
 
     <button class="removeNote" style="margin-top: -4px; margin-left: 0;"></button> 
 
     </div> --> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私はあなたが探している正確にわからないが、私はあなたがテキストエリアの右側にあるテキストエリアおよびそれらの2つのボタンが欲しいとします。次の変更を確認してください - >

/* textarea styling for notes */ 
 

 
.notesE { 
 
    width: 478px; 
 
    max-width: 478px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
    margin-left: 0; 
 
    border: none; 
 
    padding: 5px; 
 
    overflow: hidden; 
 
    resize: none; 
 
    clear: both; 
 
} 
 

 
.btnBox { 
 
    height: 100px; 
 
    border: none; 
 
    width: 11px; 
 
    clear: both; 
 
    top: 0px; 
 
    float:right; 
 
} 
 

 

 
/* remove note button */ 
 

 
.removeNote { 
 
    width: 10px; 
 
    height: 50px; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    background-color: #fc7979; 
 
    border: none; 
 
    cursor: pointer; 
 
    margin-top: -4px; 
 
    margin-left: 0; 
 
    clear: both; 
 
} 
 

 
.saveNote { 
 
    width: 10px; 
 
    height: 50px; 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
    background-color: #46e68b; 
 
    border: none; 
 
    cursor: pointer; 
 
    clear: both; 
 
} 
 

 

 
/* div that holds note and button and date */ 
 

 
.noteBoxes { 
 
    width: 510px; 
 
    height: 128px; 
 
} 
 

 
.dateTxt { 
 
    margin-bottom: 0; 
 
    margin-top: 0; 
 
    color: #ccc; 
 
} 
 

 
.notesScroll{ 
 
    width: 510px; 
 
    background-color: #606060; 
 
    margin: 0 auto; 
 
    height: 100px; 
 
    } 
 
}

<div id="custNotes" style="width: 550px; margin: 0 auto;"> 
 
    <h3> 
 
    <!-- Customer Value-->Notes</h3> 
 
    <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button> 
 

 

 
    <p id="Message"></p> 
 
    <div class="notesScroll" > 
 
     <div id="notesBox" class= noteBoxes> 
 
     <div class="btnBox" > 
 
      <button class="saveNote"></button> 
 
      <button class="removeNote" style="margin-top: -4px; margin-left: 0;">  </button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>