CODEWITHSUNDEEP
jquerycss
fuzz
fuzz

Reputation: 215

Adding elements without affecting other elements

I have a simple app that adds new dates as divs to the aside when you click the jQuery datepicker, unfortunately it moves down elements every time in the main element. How would I stop this behavior?

https://codepen.io/fuzzalicious/pen/qBOLKgr

<aside>
        <p>Date: <input type="text" id="datepicker"></p>
        <div id="saved_dates_list"></div>
    </aside>

    <main>
        <h1 id="date">Select a date</h1>
        <h1 id="days"></h1>
    </main>

function addNewDate(dateText) {
    let newDate = $('<div class="saved_date">' + dateText + '</div>')
    $("#saved_dates_list").append(newDate);
}

I'm probably missing an easy float solution that will allow the date divs to remain as blocks rather then inline. It could probably be done by using a flex row layout, but I would want the main element to be centered to the page, not having width taken up by the aside.

Upvotes: 0

Views: 90

Answers (2)

Alexander Masan
Alexander Masan

Reputation: 76

I edited your styles and html, see if I understood the idea correctly Try this: https://codepen.io/opmasan/pen/VwvqBMB

<aside>
    <p>Date: <input type="text" id="datepicker"></p>
    <div id="saved_dates_list"></div>
</aside>

<main>
  <div  class="content">
    <h1 id="date">Select a date</h1>
    <h1 id="days"></h1>
  </div>
</main>


aside {
  position: absolute;
  z-index: 2;
}

Upvotes: 1

John
John

Reputation: 5335

Possibly add float: left; to .saved_date in CSS

Upvotes: 0

Related Questions