Conflict with PlaceHolders in DropDownList when I use multiple Themes

[fabricebParticipant]

Hi,

I’m usually using darblue theme in my website.
But I’ve added today light theme, because the “multisort column badges” only exist in white themes…

my webpage now includes 3 CSS :
– http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css
– http://jqwidgets.com/public/jqwidgets/styles/jqx.darkblue.css
– http://jqwidgets.com/public/jqwidgets/styles/jqx.light.css

The probleme is that it creates conflicts in my dropdownlists :
The placeholder appears constantly even when I choose an item in the dropdomnlist.

See the jsFiddle here :
http://jsfiddle.net/mogador/j4rpwf9g/

If you remove http://jqwidgets.com/public/jqwidgets/styles/jqx.light.css or http://jqwidgets.com/public/jqwidgets/styles/jqx.darkblue.css, you don’t have any problem with the placeholders anymore.

I’m stuck because I NEED badges in my grids ==> light theme, and I don’t want to get rid of darkblue theme on the other widgets.

fabriceb

[svetoslav_borislavovParticipant]

Hi,

Sorry, it is a bug. Here is a workaround for it:
http://jsfiddle.net/db3cou4v/

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[fabricebParticipant]

Thanx for your answer

I’ve just given up using light theme.

but I really need badges in my grids,it only works in light and dark themes for the while… I’m waiting for this great functionnality since monthes on my darkblue theme.

I’ve already asked few month ago : Do you plan to add badges in all themes ? will it appear in 2022? 2023 ?

Thanx,

fabriceb

[svetoslav_borislavovParticipant]

Hi,

Could you, please explain what you mean by badges?
You can apply photos here svetosalv@jqwidgets.com

I am waiting for your response!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[fabricebParticipant]

Hi Borislavov,

what I mean by badges is that you’ve created the great functionfality of adding badges in column titles for multi column sorting grids.

Check it on this page :
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/grid-multi-column-sorting.htm

it werks on your example, with light theme.

but if you change the theme and select darkblue theme, the badges disappear.

that’s really annoying that some great functionnalities only exist depending the theme I’ve chosen on my website.

I’m just asking for implementing a fonctionnality on ALL themes when you create a new functionnality.

Best regards,

fabriceb

[svetoslav_borislavovParticipant]

Hi,

This is not supported by default but you can use the following workaround:
– set the theme to this: theme:’darkblue light’
– set this styles:

.jqx-grid-column-header[sort][sort-index] .sorticon {
display: flex;
align-items: center;
width: 45px;
flex-direction: row-reverse;
margin-right: 5px;
}

.jqx-grid-column-header[sort][sort-index] .sorticon:before {
content: attr(order);
font-size: 11px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: var(–jqx-primary);
color: var(–jqx-primary-color);
padding: 5px;
margin-left: 5px;
height: 8px;
box-sizing: content-box;
}

.sorticon.ascending .jqx-grid-column-sorticon {
display: flex;
align-items: center;
transform: rotate(180deg);
transition: transform 0.2s ease-out;
left: -1px;
}

.sorticon.descending .jqx-grid-column-sorticon{
transform: rotate(0deg);
display: flex;
align-items: center;
transition: transform 0.2s ease-out;
}

.jqx-icon-arrow-down, .jqx-icon-arrow-down-hover, .jqx-icon-arrow-down-selected {
background-image: none;
font-family: jqx-icons;
}

.jqx-icon-arrow-down:after, .jqx-icon-arrow-down-hover:after, .jqx-icon-arrow-down-selected:after {
content: var(–jqx-icon-arrow-down);
}

Please note that there could be styling bugs, which you can manually resolve if you face them

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts