How do I make custom CSS / JS prevail over the automatically generated by Foxincloud?

1. You can use ids or classes generated by FoxInCloud and/or custom CSS classes you add to .wCSS lassadd
2. Add rules to xxx.css
3. Make sure your rules are more specific than the generated rules (Google « css rules specificity «  for more details)

Can you record a short video demonstrating how the position and size of a button change?

With all due respect, I really don't think it's Thierry's job to teach you CSS, it's far beyond what you can expect.

Actually, CSS gives you a bunch of possibilities, and it is really easy (and fun) to learn. Do yourself a big favor, and read a few articles or books on the subject. Also you should open a CSS file, and inspect it.

When running your project, press F12 in your browser. From there you can try different values and see which elements you must change the values for, or add into your CSS.

Tore,

Arcadio uses the Bootstrap mode; in Bootstrap controls are grouped into rows, columns (grid system) and *-group constructs.

FoxInCloud builds these groupings from the layout on the VFP form, and offers many ways to work around this standard behavior.

Arcadio, could you post the form where the button reside, its HTML (pointing out the button), and the position where you want to move it to, and the VFP form. Thanks

Thanks

I do not want Thierry to teach me CSS. I need to know where I need to change foxincloud so that my change is valid and not created automatically by Foxincloud. I still have not figured out what I need to do for this.

Arcadio,

I understand that my comment was not relevant in this case, and I ask you to forgive me for making it.

Please note that Thierry asked you a new question in his reply addressed to me, which I don't think you have answered.

Since v 2.25 (6 months ago), FoxInCloud supports 2 modes:

• « classic » mode with absolute positioning à la VFP, with form.resize() support based on .Anchor,
• « responsive » mode using the Bootstrap framework

All FoxInCloud demos (eg. FoxInCloud Live Tutorial) now expose both modes.

Thierry,

For example, I want the combobox where this writing softeasy increase slightly the size to the left, without my touching the position of it in the fox. How would I do it?

Arcadio, please provide the elements my earlier post asks for

What exactly do you need? My VFP Form? Sorry, I did not understand what I have to send you.

• web form screenshot (done)
• VFP form screenshot
• web form HTML
• ID of the element you want to move
• movement you want

web form HTML
<div class="input-group awBSgrp-combobox_padrao2">
<select id="cad_pagar_scx-combobox_padrao2" class="cad_pagar_scx-combobox_padrao2 form-control awBS-IGmember" tabindex="28" autocomplete="off">

VFP form screenshot

ID of the element you want to move "cad_pagar_scx-combobox_padrao2"

movement you want

Remember that I would like my changes in html, overlap the changes in vfp form. No need to change the form in vfp.

Hello Arcadio,

Thanks for these details (next time please provide the full form HTML: HTML around the object also matters)

This should work:

modify form cad_pagar method combobox_padrao2.Init

if thisForm.wBSlHTMLgen
  local nMove
  nMove = 10 && play with this value until you get the expected result
  this.left  = this.left  - m.nMove
  this.width = this.width + m.nMove
endif
return dodefault()

The application CSS file is where you make your changes; for example if your application code is APP, use APP.CSS.

Two things to note

1. To get the name of an object you can look in the AWDEFAULTALL.CSS that FoxInCloud generates

2. In your VFP object you can add a CSS class to an item using the wCSSClassAdd property

3. In APP.CSS, after each directive I recommend using the !important modifier. Instead of

   .MyClass {color:red}

use

 .MyClass {color:red!important}

Thanks Tuvia for your help

However, as Arcadio uses the Bootstrap mode, layout is very much influenced by the HTML groups in which FoxInCloud wraps controls.

Hello Thierry,

It worked, but that's not the way I need it. I would like to fine-tune the html. If I try to change the html generated by foxincloud. I lose the changes when I run the program. What is the correct way to do this.

I lose the changes when I run the program

which program?

When I run my application. The Financialweb. Maybe I did not know how to explain it correctly, I'm sorry.

OK, I understand: you edit form_scx.htm and you loose your changes; normal because form_scx.htm is (re)generated first time server uses the form.

To override the default HTML generated by FoxInCloud, you need to implement xxx*.wcHTMLgen()

You have 15 implementation samples in home(1) + tools\ab\aw\samples

You also have documentation in code inherited from aw*.wcHTMLgen()

Maybe I did not know how to explain it correctly

Same answer, ever: post sample code, screenshots, etc.

That was my very doubt. I'll study this and try.

Arcadio,

If you prefer to edit HTML in a file, you can do this way:

• In the site's root folder, create a file named <HTML ID of the object>.html (make sure not to use the .htm extension as awServerUpdate skips these files)
• copy and paste the HTML generated by FoxInCloud into this file
• edit the HTML as you see fit
• Implement the .wcHTMLgen() method of the object as follows

lparameters toHTMLgen, tlInnerHTML

this.wcHTML = filetostr(this.wcID + '.html')

Be aware that this.wcHTML = replaces all generated HTML, including contained object(s) if any

As FoxInCloud automatically adds the site folder to Set('Path'), you can avoid mentioning it; however, if you fear a duplicate file, you can get its address at thisForm.oConfig.cHTMLpath:

lparameters toHTMLgen, tlInnerHTML

this.wcHTML = filetostr(thisForm.oConfig.cHTMLpath + this.wcID + '.html')

Thierry,

I'll try! I'll let you know if it works, how I need it!

LPARAMETERS toHTMLgen AS awHTMLgen OF awHTML.prg, tlInnerHTML && {en} doc in Parent Code {fr} doc dans le code parent
this.wcHTML = filetostr("Site\fncaProd\"+this.wcID + '.html') && m.varhtml 

Hi Thierry, I did as you suggested. And the following problems occurred. The grid did not appear and the form does not work. If I comment the code, everything works again. Where did I go wrong?

in which object or class did you implement .wcHTMLgen()?

what do you have in your .html file?

<!-- Generated on 28/03/18 10:59:04 AM in 0.000 sec. by FoxInCloud version 2.26.2-beta.4 of 27/03/18 09:51:37 AM /-->
<!-- Generated on 28/03/18 10:56:39 AM in 2.2 secs. by FoxInCloud version 2.26.2-beta.4 of 27/03/18 09:51:37 AM /-->
<div id="cad_pagar_scx" class="cad_pagar_scx form bootstrap" style="position:relative;">
<span id="cad_pagar_scx-waitpic" class="fa fa-2x fa-spinner fa-pulse" aria-hidden="true" style="position:absolute;display:none;"></span>
<div class="row row-textbox_busca8">
<div class="col col-grid_padrao1 col-xs-12 col-sm-10 text-left">
<div class="form-group">
<div id="cad_pagar_scx-grid_padrao1" class="cad_pagar_scx-grid_padrao1 needsclick bootstrap" readonly>
</div>
</div>
</div>
<div class="col col-textbox_busca8 col-xs-5 col-sm-2">
<div class="form-group awBSgrp-button_padrao5 p001">
<div class="btn-group-sm btn-group-vertical awBSgrp-button_padrao5 p001">
<button type="button" id="cad_pagar_scx-button_padrao5" class="cad_pagar_scx-button_padrao5 btn btn-default" tabindex="39" accesskey="i"><span class="fa fa-plus fa-2x" aria-hidden="true"></span> Adicionar</button>
<button type="button" id="cad_pagar_scx-button_padrao4" class="cad_pagar_scx-button_padrao4 btn btn-default" tabindex="38" accesskey="M"><span class="glyphicon glyphicon-edit fa-2x" aria-hidden="true"></span> Modificar</button>
<button type="button" id="cad_pagar_scx-button_padrao3" class="cad_pagar_scx-button_padrao3 btn btn-default" tabindex="37" accesskey="C"><span class="glyphicon glyphicon-search fa-2x" aria-hidden="true"></span> Consultar</button>
<button type="button" id="cad_pagar_scx-button_padrao2" class="cad_pagar_scx-button_padrao2 btn btn-default" tabindex="36" accesskey="C"><span class="fa fa-files-o fa-2x" aria-hidden="true"></span> Copiar</button>
<button type="button" id="cad_pagar_scx-button_padrao1" class="cad_pagar_scx-button_padrao1 btn btn-default" tabindex="34" accesskey="H"><span class="glyphicon glyphicon-list-alt fa-2x" aria-hidden="true"></span> Histórico</button>
<button type="button" id="cad_pagar_scx-button_padrao8" class="cad_pagar_scx-button_padrao8 btn btn-default" tabindex="42" accesskey="t"><span class="fa fa-refresh fa-2x" aria-hidden="true"></span> Atualizar</button>
</div>
</div>
<div class="form-group-sm text-left form-group awBSgrp-textbox_busca8 p002">
<label for="cad_pagar_scx-textbox_busca8" id="cad_pagar_scx-label_padrao4" class="cad_pagar_scx-label_padrao4 control-label">Qtd Reg. :</label>
<input type="text" id="cad_pagar_scx-textbox_busca8" class="cad_pagar_scx-textbox_busca8 form-control input-sm" tabindex="31" autocomplete="off">
</div>
</div>
</div>
<div class="form-group-sm text-left form-group awBSgrp006 p002">
<label for="cad_pagar_scx-textbox_busca1" id="cad_pagar_scx-label3" class="cad_pagar_scx-label3 control-label">Pesquisa</label>
<div class="form-inline awBSgrp011">
<input type="text" id="cad_pagar_scx-textbox_busca1" class="cad_pagar_scx-textbox_busca1 form-control input-sm awBS-NGmember" tabindex="18" autocomplete="off"><div class="awBS-NGmember-wrapper cad_pagar_scx-textbox_busca2-wrapper"><input type="text" id="cad_pagar_scx-textbox_busca2" class="cad_pagar_scx-textbox_busca2 form-control input-sm awBS-NGmember" tabindex="19" autocomplete="off"></div><div class="awBS-NGmember-wrapper cad_pagar_scx-textbox_busca3-wrapper"><input type="text" id="cad_pagar_scx-textbox_busca3" class="cad_pagar_scx-textbox_busca3 form-control input-sm awBS-NGmember" tabindex="20" autocomplete="off"></div><div class="awBS-NGmember-wrapper cad_pagar_scx-textbox_padrao1-wrapper"><input type="date" id="cad_pagar_scx-textbox_padrao1" class="cad_pagar_scx-textbox_padrao1 awDate form-control input-sm awBS-NGmember" tabindex="21" autocomplete="off" value=" / /"></div><div class="awBS-NGmember-wrapper cad_pagar_scx-textbox_busca6-wrapper"><input type="text" id="cad_pagar_scx-textbox_busca6" class="cad_pagar_scx-textbox_busca6 form-control input-sm awBS-NGmember" tabindex="24" autocomplete="off"></div><div class="awBS-NGmember-wrapper cad_pagar_scx-textbox_busca5-wrapper"><input type="text" id="cad_pagar_scx-textbox_busca5" class="cad_pagar_scx-textbox_busca5 form-control input-sm awBS-NGmember" tabindex="25" autocomplete="off"></div><div class="awBS-NGmember-wrapper awBSgrp-combobox_padrao1-wrapper"><div class="input-group awBSgrp-combobox_padrao1">
<select id="cad_pagar_scx-combobox_padrao1" class="cad_pagar_scx-combobox_padrao1 form-control awBS-NGmember" tabindex="26" autocomplete="off">
	<option>ABERTO</option>
	<option>FECHADO</option>
	<option>CANCELADO</option>
	<option>LIBERADO</option>
	<option>CHEQUE</option>
	<option selected>TODOS</option>
</select><span class="input-group-btn"><button type="button" id="cad_pagar_scx-button_pesquisa1" class="cad_pagar_scx-button_pesquisa1 btn btn-default btn-sm awBS-NGmember" tabindex="27"><span class="fa fa-check fa-lg" aria-hidden="true"></span></button></span></div>
</div><div class="awBS-NGmember-wrapper awBSgrp-textbox_busca7-wrapper"><div class="text-left form-group awBSgrp-textbox_busca7">
<label for="cad_pagar_scx-textbox_busca7" id="cad_pagar_scx-label_padrao2" class="cad_pagar_scx-label_padrao2 control-label awBS-NGmember">Parc. No. :</label><input type="text" id="cad_pagar_scx-textbox_busca7" class="cad_pagar_scx-textbox_busca7 form-control input-sm awBS-NGmember" tabindex="31" autocomplete="off"></div>
</div></div>
</div>
<div class="form-group">
<div id="cad_pagar_scx-shape3" class="cad_pagar_scx-shape3" style="display:none;">&nbsp;</div>
</div>
<div class="row row-label_padrao3">
<div class="col col-004 col-xs-12 col-sm-10">
<div class="row row-textbox_busca4">
<div class="col col-combobox_padrao2 col-xs-12 col-sm-5">
<div class="form-horizontal awBSgrp010 p001">
<div class="form-group-sm text-left form-group">
<label id="cad_pagar_scx-label_padrao1" class="cad_pagar_scx-label_padrao1 control-label col-sm-4">Empresa :</label>
<div class="col-sm-8">
<div class="input-group awBSgrp-combobox_padrao2">
<select id="cad_pagar_scx-combobox_padrao2" class="cad_pagar_scx-combobox_padrao2 form-control awBS-IGmember" tabindex="28" autocomplete="off">
</select>
<span class="input-group-btn"><button type="button" id="cad_pagar_scx-button_pesquisa2" class="cad_pagar_scx-button_pesquisa2 btn btn-default btn-sm awBS-IGmember" tabindex="29"><span class="fa fa-check fa-lg" aria-hidden="true"></span></button></span>
</div>
</div>
</div>
</div>
</div>
<div class="col col-textbox_busca4 col-xs-7 col-sm-4 text-left">
<div class="form-group awBSgrp-textbox_busca4 p001">
<div class="input-group-sm input-group awBSgrp-textbox_busca4 p001">
<input type="date" id="cad_pagar_scx-textbox_busca4" class="cad_pagar_scx-textbox_busca4 awDate form-control awBS-IGmember" tabindex="22" autocomplete="off" value=" / /">
<span class="input-group-btn"><button type="button" id="cad_pagar_scx-button_pesquisa3" class="cad_pagar_scx-button_pesquisa3 btn btn-default btn-sm awBS-IGmember" tabindex="23">Filtra data</button></span>
</div>
</div>
</div>
</div>
<div class="row row-button_padrao7">
<div class="col col-button_padrao9 col-xs-12 col-sm-2 text-right">
<div class="form-group form-group-sm">
<button type="button" id="cad_pagar_scx-button_padrao9" class="cad_pagar_scx-button_padrao9 btn btn-default btn-sm" tabindex="43" accesskey="l"><span class="fa fa-check fa-2x" aria-hidden="true"></span> Selecionar</button>
</div>
</div>
<div class="col col-button_padrao7 col-xs-12 col-sm-10 text-right">
<div class="form-group awBSgrp-button_padrao7 p001">
<div class="btn-group-sm btn-group awBSgrp-button_padrao7 p001">
<button type="button" id="cad_pagar_scx-button_padrao7" class="cad_pagar_scx-button_padrao7 btn btn-default" style="display:none;" tabindex="41" accesskey="B">Bloquear</button>
<button type="button" id="cad_pagar_scx-button_padrao6" class="cad_pagar_scx-button_padrao6 btn btn-default" style="display:none;" tabindex="40" accesskey="D"><span class="fa fa-toggle-on fa-2x" aria-hidden="true"></span> Desativar / Ativar</button>
<button type="button" id="cad_pagar_scx-button_padrao13" class="cad_pagar_scx-button_padrao13 btn btn-default" tabindex="49"><span class="fa fa-recycle fa-2x" aria-hidden="true"></span> Estorno</button>
<button type="button" id="cad_pagar_scx-button_padrao12" class="cad_pagar_scx-button_padrao12 btn btn-default" tabindex="48"><span class="fa fa-envelope-open-o fa-2x" aria-hidden="true"></span> Rec. Bol.</button>
<button type="button" id="cad_pagar_scx-button_padrao11" class="cad_pagar_scx-button_padrao11 btn btn-default" tabindex="46"><span class="fa fa-times-circle fa-2x" aria-hidden="true"></span> Cancelar</button>
<button type="button" id="cad_pagar_scx-button_padrao10" class="cad_pagar_scx-button_padrao10 btn btn-default" tabindex="45"><span class="fa fa-money fa-2x" aria-hidden="true"></span> Pagar</button>
<button type="button" id="cad_pagar_scx-button_padrao14" class="cad_pagar_scx-button_padrao14 btn btn-default" tabindex="47"><span class="fa fa-calendar fa-2x" aria-hidden="true"></span> Lembrete</button>
<button type="button" id="cad_pagar_scx-button_sair1" class="cad_pagar_scx-button_sair1 btn btn-default" tabindex="44" accesskey="S"><span class="fa fa-sign-out fa-2x" aria-hidden="true"></span> Sair</button>
</div>
</div>
</div>
</div>
</div>
<div class="col col-label_padrao3 col-xs-12 col-sm-2">
<div class="text-left form-group awBSgrp-optiongroup_padrao1 p001">
<label for="cad_pagar_scx-optiongroup_padrao1" id="cad_pagar_scx-label_padrao3" class="cad_pagar_scx-label_padrao3 control-label">Filtro Vencimento</label>
<div id="cad_pagar_scx-optiongroup_padrao1" class="cad_pagar_scx-optiongroup_padrao1 btn-group-vertical opt-group" role="group" data-toggle="buttons" tabindex="52">
<div class="radio"><label for="cad_pagar_scx-optiongroup_padrao1-option1" id="cad_pagar_scx-optiongroup_padrao1-option1_lbl" class="cad_pagar_scx-optiongroup_padrao1-option1 standard ChkOptLabel active"><input type="radio" id="cad_pagar_scx-optiongroup_padrao1-option1" class="cad_pagar_scx-optiongroup_padrao1-option1 standard" tabindex="53" name="cad_pagar_scx-optiongroup_padrao1" autocomplete="off" checked>Todos</label></div>
<div class="radio"><label for="cad_pagar_scx-optiongroup_padrao1-option2" id="cad_pagar_scx-optiongroup_padrao1-option2_lbl" class="cad_pagar_scx-optiongroup_padrao1-option2 standard ChkOptLabel"><input type="radio" id="cad_pagar_scx-optiongroup_padrao1-option2" class="cad_pagar_scx-optiongroup_padrao1-option2 standard" tabindex="54" name="cad_pagar_scx-optiongroup_padrao1" autocomplete="off">Abertos</label></div>
<div class="radio"><label for="cad_pagar_scx-optiongroup_padrao1-option3" id="cad_pagar_scx-optiongroup_padrao1-option3_lbl" class="cad_pagar_scx-optiongroup_padrao1-option3 standard ChkOptLabel"><input type="radio" id="cad_pagar_scx-optiongroup_padrao1-option3" class="cad_pagar_scx-optiongroup_padrao1-option3 standard" tabindex="55" name="cad_pagar_scx-optiongroup_padrao1" autocomplete="off">Fechados</label></div>
</div>
</div>
</div>
</div>
</div>
<!--/ Generated on 28/03/18 10:56:39 AM in 2.2 secs. by FoxInCloud version 2.26.2-beta.4 of 27/03/18 09:51:37 AM -->
<!--/ Generated on 28/03/18 10:59:04 AM in 0.000 sec. by FoxInCloud version 2.26.2-beta.4 of 27/03/18 09:51:37 AM -->

you should only have the HTML for the object where you implement .wcHTMLgen()

Again, in which object or class did you implement .wcHTMLgen()?

Cad_pagar.wcHTMLgen()

why would you replace the whole form HTML?

also, when you use .wcHTMLgen(), you need to implement the events by yourself or call m.toHTMLgen.cEvents() (see doc in modify command awHTML)

That may be my mistake. How would I change the html of the Combobox_padrao2 object? For each object would it need to have an .html file? It is?

1. you put the HTML you want in site/xxxTest/cad_pagar_scx-combobox_padrao1.html
2. you implement:

modify form cad_pagar method combobox_padrao1.wcHTMLgen

LPARAMETERS toHTMLgen AS awHTMLgen OF awHTML.prg, tlInnerHTML && {en} doc in Parent Code {fr} doc dans le code parent

m.toHTMLgen.cEvents() && generates event handlers
this.wcHTML = filetostr(this.wcID + '.html')

make sure to keep id="…" in HTML

OK! I understood this form. But my webdesigner would like to be able to change the whole html because it would be easier for him. Is this possible or would it have to have an html per object?

Why change the whole HTML?

Why not just add css classes?

ok! I will try!

use .wCSSclassAdd

Thierry,

Talking with my web design, he thinks it best to make changes to xxx.css. What are the steps for the changes made to be viewed in rendering?

xxx.css is loaded last, rules in xxx.css override any rule in awDefault.css

for more specific CSS selectors, use .wCSSclassAdd

I still can not think of the best way to do this.

What exactly do you want to do? You gave an example at the beginning of this thread that we could solve.

Can you give more examples to understand the rationale behind what you want to do?

if you want to manage the whole HTML/CSS/JS for a form yourself, you can:

1. copy form_scx.htm into, say, form_scx.html
2. copy form_scx.js into, say, form_scx.jsl
3. copy all CSS for this form from awDefault_*.css into xxx.css
4. modify these files as you want
5. implement this:

procedure wcHTMLgen
lparameters toHTMLgen, tlInnerHTML

this.wcHTML = filetostr('form_scx.html')
toHTMLgen.cScriptJSadd(filetostr('form_scx.jsl'))

In this case, you'll have to manually reflect any change to your VFP form to form_scx.html, form_scx.jsl and xxx.css

PS: please start a new thread because, with long threads, markdown editor slows down; thanks