Format Issue? Weird Placeholder Results

**Paul Bruneau** · 06 December 2021, 02:53 PM

Hi Everybody,

I have a contact.htm page with two PopUp boxes. Each of the PopUp boxes are supposed to display a different form. Each is also identified by a unique layer name, such as "contacts_comments". I have attached the "contacts_comments" layer below. The specific PopUps are hidden until accessed through a button on a menu.

Click image for larger version.

Name: Comments.jpg
Views: 42
Size: 48.2 KB
ID: 131120

Click image for larger version.

Name: Form.jpg
Views: 37
Size: 33.5 KB
ID: 131121

The result is what appears on the second attachment. The form itself is a combination of bootstrap, json, and PHP. I've successfully tested the form as a stand alone several times.
The <head> and <body> code has been entered in the Placeholder Tab on the Web Properties dialog. This Placeholder is set on the box in the contacts_comments layer.
So all of this has brought up two concerns so far:

When the contact_comments PopUp is selected, the form appears well off-center on the page. I imagine this is something in the <head> or <body> statements, but I have no idea what to look for or correct. Any suggestions on that? I want that form to appear either inside the "Your Comments" box, or at least in the same position.

The other concern is why would the form behave so independently and not be restrained by the contact_comments PopUp box, since the placeholder is placed inside that box?

Any comment will be appreciated, and I do respect any time you may allow for me.

Thanks,
Paul

**Acorn** · 06 December 2021, 03:23 PM

Paul, if you have put any HTML layout into the head, it doesn't know about the Placeholder size or position. This affects both your observations.

Acorn

**Paul Bruneau** · 06 December 2021, 06:59 PM

Hi Acorn,

Naw, the only statements in the
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
<link rel="stylesheet" href="form.css" >
<script src="form.js"></script>
</head>
I don't recognize any of those statements as being HTML layout stuff. I notice also that the text lines have an underline. Don't know what prompts that either.

Thank you,
Paul

**Acorn** · 06 December 2021, 09:39 PM

Paul, Xara may be loading jQuery 3.6.0, overriding your one.
Omit yours.
Xara also loads ani.css so either may be causing a conflict.

Acorn

**Paul Bruneau** · 08 December 2021, 01:29 PM

Hi Acorn,

Thank you for your reply, and the time you have given to this.

[Re: jQuery 3.6.0] I have searched for "jQuery" in the folder containing all of the files used by my project. jQuery appears only once (that I've found) and that is in the form.js file. That statement is

jQuery.each(data.errors,function(key,val)

I don't see any other reference to loading specific versions of jQuery. I have no idea of what version of jQuery is being loaded.
I've looked through the ani.css file and I have no idea what part may be causing a conflict. I'm not aware of any animation involved with filling a box with form elements.

I seem to have bitten off more than I can chew, again. Not at all sure what to do next.

Thanks again,
Paul

**Acorn** · 08 December 2021, 02:07 PM

Paul, the fall-back is to use a IFRAME Placeholder that points to the form(s) that can be run properly in standalone mode.
The Placeholder code would be <iframe src="path-to-form" width=100% height=100%></iframe>.

On jQuery, you have code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> in play.
In your index_htm_files folder, you will may also have jquery.js. If you don't then all's good. If there, you may find it is v3.6.0.
A different jQuery library (v3.6.0) to the one that works elsewhere (v1.12.4) is the probable cause of your faults.

PM me the link to the published site and I will have a better chance of nailing it.

Acorn

Thread: Format Issue? Weird Placeholder Results

Thread Tools

Display

Format Issue? Weird Placeholder Results

Re: Format Issue? Weird Placeholder Results

Re: Format Issue? Weird Placeholder Results

Re: Format Issue? Weird Placeholder Results

Re: Format Issue? Weird Placeholder Results

Re: Format Issue? Weird Placeholder Results

Bookmarks

Bookmarks

Posting Permissions