There is something seriously wrong with the positioning of the displayed plugin. It defaults to the top/left of whatever div it is in, bypassing and pushing down any content above it.
As a designer, I have attempted to position it with CSS, using positioning properties such as “position:static” and “position:relative” which have no affect on the plugin’s div id=”open_form_viewer”.
I could send you two screenshots of what is occuring with and without applied CSS.
The first has no CSS applied to the plugin. The div you would see below the plugin is actually placed above it. The plugin displaces it and puts itself first.
The second screenshot has float:left applied to the plugin. It appears to displace itself completely out of the flow of the content, as if it isn’t there.
You can view the “no CSS applied” at this test page on the site I wish to install the plugin on: https://www.chaseo.ca/test-page/
Is this plugin positioned ‘absolute’ anywhere in the php of the plugin? I have scoured the css files which come with the plugin and find no styling for the plugin’s id=”open_form_viewer”, only for its internal elements as follows:
‘#open_form_viewer .input label,
#open_form_viewer .input legend {
display: block;
font-weight: bold;
}
#open_form_viewer .input input,
#open_form_viewer .input textarea {
display: block;
}
#open_form_viewer .input input[type=”radio”] {
display: inline;
}’
Could you please investigate this?
=================
Further on this:
I wrapped the plugin in a div in hopes that it would contain the plugin…
‘<div id=”formwrapper”>
[supra-open-form id=1]
</div>’
…to no avail. The plugin went outside the wrapping div, as well as bypassed all the content above it to sit at the top left corner of the parent div, as you can see from the page source code…
‘
<h1>Private: Test Page</h1>
<div id=”notify”></div>
<div id=”open_form_viewer”>
<div class=”form_name”>Chairing Difficult Meetings</div><form name=”Chairing Difficult Meetings” id=”Chairing Difficult Meetings” class=”open_form”><div class=”input”><label for=”coopname”>Your Co-op Name</label><input type=”text” maxlength=”100″ name=”coopname” id=”coopname” value=”Your Co-op Name Here” /></div><div class=”input”>… (trucated for space) …</textarea></div><div class=”input”><input type=”submit” name=”formsubmit” id=”formsubmit” value=”Submit” /></div><div class=”input”><input type=”hidden” name=”form_id” id=”form_id” value=”1″ /></div></form></div>
<div class=”accordian”>
<h4>Test header</h4>
<div class=”accordiantext”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus dignissim elit sed mauris bibendum varius. Quisque imperdiet ultrices mauris.</div>
</div>
<div id=”formwrapper”>
</div>
‘
The formwrapper div at the bottom is the one the plugin is supposed to be inside of.
I will leave the above test page up for a couple of days, but if there is no resolution I will have to find another form plugin, as this site is live and needs forms.
