Change font(-size,-weight) in jx.Dialog

[hd]

Hello,

how can i change the font-size, -weight in a jx.Dialog (or the styles
anyhow) ?
I tried this code snippet below to no success.
Also $('.jxDialog').setStyle('font-size','0.8em'); did not work.
On the example and API pages i couldn't find something.

Thanks for any pointer to more infos.
Heiko


var dialog = new Jx.Dialog({
'parent': $('mapPanel'),
'id': 'dispData1',
'horizontal': '100 left',
'vertical': '100 top',
'width': 350,
'height': 250,
'modal': true,
'resize': true,
'move': true,
'content': answer,
'maximize': false,
'destroyOnClose': true,
styles: {
----> no effect 'font-size': '0.8em'
},
'limit': {x:[0 ,$('mapPanel').getCoordinates().right -
IUP.leftContainerWidth],
y:[IUP.abstandTop/2 ,$('mapPanel').getCoordinates().bottom -
IUP.abstandTop]}
});
dialog.open();

[Paul Spencer]

If you inspect any element in the dialog, you should be able to determine what css class names are involved and then you can override them in your own css file or style block as long as it is loaded/defined after the jxlib theme stylesheet you are using.

Cheers

Paul

--
You received this message because you are subscribed to the Google Groups "JxLib" group.
To post to this group, send email to jx...@googlegroups.com.
To unsubscribe from this group, send email to jxlib+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jxlib?hl=en.

[Heiko Schröter]

Am 11.05.2012 16:07, schrieb Paul Spencer:

Thanks for the hint. This works when one wants to change the css class
settings. This also overrides settings of other Elements belonging to a
"jxDialog".
But to change the style of a specific Dialog i came up with this after
some digging around(shortened):

var dialog = new Jx.Dialog({

'id': 'Killroy',
});
var dialogContentChild = $('Killroy').getElements('.jxDialogContent');
// or .jxDialogLabel or ...
dialogContentChild.setStyles({
'font-size': '1.5em',
'background': '#D3EAFF'
});
dialog.open();

It would be nice to have it in the Init of the Jx.Dialog overwriting the
deafult css styles (if a wish is allowed here):

var dialog = new Jx.Dialog({

'id': 'Killroy',
jxDialogContentStyle: {
'font-size': '1.5em',
'background': '#D3EAFF'
}
jxDialogLabelStyle: {
'font-size': '15px',
'font-style': 'italic'
}
});

Regards
Heiko

> <mailto:jx...@googlegroups.com>.

> To unsubscribe from this group, send email to
> jxlib+un...@googlegroups.com

> <mailto:jxlib%2Bunsu...@googlegroups.com>.

[Jon Bomgardner]

This is done specifically to avoid overridding these in code. The best way to do this is to simply give your dialog an id (which you do) but then simply add your own css rules scoped by the id in your own stylesheet. Like so:

 

#Killroy .jxDialogContent { ... your styles here... }

 

That should scope your changes to that particular dialog as long as you include your stylesheet AFTER the jxlib standard one.

 

Thanks,

Jon

>     jxlib+unsubscribe@googlegroups.com
>     <mailto:jxlib%2Bunsubscribe@googlegroups.com>.

>     For more options, visit this group at
>     http://groups.google.com/group/jxlib?hl=en.
>
>
> --
> You received this message because you are subscribed to the Google
> Groups "JxLib" group.
> To post to this group, send email to jx...@googlegroups.com.
> To unsubscribe from this group, send email to

> jxlib+unsubscribe@googlegroups.com.

[Heiko Schroeter]

Am Dienstag, 15. Mai 2012, 13:06:44 schrieb Jon Bomgardner:

Thanks for the clarification. How about adding this to the API or Example page
of the DIALOG section ?

Regards
Heiko

[Jon Bomgardner]

This actually works for any component in the library. We designed it with this in mind - so it would be relatively easy to change it how you want it just using CSS and knowing what classes to change.  But you're right, this should definitely be in the docs somewhere....

Jon