Order of divs makes things disappear

3 posts, 2 answers
  1. Answer
    Chris
    Chris avatar
    29 posts
    Member since:
    Mar 2009

    Posted 24 Jun 2013 Link to this post

    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
  2. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    42 posts

    Posted 26 Jun 2013 Link to this post

    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.
  3. Answer
    Chris
    Chris avatar
    29 posts
    Member since:
    Mar 2009

    Posted 26 Jun 2013 Link to this post

    Ah - I see.

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

    CW
Back to Top