Order of divs makes things disappear

[Chris]

The image EditKey1 was generated from the following code inside the Icenium Simulator. Note particular the three divs that are shown as content inside the "enterStatus" div. All three divs are seen in the image.

<div data-role="view" id="share" data-layout="default" class="share-view"
    data-init="app.viewModels.editYFKey.init" data-show="app.viewModels.editYFKey.show" data-model="app.viewModels.editYFKey">
    <header data-role="header">...</header>
    <div id="enterStatus" class="user-status-wrp" style="background-color: white; height:100%;" >
        <div class="user-share" style="width:100%;">
            <span id="YFKeyEdit_NameLabel" style="width: 98%; text-align: center;" ><b>Name:</b></span><br />
            <input id="YFKeyEdit_Name" placeholder="Enter a brief name for the key area here" style="width:99%;" required validationMessage="The name for this key must be given!" />
            <div id="newCommentValidation" class="validation">The name is required!</div>
        </div>
        <div class="user-share" style="width:100%;">
            <span id="YFKeyEdit_IntentionsLabel" style="width: 100%; text-align: center;" ><b>Intentions:</b></span>
            <a class="nav-button" data-align="right" data-role="button" onclick="AddIntention">Add</a>
            <span id="editYFKeyIntentions">
                <ul>
                        <li>test1</li>
                        <li>test2</li>
                        <li>test3</li>
                        <li>test4</li>
                </ul>
            </span>
        </div>
      <div class="user-share" style="width:100%;">
            <span id="YFKeyEdit_DescriptionLabel" style="width: 100%; text-align: center;" ><b>Description:</b></span><br />
            <span class="txtarea-wrp">
                <textarea id="YFKeyEdit_Description" rows="3" placeholder="Enter a description for the key area here" style="width:99%; resize: none;" required validationMessage="The name for this key must be given!" />
            </span>
            <div id="newCommentValidation" class="validation">The name is required!</div>
        </div>
    </div>
</div>

The image EditKey2 was generated from the following code inside the Icenium Simulator. Note that the ONLY difference is that the three divs are in a different order. NOTE THAT THE THIRD DIV JUST DISAPPEARS. Any idea what I am doing wrong, or what concept I'm missing? 

<div data-role="view" id="share" data-layout="default" class="share-view"
    data-init="app.viewModels.editYFKey.init" data-show="app.viewModels.editYFKey.show" data-model="app.viewModels.editYFKey">
    <header data-role="header">...</header>
    <div id="enterStatus" class="user-status-wrp" style="background-color: white; height:100%;" >
        <div class="user-share" style="width:100%;">
            <span id="YFKeyEdit_NameLabel" style="width: 98%; text-align: center;" ><b>Name:</b></span><br />
            <input id="YFKeyEdit_Name" placeholder="Enter a brief name for the key area here" style="width:99%;" required validationMessage="The name for this key must be given!" />
            <div id="newCommentValidation" class="validation">The name is required!</div>
        </div>
            <div class="user-share" style="width:100%;">
            <span id="YFKeyEdit_DescriptionLabel" style="width: 100%; text-align: center;" ><b>Description:</b></span><br />
            <span class="txtarea-wrp">
                <textarea id="YFKeyEdit_Description" rows="3" placeholder="Enter a description for the key area here" style="width:99%; resize: none;" required validationMessage="The name for this key must be given!" />
            </span>
            <div id="newCommentValidation" class="validation">The name is required!</div>
        </div>
        <div class="user-share" style="width:100%;">
            <span id="YFKeyEdit_IntentionsLabel" style="width: 100%; text-align: center;" ><b>Intentions:</b></span>
            <a class="nav-button" data-align="right" data-role="button" onclick="AddIntention">Add</a>
            <span id="editYFKeyIntentions">
                <ul>
                        <li>test1</li>
                        <li>test2</li>
                        <li>test3</li>
                        <li>test4</li>
                </ul>
            </span>
        </div>
    </div>
</div>

Thanks for your assistance!
CW

[Ivan Ivanov]

Hi Chris,

 The problem is that <textarea> is not a self-closing tag. It should be re-written as <textarea></textarea>.We will improve our code analysis to detect similar non self-closing tags cases.

If you still experience any issues, please write us back.

Regards,
Ivan Ivanov
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Missed our first webinar, watch it here.
Share feedback and vote for features on our Feedback Portal.

[Chris]

Ah - I see.

As always, you guys hit it out of the park for me. Thanks.

CW