[FEATURE] I want to prevent horizontal scroll, what should I do

[Mikhail Sachkov]

I have a problem. I do not want to see horizontal scroll bar. Can I select period to display or may-be other hack.

[Jeremy Jone]

Have you considered overwriting ::-webkit-scrollbar ?

[Mikhail Sachkov]

<template>
  <div class="flex  flex-col h-screen p-10">
    <div class="flex justify-end">
      <button
          @click="() => ToggleAddPopup('addCustomerModalTrigger')"
          class="justify-self-end bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-5 "
      >
        Add Work Period
      </button>
    </div>
    <XGantt
        class="w-full"
        ref="gantt"
        data-id="id"
        start-key="startTime"
        end-key="endTime"
        highlight-date
        locale="ru"
        :row-height="70"
        :show-weekend=true
        :data=list
        :disableHorizontal=true
        :header-style="{bgColor: '#F9FAFB', textColor: '#374151'}"
        :body-style="{textColor: '#374151'}"
        unit="day"
        @row-click="rowClick"
    >

      <XGanttSlider
          prop="name"
          date-format="YYYY-MM-DD HH:mm"
          bg-color="#828385"
          empty-data=""
          :allow-link="false"
          class="center"
      >
        <template v-slot="{col, row, $index, level}">
          <div @contextmenu.prevent="rowClick" class="flex text-white  place-content-center">
            {{ row.startTime }}
          </div>
        </template>
      </XGanttSlider>

      <XGanttColumn prop="Сотрудники" width="250">
        <template #default="{ row }">
          <div class="flex flex-inline items-center">
            <img :src=row.image width="30" class="m-2">
            <div class="w-full h-16 flex items-center">
              <label>{{ row.name }}</label>
            </div>
          </div>
        </template>
      </XGanttColumn>
    </XGantt>
  </div>

</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import moment from "moment";
import {storeToRefs} from "pinia";
import {useWorkPeriodsStore} from "@/store/workPeriods";

const {workPeriods} = storeToRefs(useWorkPeriodsStore())
const {fetchWorkPeriods} = useWorkPeriodsStore()

const base_url = import.meta.env.VITE_BASE_URL + '/media/';

onMounted(() => {
  fetchWorkPeriods();
})


const list = computed(() => {
  let transform = [];
  for (const a of workPeriods.value) {
    transform.push({
      startTime: moment(String(a.beginDatetime)).format('YYYY-MM-DD HH:mm'),
      endTime: moment(String(a.endDatetime)).format('YYYY-MM-DD HH:mm'),
      name: a.employee?.name,
      index: parseInt(a.id),
      image: base_url + a.employee?.photo,
      children: [],
    })
  }
  return transform;
})


</script>

<style scoped>
::-webkit-scrollbar { visibility: hidden; }
</style>

Does not work (
And if it will be hidden, how to select period to display?

[Jeremy Jone]

height: 0

[Mikhail Sachkov]

Does not help (

[Jeremy Jone]

Override the scrollbar style of the related container by setting its height to 0. I don't prevent any style inject.