Hi,

I would like to override the style tag on the div created for a form and also the divs created for containers within it.
Is there a way to do this?

What I am doing is replacing a form's generated HTML with something else, while keeping the div ID's the same as the form and container names in VFP so that they work properly with dynamic controls etc (form.wcHTMLGen() -> this.wcHTML = ...).
This is fine, except FiC injects a style tag onto each div specifying the opacity, width and height and sets the dimensions to a fixed-pixel setting - I would like the height to be auto instead.
The external HTML and CSS are being overridden by this injected style.

btw, I am not using bootstrap.

Thanks.
Paul

As you give no sample code to work on (despite my repeated demands, alas), I’ll try a generic help.

Procedure wcHTMLgen(toHTML, tlInnerHTML)

this.wcHtml = '':
 + '<div …>';
 + toHtml.getHtml_(.T.);
 + '</div>'

You can also try:

Procedure wcHTMLgen(toHTML, tlInnerHTML)

toHTML.cScriptJSadd(textmerge([jQuery('#<<this.wcID>>').css({height:"auto"})]))

Hi Thierry,

It would be nice to have this option "auto" in the list of values of wBSwidth ... 😉

leaving .wBSwith empty means "auto"… 😉

Thanks for your tips, but unfortunately they don't affect the final HTML in the way I am doing things.

In xxxfrm.wcHTMLGen I have this code, to be applied to all forms :

if ReplaceHTML
  toHTMLgen.getHTML_()
  this.wcHTML = "some new html for this particular form"
  
  *** I do not execute =dodefault()
endif

Here is an extract from the HTML that I replace the FiC HTML with :

<div id="shopfloormenu" class="form awfrm webfrm standardform privatedataform mfgprivateform shopfloorbaseform shopfloormenu" style="opacity: 1; width: auto; height: auto;">
	<div class="limiter">
		<div class="container-shopfloormenu100" style="background-image: url('extensions/images/Loginform-Background01.jpg');" >
			<div class="wrap-shopfloormenu100" style="width: auto; height: auto;">
			 	<div id="shopfloormenu-panelscrollcontainer" style="width: auto; height: auto;">
					<div id="shopfloormenu-panelscrollcontainer-menupanel1" class="tiles-grid tiles-group size-2">
					</div>
			    </div>
			</div>
		</div>
	</div>
</div>

This works, except FiC injects its own style tag onto every element that has an ID that matches one in the VFP form.
(I need to match the ID's so that FiC continues to place dynamic content into the page).

For example,

<div id="shopfloormenu-panelscrollcontainer-menupanel1" class="tiles-grid tiles-group size-2"></div>

becomes this in the final HTML

<div id="shopfloormenu-panelscrollcontainer-menupanel1" class="tiles-grid tiles-group size-2" style="height: 335px; width: 333px;"></div>

.
.
I have tried your two suggestions :

1. toHTML.cScriptJSadd(textmerge([jQuery('#<<this.wcID>>').css({height:"auto"})]))
   I have tried placing this into the container's wcHTMLGen and into xxxfrm.wcHTMLGen, but in both cases while this js is added to form.js and I can see it execute, it looks like it is too early in the process and gets overridden later on.
   I have also tried cScriptJSadd_(), same result.
2. replace the HTML with my own div, e.g. :

this.wcHTML = [<div id="shopfloormenu-panelscrollcontainer-menupanel1" class="tiles-grid tiles-group size-2" </div]

The style is still injected.

So, I'm a bit stuck atm.
Is the FiC code that is setting the style accessible to me? Perhaps if I read that I can understand the timing of things.

Thanks.

You can replace html code with replaceWith()

For example, in your refresh() method:

IF THISFORM.wBSlHTMLgen
   THIS.wcHTMLgen
   THISFORM.wcScriptJSadd(TEXTMERGE([jQuery('#<<THIS.wcID>>').replaceWith(<<cLitteralJS(THIS.wcHTML)>>);]))
ENDIF

Hi Paul,

Sounds like width and height change because of the form.resize() support.

On the matching VFP object, please try to remove 'height' from .wcPropSave, and/or add it to .wcPropSaveNot, both at design time or in .Init().