FoxInCloud
grid background selected row css issue
Gravatar is a globally recognized avatar based on your email address. grid background selected row css issue
  Tuvia Vinitsky
  All
  Oct 22, 2014 @ 10:38pm

FiC generates something like this for grid selected rows:
#nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected, #nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected .aw-grid-cell {color:#FFFFFF; background-color:#B7DBFF!important; }

The problem is the "important" at the end. While that may make sense if in VFP properties I have overridden the default colors, but the "important" is generated even for the default background row color - making it impossible to change globally. If I put this in xxx.css:

.aw-rows-selected .aw-row-selector {
color:white!important;
background-color:red!important;
}

It will not work. The awdefault entry has more specificity since it uses a name and class. Unless I put every grid into xxx.css, I do not see how I can get around that "important" in awdefault.

Gravatar is a globally recognized avatar based on your email address. Re: grid background selected row css issue
  FoxInCloud Support - Thierry N.
  Tuvia Vinitsky
  Oct 23, 2014 @ 12:40am
you probably can override by using CSS selector specificity: http://www.w3.org/TR/css3-selectors/#specificity

FiC generates something like this for grid selected rows:

#nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected, #nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected .aw-grid-cell {color:#FFFFFF; background-color:#B7DBFF!important; }

The problem is the "important" at the end. While that may make sense if in VFP properties I have overridden the default colors, but the "important" is generated even for the default background row color - making it impossible to change globally. If I put this in xxx.css:

.aw-rows-selected .aw-row-selector {
color:white!important;
background-color:red!important;
}

It will not work. The awdefault entry has more specificity since it uses a name and class. Unless I put every grid into xxx.css, I do not see how I can get around that "important" in awdefault.


-- thn (FoxInCloud)

Gravatar is a globally recognized avatar based on your email address. Re: grid background selected row css issue
  Tuvia Vinitsky
  Thierry Nivelet (FoxInCloud)
  Oct 23, 2014 @ 01:38am
I do not see how, given the !important modifier results in the last rule to use !important overriding any other specificity.

I would have to list by name hundreds of grids and make sure the rules are loaded last.

Is there a reason that FiC appends the !important modifier only to selected row backgrounds of grids?


you probably can override by using CSS selector specificity: http://www.w3.org/TR/css3-selectors/#specificity

FiC generates something like this for grid selected rows:

#nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected, #nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected .aw-grid-cell {color:#FFFFFF; background-color:#B7DBFF!important; }

The problem is the "important" at the end. While that may make sense if in VFP properties I have overridden the default colors, but the "important" is generated even for the default background row color - making it impossible to change globally. If I put this in xxx.css:

.aw-rows-selected .aw-row-selector {
color:white!important;
background-color:red!important;
}

It will not work. The awdefault entry has more specificity since it uses a name and class. Unless I put every grid into xxx.css, I do not see how I can get around that "important" in awdefault.


Gravatar is a globally recognized avatar based on your email address. Re: grid background selected row css issue
  FoxInCloud Support - Thierry N.
  Tuvia Vinitsky
  Oct 23, 2014 @ 02:05am
!important solves a conflict with aw.css rules - i remember we had quite a hard time with this
we could maybe solve the conflict using more specific selectors; could you try that? (form ID added before grid ID)
modify command awHTML
...
* ------------------------------------------------------------
PROTECTED FUNCTION getHTML_grd_AW && {en} Grid HTML/CSS/JS for ActiveWidgets {fr} HTML/CSS/JS d'un grille ActiveWidgets
LPARAMETER tlInnerHTML && [.F.] {en} work on Grid members only {fr} Rendre l'intérieur du conteneur seulement

LOCAL lcResult; && {en} result HTML {fr} HTML résultat
, lcAttribs;
, lcSelStyle;
, lcCSS;
, lcFormID;

* JS
this.cScriptJSadd(;
this.getHTML_grd_AW_cScript(;
this.getHTML_grd_AW_cXML(m.this.oControl);
))

* HTML
lcAttribs = this.cAttribs(; && toujours à l'extérieur de Textmerge() pour éviter un Textmerge récursif
.T.; && tuEvents [.F.] événements = .T.: tous || .F.: aucun || "event1,event2, ..": indiqués
, ; && tcClasses [''] classes additionnelles éventuelles
, ; && tcSuffix [''] suffixe éventuel
, 'position,background'; && tcStyles [''] styles à rendre selon this.cStyle()
, ; && tcStyleForce [''] directive(s) de style forcée(s)
)

lcResult = Evl(m.this.cResult, []) && this.cResult contient une erreur éventuelle dans l'élaboration du script && , [ ]
lcResult = Iif(m.tlInnerHTML;
, m.lcResult;
, Textmerge([<div<<m.lcAttribs>>><<m.lcResult>></div>]);
)

* {en} row and cells CSS {fr} CSS des lignes et cellules
WITH m.this.oControl AS awGrd OF aw.vcx

lcCSS = Textmerge('';
+ Iif(InList(.GridLines, 1, 3); && Horizontal grid lines
, [#<<m.this.cObjID>> .aw-grid-row {border-bottom:<<.GridLineWidth>>px solid <<HTMLcolor(.GridLineColor)>>; padding-bottom:<<Max(4-.GridLineWidth, 0)>>px;}] + CRLF;
, [];
);
+ Iif(InList(.GridLines, 2, 3); && Vertical grid lines
, [#<<m.this.cObjID>> .aw-grid-cell {border-right:<<.GridLineWidth>>px solid <<HTMLcolor(.GridLineColor)>>;}] + CRLF;
, [];
);
+ Iif(.Highlight;
and varSet(@m.lcSelStyle, Textmerge([{color:<<HTMLcolor(.HighlightBackColor)>>!important; background:<<HTMLcolor(.HighlightForeColor)>>!important; }])); && couleurs inversées
, Iif(.AllowCellSelection;
, '';
+ [#<<m.this.cObjID>> .aw-cells-selected, #<<m.this.cObjID>> .aw-cells-selected input {color:<<HTMLcolor(.HighlightForeColor)>>!important; background-color:<<HTMLcolor(.HighlightBackColor)>>!important; }] + CRLF;
+ [#<<m.this.cObjID>> .aw-cells-selected input::selection <<m.lcSelStyle>>] + CRLF;
+ [#<<m.this.cObjID>> .aw-cells-selected input::-moz-selection <<m.lcSelStyle>>] + CRLF;
+ [#<<m.this.cObjID>> .aw-cells-selected input::-webkit-selection <<m.lcSelStyle>>] + CRLF;
, [#<<m.this.cObjID>> .aw-rows-selected, #<<m.this.cObjID>> .aw-rows-selected .aw-grid-cell {color:<<HTMLcolor(.HighlightForeColor)>>; background-color:<<HTMLcolor(.HighlightBackColor)>>!important; }] + CRLF; && When .AllowCellSelection = .F., current row is always highlighted when HighlightStyle is set to a value of 0
);
, [];
);
)

&& 2014-10-23 thn attempt to remove '!important' by using more specific selectors
lcFormID = this.oForm.wcID
lcCSS = Textmerge('';
+ Iif(InList(.GridLines, 1, 3); && Horizontal grid lines
, [#<<m.lcFormID>> #<<m.this.cObjID>> .aw-grid-row {border-bottom:<<.GridLineWidth>>px solid <<HTMLcolor(.GridLineColor)>>; padding-bottom:<<Max(4-.GridLineWidth, 0)>>px;}] + CRLF;
, [];
);
+ Iif(InList(.GridLines, 2, 3); && Vertical grid lines
, [#<<m.lcFormID>> #<<m.this.cObjID>> .aw-grid-cell {border-right:<<.GridLineWidth>>px solid <<HTMLcolor(.GridLineColor)>>;}] + CRLF;
, [];
);
+ Iif(.Highlight;
and varSet(@m.lcSelStyle, Textmerge([{color:<<HTMLcolor(.HighlightBackColor)>>; background:<<HTMLcolor(.HighlightForeColor)>>; }])); && couleurs inversées
, Iif(.AllowCellSelection;
, '';
+ [#<<m.lcFormID>> #<<m.this.cObjID>> .aw-cells-selected, #<<m.lcFormID>> #<<m.this.cObjID>> .aw-cells-selected input {color:<<HTMLcolor(.HighlightForeColor)>>; background-color:<<HTMLcolor(.HighlightBackColor)>>; }] + CRLF;
+ [#<<m.lcFormID>> #<<m.this.cObjID>> .aw-cells-selected input::selection <<m.lcSelStyle>>] + CRLF;
+ [#<<m.lcFormID>> #<<m.this.cObjID>> .aw-cells-selected input::-moz-selection <<m.lcSelStyle>>] + CRLF;
+ [#<<m.lcFormID>> #<<m.this.cObjID>> .aw-cells-selected input::-webkit-selection <<m.lcSelStyle>>] + CRLF;
, [#<<m.lcFormID>> #<<m.this.cObjID>> .aw-rows-selected, #<<m.lcFormID>> #<<m.this.cObjID>> .aw-rows-selected .aw-grid-cell {color:<<HTMLcolor(.HighlightForeColor)>>; background-color:<<HTMLcolor(.HighlightBackColor)>>; }] + CRLF; && When .AllowCellSelection = .F., current row is always highlighted when HighlightStyle is set to a value of 0
);
, [];
);
)
&& - 2014-10-23 thn attempt to remove '!important' by using more specific selectors

this.cCSScustomAdd(m.lcCSS)

ENDWITH

RETURN m.lcResult


I do not see how, given the !important modifier results in the last rule to use !important overriding any other specificity.

I would have to list by name hundreds of grids and make sure the rules are loaded last.

Is there a reason that FiC appends the !important modifier only to selected row backgrounds of grids?


you probably can override by using CSS selector specificity: http://www.w3.org/TR/css3-selectors/#specificity

FiC generates something like this for grid selected rows:

#nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected, #nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected .aw-grid-cell {color:#FFFFFF; background-color:#B7DBFF!important; }

The problem is the "important" at the end. While that may make sense if in VFP properties I have overridden the default colors, but the "important" is generated even for the default background row color - making it impossible to change globally. If I put this in xxx.css:

.aw-rows-selected .aw-row-selector {
color:white!important;
background-color:red!important;
}

It will not work. The awdefault entry has more specificity since it uses a name and class. Unless I put every grid into xxx.css, I do not see how I can get around that "important" in awdefault.




-- thn (FoxInCloud)

Gravatar is a globally recognized avatar based on your email address. Re: grid background selected row css issue
  Tuvia Vinitsky
  Thierry Nivelet (FoxInCloud)
  Oct 26, 2014 @ 07:42pm
Perfect.


!important solves a conflict with aw.css rules - i remember we had quite a hard time with this
we could maybe solve the conflict using more specific selectors; could you try that? (form ID added before grid ID)
modify command awHTML
...
* ------------------------------------------------------------
PROTECTED FUNCTION getHTML_grd_AW && {en} Grid HTML/CSS/JS for ActiveWidgets {fr} HTML/CSS/JS d'un grille ActiveWidgets
LPARAMETER tlInnerHTML && [.F.] {en} work on Grid members only {fr} Rendre l'intérieur du conteneur seulement

LOCAL lcResult; && {en} result HTML {fr} HTML résultat
, lcAttribs;
, lcSelStyle;
, lcCSS;
, lcFormID;

* JS
this.cScriptJSadd(;
this.getHTML_grd_AW_cScript(;
this.getHTML_grd_AW_cXML(m.this.oControl);
))

* HTML
lcAttribs = this.cAttribs(; && toujours à l'extérieur de Textmerge() pour éviter un Textmerge récursif
.T.; && tuEvents [.F.] événements = .T.: tous || .F.: aucun || "event1,event2, ..": indiqués
, ; && tcClasses [''] classes additionnelles éventuelles
, ; && tcSuffix [''] suffixe éventuel
, 'position,background'; && tcStyles [''] styles à rendre selon this.cStyle()
, ; && tcStyleForce [''] directive(s) de style forcée(s)
)

lcResult = Evl(m.this.cResult, []) && this.cResult contient une erreur éventuelle dans l'élaboration du script && , [ ]
lcResult = Iif(m.tlInnerHTML;
, m.lcResult;
, Textmerge([<div></div>]);
)

* {en} row and cells CSS {fr} CSS des lignes et cellules
WITH m.this.oControl AS awGrd OF aw.vcx

lcCSS = Textmerge('';
+ Iif(InList(.GridLines, 1, 3); && Horizontal grid lines
, [# .aw-grid-row {border-bottom:<.GridLineWidth>px solid ; padding-bottom:px;}] + CRLF;
, [];
);
+ Iif(InList(.GridLines, 2, 3); && Vertical grid lines
, [# .aw-grid-cell {border-right:<.GridLineWidth>px solid ;}] + CRLF;
, [];
);
+ Iif(.Highlight;
and varSet(@m.lcSelStyle, Textmerge([{color:!important; background:!important; }])); && couleurs inversées
, Iif(.AllowCellSelection;
, '';
+ [# .aw-cells-selected, # .aw-cells-selected input {color:!important; background-color:!important; }] + CRLF;
+ [# .aw-cells-selected input::selection ] + CRLF;
+ [# .aw-cells-selected input::-moz-selection ] + CRLF;
+ [# .aw-cells-selected input::-webkit-selection ] + CRLF;
, [# .aw-rows-selected, # .aw-rows-selected .aw-grid-cell {color:; background-color:!important; }] + CRLF; && When .AllowCellSelection = .F., current row is always highlighted when HighlightStyle is set to a value of 0
);
, [];
);
)

&& 2014-10-23 thn attempt to remove '!important' by using more specific selectors
lcFormID = this.oForm.wcID
lcCSS = Textmerge('';
+ Iif(InList(.GridLines, 1, 3); && Horizontal grid lines
, [# # .aw-grid-row {border-bottom:<.GridLineWidth>px solid ; padding-bottom:px;}] + CRLF;
, [];
);
+ Iif(InList(.GridLines, 2, 3); && Vertical grid lines
, [# # .aw-grid-cell {border-right:<.GridLineWidth>px solid ;}] + CRLF;
, [];
);
+ Iif(.Highlight;
and varSet(@m.lcSelStyle, Textmerge([{color:; background:; }])); && couleurs inversées
, Iif(.AllowCellSelection;
, '';
+ [# # .aw-cells-selected, # # .aw-cells-selected input {color:; background-color:; }] + CRLF;
+ [# # .aw-cells-selected input::selection ] + CRLF;
+ [# # .aw-cells-selected input::-moz-selection ] + CRLF;
+ [# # .aw-cells-selected input::-webkit-selection ] + CRLF;
, [# # .aw-rows-selected, # # .aw-rows-selected .aw-grid-cell {color:; background-color:; }] + CRLF; && When .AllowCellSelection = .F., current row is always highlighted when HighlightStyle is set to a value of 0
);
, [];
);
)
&& - 2014-10-23 thn attempt to remove '!important' by using more specific selectors

this.cCSScustomAdd(m.lcCSS)

ENDWITH

RETURN m.lcResult


I do not see how, given the !important modifier results in the last rule to use !important overriding any other specificity.

I would have to list by name hundreds of grids and make sure the rules are loaded last.

Is there a reason that FiC appends the !important modifier only to selected row backgrounds of grids?


you probably can override by using CSS selector specificity: http://www.w3.org/TR/css3-selectors/#specificity

FiC generates something like this for grid selected rows:

#nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected, #nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected .aw-grid-cell {color:#FFFFFF; background-color:#B7DBFF!important; }

The problem is the "important" at the end. While that may make sense if in VFP properties I have overridden the default colors, but the "important" is generated even for the default background row color - making it impossible to change globally. If I put this in xxx.css:

.aw-rows-selected .aw-row-selector {
color:white!important;
background-color:red!important;
}

It will not work. The awdefault entry has more specificity since it uses a name and class. Unless I put every grid into xxx.css, I do not see how I can get around that "important" in awdefault.




Gravatar is a globally recognized avatar based on your email address. Re: grid background selected row css issue
  FoxInCloud Support - Thierry N.
  Tuvia Vinitsky
  Oct 27, 2014 @ 02:40am
Thanks for the feedback
added to current version 2.20 beta 1


Perfect.


!important solves a conflict with aw.css rules - i remember we had quite a hard time with this
we could maybe solve the conflict using more specific selectors; could you try that? (form ID added before grid ID)
modify command awHTML
...
* ------------------------------------------------------------
PROTECTED FUNCTION getHTML_grd_AW && {en} Grid HTML/CSS/JS for ActiveWidgets {fr} HTML/CSS/JS d'un grille ActiveWidgets
LPARAMETER tlInnerHTML && [.F.] {en} work on Grid members only {fr} Rendre l'intérieur du conteneur seulement

LOCAL lcResult; && {en} result HTML {fr} HTML résultat
, lcAttribs;
, lcSelStyle;
, lcCSS;
, lcFormID;

* JS
this.cScriptJSadd(;
this.getHTML_grd_AW_cScript(;
this.getHTML_grd_AW_cXML(m.this.oControl);
))

* HTML
lcAttribs = this.cAttribs(; && toujours à l'extérieur de Textmerge() pour éviter un Textmerge récursif
.T.; && tuEvents [.F.] événements = .T.: tous || .F.: aucun || "event1,event2, ..": indiqués
, ; && tcClasses [''] classes additionnelles éventuelles
, ; && tcSuffix [''] suffixe éventuel
, 'position,background'; && tcStyles [''] styles à rendre selon this.cStyle()
, ; && tcStyleForce [''] directive(s) de style forcée(s)
)

lcResult = Evl(m.this.cResult, []) && this.cResult contient une erreur éventuelle dans l'élaboration du script && , [ ]
lcResult = Iif(m.tlInnerHTML;
, m.lcResult;
, Textmerge([<div></div>]);
)

* {en} row and cells CSS {fr} CSS des lignes et cellules
WITH m.this.oControl AS awGrd OF aw.vcx

lcCSS = Textmerge('';
+ Iif(InList(.GridLines, 1, 3); && Horizontal grid lines
, [# .aw-grid-row {border-bottom:<.GridLineWidth>px solid ; padding-bottom:px;}] + CRLF;
, [];
);
+ Iif(InList(.GridLines, 2, 3); && Vertical grid lines
, [# .aw-grid-cell {border-right:<.GridLineWidth>px solid ;}] + CRLF;
, [];
);
+ Iif(.Highlight;
and varSet(@m.lcSelStyle, Textmerge([{color:!important; background:!important; }])); && couleurs inversées
, Iif(.AllowCellSelection;
, '';
+ [# .aw-cells-selected, # .aw-cells-selected input {color:!important; background-color:!important; }] + CRLF;
+ [# .aw-cells-selected input::selection ] + CRLF;
+ [# .aw-cells-selected input::-moz-selection ] + CRLF;
+ [# .aw-cells-selected input::-webkit-selection ] + CRLF;
, [# .aw-rows-selected, # .aw-rows-selected .aw-grid-cell {color:; background-color:!important; }] + CRLF; && When .AllowCellSelection = .F., current row is always highlighted when HighlightStyle is set to a value of 0
);
, [];
);
)

&& 2014-10-23 thn attempt to remove '!important' by using more specific selectors
lcFormID = this.oForm.wcID
lcCSS = Textmerge('';
+ Iif(InList(.GridLines, 1, 3); && Horizontal grid lines
, [# # .aw-grid-row {border-bottom:<.GridLineWidth>px solid ; padding-bottom:px;}] + CRLF;
, [];
);
+ Iif(InList(.GridLines, 2, 3); && Vertical grid lines
, [# # .aw-grid-cell {border-right:<.GridLineWidth>px solid ;}] + CRLF;
, [];
);
+ Iif(.Highlight;
and varSet(@m.lcSelStyle, Textmerge([{color:; background:; }])); && couleurs inversées
, Iif(.AllowCellSelection;
, '';
+ [# # .aw-cells-selected, # # .aw-cells-selected input {color:; background-color:; }] + CRLF;
+ [# # .aw-cells-selected input::selection ] + CRLF;
+ [# # .aw-cells-selected input::-moz-selection ] + CRLF;
+ [# # .aw-cells-selected input::-webkit-selection ] + CRLF;
, [# # .aw-rows-selected, # # .aw-rows-selected .aw-grid-cell {color:; background-color:; }] + CRLF; && When .AllowCellSelection = .F., current row is always highlighted when HighlightStyle is set to a value of 0
);
, [];
);
)
&& - 2014-10-23 thn attempt to remove '!important' by using more specific selectors

this.cCSScustomAdd(m.lcCSS)

ENDWITH

RETURN m.lcResult


I do not see how, given the !important modifier results in the last rule to use !important overriding any other specificity.

I would have to list by name hundreds of grids and make sure the rules are loaded last.

Is there a reason that FiC appends the !important modifier only to selected row backgrounds of grids?


you probably can override by using CSS selector specificity: http://www.w3.org/TR/css3-selectors/#specificity

FiC generates something like this for grid selected rows:

#nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected, #nameset_scx-frame1-names-pgfnames-page1-grdemails .aw-rows-selected .aw-grid-cell {color:#FFFFFF; background-color:#B7DBFF!important; }

The problem is the "important" at the end. While that may make sense if in VFP properties I have overridden the default colors, but the "important" is generated even for the default background row color - making it impossible to change globally. If I put this in xxx.css:

.aw-rows-selected .aw-row-selector {
color:white!important;
background-color:red!important;
}

It will not work. The awdefault entry has more specificity since it uses a name and class. Unless I put every grid into xxx.css, I do not see how I can get around that "important" in awdefault.






-- thn (FoxInCloud)

© 1996-2024