Wednesday

breaking the long row list based on the screen size

Issue

The blue color row-based list (the divs inside a div with id phrase) is not breaking on the next line based on the screen size. I am wondering what additional changes I need to make in the following CSS to accomplish this.

#phrase {
            color: #fff;
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: row;
            margin: 2rem 0;
        }

Here is my code snippet:

 $(".words").draggable({
        revert: function (event, ui) {
            var bRevertingPhrase = this.closest("#drop-em");

            if (!bRevertingPhrase.length) {
                var phraseID = $(this).data("id");
                var phraseHomeID = $(this).parent().data("id");

                //If the child and parent ids don't match, we move the child to the correct parent
                if (phraseID !== phraseHomeID) {
                    var correctCell = $("#phrase").find("div[data-id='" + phraseID + "']");
                    correctCell.prepend(this);
                }
            }
            return !event;
        }
    });
    $("#drop-em > div").droppable({
        drop: function (ev, ui) {
            $(ui.draggable)
                .detach()
                .css({ top: 0, left: 0 })
                .appendTo($(this).find(".content:empty"));
        }
    });
    $("#phrase > div").droppable({
        drop: function (ev, ui) {
            $(ui.draggable).detach().css({ top: 0, left: 0 }).prependTo(this);
        }
    });

    const myButton = document.querySelector("#move-text");
    myButton.addEventListener("click", () => {
        fill();
    });

    function fill() {
        const cells = document.querySelectorAll("#phrase > div > span");
        var destination = 0;
        var newLoc = "";
        cells.forEach((cell, index) => {

            newLoc = document.querySelector(
                ".item:nth-child(" + cell.dataset.destination + ") .content ");

            newLoc.append(cell);




            newLoc.classList.add("moved");
        });
    }

        html {
            box-sizing: border-box;
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        body {
            counter-reset: columnCount 1 alphaCount;
        }

        h1 {
            text-align: center;
        }

        .wrap {
            display: flex;
            gap: 2rem;
        }

        .grid {
            margin: auto;
            display: grid;
            flex: 1 0 0;
            grid-template-columns: repeat(12, 1fr);
            padding-top: 1.5rem;
        }

        .item {
            position: relative;
            background-color: #f9f9f9;
            border: 1px solid grey;
            aspect-ratio: 1/1;
            counter-increment: columnCount;
            min-width: 0;
            transition: background 1s ease;
        }

        .item:nth-of-type(12n + 1) {
            counter-increment: alphaCount;
        }

        .item:nth-of-type(12n + 1)::before {
            content: counter(alphaCount, upper-alpha);
            position: absolute;
            display: flex;
            align-items: center;
            top: 0;
            bottom: 0;
            left: -1.75rem;
            color: red;
            pointer-events: none;
        }

        .item:nth-of-type(n + 13)::after {
            display: none;
        }

        .item::after {
            content: counter(columnCount);
            position: absolute;
            left: 0;
            right: 0;
            text-align: center;
            top: -1.75rem;
            color: red;
            pointer-events: none;
        }

        .content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 100%;
            overflow: auto;
            color: #000;
            padding: 1rem;
            word-wrap: break-word;
        }

        .words {
            cursor: move;
            transition: padding 0.5s ease;
        }

        .content:has(.ui-draggable-dragging) {
            overflow: visible;
        }

        .ui-droppable-active .content {
            overflow: visible;
        }

        .words.ui-draggable-dragging {
            background: blue;
            padding: 5px 10px;
            border-radius: 6px;
            z-index: 999;
            color: #fff;
            display: block;
            width: 50px;
            height: 50px;
            overflow: hidden;
        }

        #phrase {
            color: #fff;
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: row;
            margin: 2rem 0;
        }

        #phrase>div {
            margin: 0 10px 10px;
            padding: 5px 10px;
            background: #007bff;
            border: 2px solid #007bff;
            border-radius: 6px;
            color: #fff;
            min-width: 100px;
        }

        #phrase>div:empty {
            background: #fff;
            border-style: dashed;
            padding: 0px 25px;
            min-height: 30px;
        }

        .moved {
            animation: fade 3s ease;
        }

        @keyframes fade {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
                background: red;
            }
        }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    
    <div id="phrase">

        <div data-id="1"><span data-id="1" data-destination="85" class="words">(Sq#1)</span></div>
        <div data-id="2"><span data-id="2" data-destination="86" class="words"> (Sq#2)</span></div>
        <div data-id="3"><span data-id="3" data-destination="87" class="words"> (Sq#3)</span></div>
        <div data-id="4"><span data-id="4" data-destination="88" class="words">(Sq#4)</span></div>
        <div data-id="5"><span data-id="5" data-destination="89" class="words">(Sq#5)</span></div>
        <div data-id="6"><span data-id="6" data-destination="90" class="words">(Sq#6)</span></div>

        <div data-id="7"><span data-id="7" data-destination="73" class="words">(Sq#7)</span></div>
        <div data-id="8"><span data-id="8" data-destination="74" class="words">(Sq#8)</span></div>
        <div data-id="9"><span data-id="9" data-destination="75" class="words">(Sq#9)</span></div>
        <div data-id="10"><span data-id="10" data-destination="76" class="words">(Sq#10)</span></div>
        <div data-id="11"><span data-id="11" data-destination="77" class="words">(Sq#11)</span></div>
        <div data-id="12"><span data-id="12" data-destination="78" class="words">(Sq#12)</span></div>
        <div data-id="13"><span data-id="13" data-destination="61" class="words">Square 13</span></div>
        <div data-id="14"><span data-id="14" data-destination="62" class="words">Square#14</span></div>
        <div data-id="15"><span data-id="15" data-destination="63" class="words">Square#15</span></div>
        <div data-id="16"><span data-id="16" data-destination="64" class="words">Square#16</span></div>
        <div data-id="17"><span data-id="17" data-destination="65" class="words">Square#17</span></div>
        <div data-id="18"><span data-id="18" data-destination="66" class="words">Square#18</span></div>
        <div data-id="19"><span data-id="19" data-destination="49" class="words">Square#19</span></div>
        <div data-id="20"><span data-id="20" data-destination="50" class="words">Square#20</span></div>
        <div data-id="21"><span data-id="21" data-destination="51" class="words">Square#21</span></div>
        <div data-id="22"><span data-id="22" data-destination="52" class="words">Square#22</span></div>
        <div data-id="23"><span data-id="23" data-destination="53" class="words">Square#23</span></div>
        <div data-id="24"><span data-id="24" data-destination="54" class="words">Square#24</span></div>
        <div data-id="25"><span data-id="25" data-destination="37" class="words">Square#25</span></div>
        <div data-id="26"><span data-id="26" data-destination="38" class="words">Square#26</span></div>
        <div data-id="27"><span data-id="27" data-destination="39" class="words">Square#27</span></div>
        <div data-id="28"><span data-id="28" data-destination="40" class="words">Square#28</span></div>
        <div data-id="29"><span data-id="29" data-destination="41" class="words">Square#29</span></div>
        <div data-id="30"><span data-id="30" data-destination="42" class="words">Square#30</span></div>

        <div data-id="31"><span data-id="31" data-destination="25" class="words">Square#31</span></div>
        <div data-id="32"><span data-id="32" data-destination="26" class="words">Square#32</span></div>
        <div data-id="33"><span data-id="33" data-destination="27" class="words">Square#33</span></div>
        <div data-id="34"><span data-id="34" data-destination="28" class="words">Square#34</span></div>
        <div data-id="35"><span data-id="35" data-destination="29" class="words">Square#35</span></div>
        <div data-id="36"><span data-id="36" data-destination="30" class="words">Square#36</span></div>

        <div data-id="37"><span data-id="37" data-destination="13" class="words">Square#37</span></div>
        <div data-id="38"><span data-id="38" data-destination="14" class="words">Square#38</span></div>
        <div data-id="39"><span data-id="39" data-destination="15" class="words">Square#39</span></div>
        <div data-id="40"><span data-id="40" data-destination="16" class="words">Square#40</span></div>
        <div data-id="41"><span data-id="41" data-destination="17" class="words">Square#41</span></div>
        <div data-id="42"><span data-id="42" data-destination="18" class="words">Square#42</span></div>

        <div data-id="43"><span data-id="43" data-destination="1" class="words">Square#43</span></div>
        <div data-id="44"><span data-id="44" data-destination="2" class="words">Square#44</span></div>
        <div data-id="45"><span data-id="45" data-destination="3" class="words">Square#45</span></div>
        <div data-id="46"><span data-id="46" data-destination="4" class="words">Square#46</span></div>
        <div data-id="47"><span data-id="47" data-destination="5" class="words">Square#47</span></div>
        <div data-id="48"><span data-id="48" data-destination="6" class="words">Square#48</span></div>



        <div data-id="49"><span data-id="49" data-destination="91" class="words">Square#49</span></div>
        <div data-id="50"><span data-id="50" data-destination="92" class="words">Square#50</span></div>
        <div data-id="51"><span data-id="51" data-destination="93" class="words">Square#51</span></div>
        <div data-id="52"><span data-id="52" data-destination="94" class="words">Square#52</span></div>
        <div data-id="53"><span data-id="53" data-destination="95" class="words">Square#53</span></div>
        <div data-id="54"><span data-id="54" data-destination="96" class="words">Square#54</span></div>

        <div data-id="55"><span data-id="55" data-destination="79" class="words">Square#55</span></div>
        <div data-id="56"><span data-id="56" data-destination="80" class="words">Square#56</span></div>
        <div data-id="57"><span data-id="57" data-destination="81" class="words">Square#57</span></div>
        <div data-id="58"><span data-id="58" data-destination="82" class="words">Square#58</span></div>
        <div data-id="59"><span data-id="59" data-destination="83" class="words">Square#59</span></div>
        <div data-id="60"><span data-id="60" data-destination="84" class="words">Square#60</span></div>

        <div data-id="61"><span data-id="61" data-destination="67" class="words">Square#61</span></div>
        <div data-id="62"><span data-id="62" data-destination="68" class="words">Square#62</span></div>
        <div data-id="63"><span data-id="63" data-destination="69" class="words">Square#63</span></div>
        <div data-id="64"><span data-id="64" data-destination="70" class="words">Square#64</span></div>
        <div data-id="65"><span data-id="65" data-destination="71" class="words">Square#65</span></div>
        <div data-id="66"><span data-id="66" data-destination="72" class="words">Square#66</span></div>

        <div data-id="67"><span data-id="67" data-destination="55" class="words">Square#67</span></div>
        <div data-id="68"><span data-id="68" data-destination="56" class="words">Square#68</span></div>
        <div data-id="69"><span data-id="69" data-destination="57" class="words">Square#69</span></div>
        <div data-id="70"><span data-id="70" data-destination="58" class="words">Square#70</span></div>
        <div data-id="71"><span data-id="71" data-destination="59" class="words">Square#71</span></div>
        <div data-id="72"><span data-id="72" data-destination="60" class="words">Square#72</span></div>

        <div data-id="73"><span data-id="73" data-destination="43" class="words">Square#73</span></div>
        <div data-id="74"><span data-id="74" data-destination="44" class="words">Square#74</span></div>
        <div data-id="75"><span data-id="75" data-destination="45" class="words">Square#75</span></div>
        <div data-id="76"><span data-id="76" data-destination="46" class="words">Square#76</span></div>
        <div data-id="77"><span data-id="77" data-destination="47" class="words">Square#77</span></div>
        <div data-id="78"><span data-id="78" data-destination="48" class="words">Square#78</span></div>

        <div data-id="79"><span data-id="79" data-destination="31" class="words">Square#79</span></div>
        <div data-id="80"><span data-id="80" data-destination="32" class="words">Square#80</span></div>
        <div data-id="81"><span data-id="81" data-destination="33" class="words">Square#81</span></div>
        <div data-id="82"><span data-id="82" data-destination="34" class="words">Square#82</span></div>
        <div data-id="83"><span data-id="83" data-destination="35" class="words">Square#83</span></div>
        <div data-id="84"><span data-id="84" data-destination="36" class="words">Square#84</span></div>

        <div data-id="85"><span data-id="85" data-destination="19" class="words">Square#85</span></div>
        <div data-id="86"><span data-id="86" data-destination="20" class="words">Square#86</span></div>
        <div data-id="87"><span data-id="87" data-destination="21" class="words">Square#87</span></div>
        <div data-id="88"><span data-id="88" data-destination="22" class="words">Square#88</span></div>
        <div data-id="89"><span data-id="89" data-destination="23" class="words">Square#89</span></div>
        <div data-id="90"><span data-id="90" data-destination="24" class="words">Square#90</span></div>

        <div data-id="91"><span data-id="91" data-destination="7" class="words">Square#91</span></div>
        <div data-id="92"><span data-id="92" data-destination="8" class="words">Square#92</span></div>
        <div data-id="93"><span data-id="93" data-destination="9" class="words">Square#93</span></div>
        <div data-id="94"><span data-id="94" data-destination="10" class="words">Square#94</span></div>
        <div data-id="95"><span data-id="95" data-destination="11" class="words">Square#95</span></div>
        <div data-id="96"><span data-id="96" data-destination="12" class="words">Square#96</span></div>


    </div><!-- end of phrase class -->
    
     <button id="move-text" type="button">Move blue square content inside each square!</button>
    <div class="wrap">
     
        <div id="drop-em" style="margin-left: 30px;" class="grid">

            <div class="item"><!-- 16th div -->
                <div class="content"></div><!-- must have no spaces inside .content -->
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item"><!-- 20th block -->
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item"><!-- another 20th div set -->
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item"><!-- Another 20th div -->
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item"><!-- 20th div from bottom -->
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
            <div class="item">
                <div class="content"></div>
            </div>
        </div>
    </div>

Solution

Use the flex-wrap: wrap property for the breaking div on the next line based on the screen size.

#phrase {
    color: #fff;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    margin: 2rem 0;
}

Answered By - Prashant

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Wednesday

breaking the long row list based on the screen size

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels