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.
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?
Thanks for your assistance!
CW
<
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
>
CW