@Findus23 opened this Issue on May 6th 2018 Member

I just wrote a plugin which allows switching between languages quickly. For this I created a UI_CONTROL_MULTI_SELECT with all languages (the same can be reproduced with https://plugins.matomo.org/RestrictLanguageSelection as I am using the same selector)

I can't really describe it (it feels a bit like Lights Out), so here is a video of a try to add French to German:
high quality


@tsteur commented on May 6th 2018 Member

I'm not 100% sure I get what you mean but yes it is not ideal and it is kind of by design like this. This is simple the multi select we get from materializecss. In the coming up 1.0.0 they improved it a little bit see second example here: https://materializecss.com/select.html but still not ideal. There is not too much we can do I guess unless we embedded another UI library just for this. At some point we will maybe rather remove this feature (maybe in Matomo 4) and ask users to use the new multi tuple instead.

I think you may rather want to use the new multi tuple feature see https://github.com/matomo-org/matomo/blob/3.x-dev/plugins/Morpheus/templates/demo.twig#L362 .

You can use it like this:

            $this->makeSetting('fooBar', array(), FieldConfig::TYPE_ARRAY, function (FieldConfig $field) {
                $field->title = 'Foo Bar';
                $field->description = 'Optionally set one or multiple custom dimensions in scope visit.';
                $field->uiControl = FieldConfig::UI_CONTROL_MULTI_PAIR;
                $field1 = new FieldConfig\MultiPair('Language', 'languageCode', FieldConfig::UI_CONTROL_SELECT);
                $field->uiControlAttributes['field1'] = $field1->toArray();
@Findus23 commented on May 6th 2018 Member

I’m not entirely sure if it is by design that it is impossible to select an entry as always others get selected and removed kind of randomly (Gallicanian and Greek in the above video) and even others get highlighted in the drop down.

But the new multi tuple feature seem even more user friendly than an correctly working multiselect.

@tsteur commented on May 7th 2018 Member

Lets remove this UI control in Matomo 4

@liquidlx commented on September 23rd 2019

Hello, I had the same problem and I've found a solution for this one.

But first, I would like to say that this problem is probably caused by the old version of the materialize.

How to fix
We need to add the class 'browser-default' from the materialize to use the browser multi select, using the $uiControlAttributes like that:
$field->uiControlAttributes = array('class' => 'browser-default');

Captura de Tela 2019-09-23 às 16 11 23

But when we add the class, the label stay behind the selector like that:

Captura de Tela 2019-09-23 às 12 43 33

We can fix this making a custom css. See https://developer.matomo.org/guides/working-with-piwiks-ui.

Here's my custom css for that:

Captura de Tela 2019-09-23 às 16 18 27

The 'for' attribute in the label is the value of the $name variable.

Final result:

Captura de Tela 2019-09-23 às 16 20 22

We can add any style for the select (and javascript).

@tsteur commented on September 23rd 2019 Member

cheers @liquidlx feel free to issue a PR for that. Otherwise in Matomo 4 we're planning to upgrade to latest version of materializecss which maybe fixes the issue as well but we're not sure.

Powered by GitHub Issue Mirror