[VUE 3] Add custom select to sidebar widget

Post by **Maxim Gorkovsky** » Fri Jan 14, 2022 6:19 pm

I see. You need to check page markup and styles. Sidebar uses flex layout and probably smth either fills content or button itself gets aligned to the bottom.

Post by **Animal** » Fri Jan 14, 2022 8:10 pm

Looks like your panel needs a maxHeight. It looks like it’s pushing everything else off the bottom of the sidebar when it’s expanded.

Post by **luiscloud** » Tue Jan 18, 2022 11:55 am

I checked html and this div broke it. When panel is collapsed that div with flex 1 appear. I added it "display: none" and panel position is fixed now.

<div class="b-widget b-list b-resourcefilter b-widget-scroller b-resize-monitored b-multiselect b-empty" id="b-resourcefilter-1" data-ref="resourceFilter" tabindex="0" data-item-index="2" style="overflow: hidden auto; flex: 1 1 auto; min-height: 110px;"></div>

Post by **Animal** » Tue Jan 18, 2022 12:04 pm

The resourceFilter is that checkbox list which chooses which resources (Calendars) you want to show events for.

Do you want it to not be present at all? Or Would you like to just change its flex?

This is all up to you as to how you fit all your widgets in the sidebar. All that is part of the items. You can configure every item.

They are all Widgets and all have the full Widget config set which you can set as you wish.

Post by **luiscloud** » Tue Jan 18, 2022 12:43 pm

If i deploy my VUE app i cant see the calendar icons.

Calendar use bootstrap icons, true? I must add it manually?

Like on this url https://bootstrap-vue.org/docs/icons ? Or how?

<head>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.css" />
  <!-- Load Vue followed by BootstrapVueIcons -->
  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>

Thanks!

Post by **luiscloud** » Tue Jan 18, 2022 12:44 pm

About resourceFilter, i have "eventFilter : null," on my calendar config. I must add "resourceFilter: null" too?

Post by **Animal** » Tue Jan 18, 2022 2:55 pm

luiscloud wrote: ↑Tue Jan 18, 2022 12:44 pm
About resourceFilter, i have "eventFilter : null," on my calendar config. I must add "resourceFilter: null" too?

Only if you want the resourceFilter to be not there at all.

Post by **Animal** » Tue Jan 18, 2022 2:57 pm

luiscloud wrote: ↑Tue Jan 18, 2022 12:43 pm
If i deploy my VUE app i cant see the calendar icons.

Calendar use bootstrap icons, true? I must add it manually?

Like on this url https://bootstrap-vue.org/docs/icons ? Or how?
<head>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.css" />
  
  <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>
Thanks!

It uses Font Awesome

https://fontawesome.com/

Post by **luiscloud** » Thu Jan 20, 2022 12:25 pm

Thanks for all.

One more question please, how can i change the "orange" default color of calendar (today border color etc) to my corporative colors?

How is the correct form to update palette colors of this calendar?

Post by **alex.l** » Thu Jan 20, 2022 1:16 pm

Hi luiscloud,

Please create a new thread for every new question, that's our general forum rule viewtopic.php?f=1&t=772

Thank you!

Support Forum

[VUE 3] Add custom select to sidebar widget