borders are incorrect

[RejDev]

Hello,

Describe the bug the last blocks for the sub-resources, do not have right borders, the screenshot describes the anomaly well :

Screenshots

version : "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.5"

Thanks.

[hawkeye64]

@RejDev That is actually correct. It's the other ones that shouldn't have a right-border. Otherwise, it looks messy when using the bordered attribute.

That being said, I am not seeing the issue, except the bottom-border should not be on the last child (Olivia):

Right now I am scratching my head on what could be causing your issue.

[hawkeye64]

I think what is happening is that your calendar is bordered, but you have restricted the amount of time showing, so it's not going 100% width. Does that sound right? Because your left side appears bordered. Otherwise, it would look like this:

[hawkeye64]

Ok, I have fixed the border issue, but I don't think that will solve your problem. I need to figure out why your intervals are not taking 100% width of the calendar. Unless you have explicitly set the width or not set it (there may be a default defined by css var). Try changing your cell-width property.

[RejDev]

Hello again, (I really appreciate your responsiveness)

For the calendar I only use this for the style :style="calendarStyle" and bordered attribute

here is a sample of the calendar code :

<QCalendarResource
            ref="calendar"
            v-model="selectedDate"
            v-model:modelResources="resources"
            resource-key="id"
            resource-label="name"
            :interval-start="6"
            :interval-count="12"
            animated
            bordered
            :style="calendarStyle"
            @change="onChange"
            @moved="onMoved"
            @resource-expanded="onResourceExpanded"
            @click-date="onClickDate"
            @click-time="onClickTime"
            @click-resource="onClickResource"
            @click-head-resources="onClickHeadResources"
            @click-interval="onClickInterval"
          >
            <template #resource-label="{ scope: { resource } }">
              <div class="col-12">
                <q-chip>
                  <q-avatar>
                    <img src="https://cdn.quasar.dev/img/avatar.png" />
                  </q-avatar>
                  {{ resource.name }}
                </q-chip>
              </div>
            </template>

            <template #resource-intervals="{ scope }">
              <template v-for="(event, index) in getEvents(scope)" :key="index">
                <q-badge outline :text-color="event.text_color" :color="event.border_color" :label="event.title" :style="getStyle(event)" draggable="true" />
              </template>
            </template>
          </QCalendarResource>

 const resourceIntervalWidth: Ref<number> = ref(100);
 const resourceWidth: Ref<number> = ref(142);
 const intervalMinutes: Ref<number> = ref(15);

 const calendarStyle = computed(() => {
      return {
        '--calendar-resources-width': resourceWidth.value.toString() + 'px',
      };
    });

the calendar is inside these div :

<div style="display: flex; flex-direction: row; justify-content: center; width: 100%">
        <div style="width: 100%; display: flex; flex-direction: column">
        ...

thank you so much.

[hawkeye64]

If yu wouldn't mind forking this CodePen and make it like what you have, I'd appreciate it: https://codepen.io/Hawkeye64/pen/xxqQgbG?editors=1010

[RejDev]

ok i will try to do this now

[hawkeye64]

Let me know and thanks (super busy day today). Our office was broken into and some computers were taken... :(

[RejDev]

I'm really sorry for you, hope you haven't lost important data, the computers are replaceable but not the data. it is surely someone who knows what is in the office :/ (do you have surveillance cameras?)

~~[I can't reproduce the bug on CodePen, but in local machine i can even with an blank project]~~ I noticed that you pushed a new version (4.0.0-beta.6) , I made the update and now I only have the bug with the slot

otherwise, i've found a way, without this slot the problem disappears

<template #resource-intervals="{ scope }">
              <template v-for="(event, index) in getEvents(scope)" :key="index">
                <q-badge outline :text-color="event.text_color" :color="event.border_color" :label="event.title" :style="getStyle(event)" draggable="true" />
              </template>
</template>

when i delete these lines i have this result (version 4.0.0-beta.5) :

now with the version 4.0.0-beta.6 :

and without Slot ( #resource-intervals )

[hawkeye64]

I'm really sorry for you, hope you haven't lost important data, the computers are replaceable but not the data. it is surely someone who knows what is in the office :/ (do you have surveillance cameras?)

They use a metal bar to break open our front door. The front door to the building was left ajar. A girl came in, wandering in from the street, and took a brand new laptop given to a new hire. It's git, so everyone has a distributed repo copy. We deal with cameras, so we have an excessive amount and have lots of footage.

Anyway, maybe a codesandbox then?

[RejDev]

Hello, (as long as it is only one laptop, is it not a big problem and it will allow to reinforce the security afterwards) otherwise, i found the solution, this is the part that causes the bug :

            <template #resource-intervals="{ scope }">
                <template v-for="(event, index) in getEvents(scope)" :key="index">
                  <q-badge outline :text-color="event.text_color" :color="event.border_color" :label="event.title" :style="getStyle(event)" draggable="true" />
                </template>
            </template>

when <template #resource-intervals> is followed by another <template> or raw text, then this css class which is active

 .q-calendar-resource__resource--interval:last-child {
    border-right: none;
}

so it suffices to encapsulate the second <template> (or any text contents) by a <div> and the problem disappears, like this :

 <template #resource-intervals="{ scope }">
              <div>  <----@@@@@@@@@@@@@@@@
                <template v-for="(event, index) in getEvents(scope)" :key="index">
                  <q-badge outline :text-color="event.text_color" :color="event.border_color" :label="event.title" :style="getStyle(event)" draggable="true" />
                </template>
              </div> <----@@@@@@@@@@@@@@@@
 </template>

---

https://codepen.io/rejdev/pen/KKqYvQZ here is the code to test, scroll to the end of the table on the right and you will see that before the X there is no border, but if you add the div (by uncommenting <!-- -->), the problem disappears

Big thanks for your involvement @hawkeye64 :+1:

[hawkeye64]

Yes, that's because the #resource-intervals slot is meant to have absolute positioning and you would need to add a div to do that.

I can't figure out why, when adding the div as absolute, the right border shows up regardless (doesn't think it's :last-child

https://codepen.io/rejdev/pen/KKqYvQZ?editors=1010

[RejDev]

I think that in the absence of a child (div) ,:last-child is activated by default ..

[hawkeye64]

I get it, adding the div is putting it on the end, but the absolute positioning is removing it from the flow, but it must be still seeing it.

I am not entirely sure how to fix that at this point. If you have ideas, let me know, otherwise, I will have to ponder/play with it for a while.

[RejDev]

when I completely delete this css class, the right border problem disappears, and we no longer need to have a <div>

 .q-calendar-resource__resource--interval:last-child {
    border-right: none;
}

[RejDev]

I think I found the solution, I modified these css classes and apparently it works. https://codepen.io/rejdev/pen/VwWJvxQ

The patch ( all border issues, for resources and sub-resources ) :

.q-calendar-resource__resource--interval:last-child {
  border-right: var(--calendar-border);
}

.q-calendar-resource__head--interval:last-child {
    border-right: var(--calendar-border);
}

.q-calendar-resource__resource--row {
    border-top: none;
}

.q-calendar-resource__resource--interval {
    border-right: var(--calendar-border);
    border-bottom: var(--calendar-border);
}

.q-calendar-resource__resource {
    border-right: var(--calendar-border);
  border-bottom: var(--calendar-border);
    color: var(--calendar-color);
    background: var(--calendar-background);
    min-width: var(--calendar-resources-width);
    max-width: var(--calendar-resources-width);
}

.q-calendar-resource__resource--section {
    border-right: var(--calendar-border);
    color: var(--calendar-color);
    background: var(--calendar-background);
    min-width: var(--calendar-resources-width);
    max-width: var(--calendar-resources-width);
    border-bottom: var(--calendar-border);
}

.q-calendar-resource .q-calendar__child--expanded > .q-calendar-resource__resource--row {
    border-top: none !important;
}

---

comparison :

[hawkeye64]

The problem with this is when you have more intervals that the parent width and you can scroll, you end up with the double border on the end: