Canvas Support

Language Selector with selectpicker bs

5 replies·opened Mar 22, 2021
D
DearEdgarMar 22, 2021

Hi:

There's a way to put a language selector in top-bar with selectpicker bs instead of <ul><li> ?
I tried to customize it but I got lots of incompatibility with CSS...
Any suggested way to do this?

Thank you for your attention!

Regards,

Edgar Afonso

S
SemiColonWebSTAFFMar 23, 2021

Hello,

The BS SelectPicker is not designed to adapt to the Default Top Links styling when used in the Top Bar. The SelectPicker will use its own styling and is currently working as expected. Can you please let us know how are you trying to make this look so that we can provide you further assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

D
DearEdgarMar 23, 2021

Hi! Thank you for our reply!

Basically, I wanted it look like the example you provided in the demo-cleaner.html but with selectpicker bs as I am implementing this on the OctoberCMS and the native plugin uses bs selectpicker.

Thank you in advance.

S
SemiColonWebSTAFFMar 24, 2021

Hello,

Thanks for your Patience!

We have tried working on this but unfortunately, this will require a Lot of Custom Styling to make the BS SelectPicker in the Top Bar to look like the Top Links section. You can currently only use the Top Links Menu List Items for adding Menus to the Top Bar or you can consider adding the Bootstrap Dropdowns to the Top Links. The BS SelectPicker currently works best as a Component for Forms. We will definitely try adding Default Styling for this to be used in the Top Bar in the Future Versions of Canvas.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

D
DearEdgarMar 25, 2021

Hello:

Thank you for the support. Nevermind!
I found a way to solve the problem. I used your code within octobercms plugin.

Here's the way I made it, if someone is interested:

<div class="top-links">
  <ul class="top-links-container">
  <li class="top-links-item" style="padding: 0 12px;">
     {% component 'localePicker' %}
  </li>
  </ul>
</div>

In the partial:

<img src="{{ 'assets/images/flags/flag-pt.png'|_|theme }}" style="width: 18px; margin:  0 10px 0 0;" alt="Lang">{{ 'Português'|_ }}
<ul class="top-links-sub-menu">
	{% for code, name in locales %}
	<li class="top-links-item"><a href="#" data-request="onSwitchLocale" data-request-data="locale: '{{ code }}'">
		{% if code == 'pt' %}
		<img src="{{ 'assets/images/flags/flag-pt.png'|theme }}" alt="Lang">
		{% elseif code == 'en' %}
		<img src="{{ 'assets/images/flags/flag-en.png'|theme }}" alt="Lang">
		{% endif %}
		{{ name }}</a></li>
    {% endfor %}
</ul>

Now it working fine!

Thank's for your interest on this!

S
SemiColonWebSTAFFMar 25, 2021

Hello,

Glad that your issue was resolved and Thanks for sharing your solution.

Please do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard