Would Like Expander Title and Arrow Centered

[TonyParticipant]

I would like to be able to center the expander title and arrow. Currently the title is floated left and the arrow is floated right. Is there a way to do this?

Thanks.

Tony

[ivailoParticipant]

Hi Tony,

You can change the styles in jqx-expander-header-content and jqx-expander-arrow classes.
Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[TonyParticipant]

Thanks. I see that that works. However, if I want the title & arrow to be centered on the entire width, ie width: 100% it doesn’t work. Is it possible to do this using percentages?

[ivailoParticipant]

Hi Tony,

Instead you can get the width of the expander and then to recalculate the width of jqx-expander-header-content.
Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[TonyParticipant]

Ivalio,

Thanks for the demo. This works for non-embellished text. In your example add “font-size: 4em” to the css for the class
jqx-expander-header-content. In this case the text is no longer centered. Any thoughts on this?

Thanks.

Tony

[ivailoParticipant]

Hi Tony,

Then try this workaround.
Just calculate the position/size of the header container.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts