PerpetualWar Comments - Answer Overflow

PerpetualWar

•Created by PerpetualWar on 1/9/2024 in #front-end

Code splitting styling issues

Not sure what you mean, but I usually have a need to override styles of the component from a parent. And it works in normal kind of setup, but with this issue it would not work.

6 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/24/2022 in #front-end

Expandable row content problems

something like this:

.expanded-section {
  padding: 30px 20px;
  border-bottom: $htl-border;
  background-color: $htl-neutral8;
  box-shadow: inset 0 0 8px 1px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-column: 1/-1;
  position: relative;
}
.inner-scroll-container {
  overflow-x: auto;
  width: v-bind('styleWidth'); //from ResizeObserver
  left: 200px; // from scroll position
  border: 1px solid red;
  position: absolute;
}

.expanded-section {
  padding: 30px 20px;
  border-bottom: $htl-border;
  background-color: $htl-neutral8;
  box-shadow: inset 0 0 8px 1px rgba(0, 0, 0, 0.1);
  display: grid;
  grid-column: 1/-1;
  position: relative;
}
.inner-scroll-container {
  overflow-x: auto;
  width: v-bind('styleWidth'); //from ResizeObserver
  left: 200px; // from scroll position
  border: 1px solid red;
  position: absolute;
}

6 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/24/2022 in #front-end

Expandable row content problems

I believe I need just scroll position

6 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/24/2022 in #front-end

Expandable row content problems

Hm actually not sure about IntersectionObserver in this case

6 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/24/2022 in #front-end

Expandable row content problems

I could use combo of ResizeObserver (to calc value for width section) and IntersectionObserver (to calc left for position:absolute), but that seems too much effort for something like this.

6 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/24/2022 in #front-end

Expandable row content problems

I'm open for both CSS only solution, or solution involving JS.

6 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

Im off...cheers guys 😉

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

that kinda threw me off (not having any content in this div to see filter being applied)

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

Word 😉

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

Btw great content @Kevin , I follow you on a regular basis, always nice stuff on youtube chan 😉

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

Thanks a lot, appreciated 😉

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

ye, this codepen is really helpful to see in detail, thanks @Kevin and also @cvanilla13eck

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

its just wrong solution in my case then

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

aha, I think I get it

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

or maybe it is, but since I only have transparent backgrouond color I cannot see it?

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

Agreed, but since this class is only used to 'create;' backdrop, I don't see why normal filter is not applying?

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

aha, so if I understand correctly, it seems I should be using backdrop-fiilter here?

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

<template>
  <Portal to="modal" :order="portalOrder">
    <div class="modal-wrapper">
      <div v-if="open" class="backdrop"></div>
      <Transition name="htl-drop">
        <div v-if="open" class="modal">
          <OutsideClickContainer
            @outside-click="$emit('cancel-modal-action')"
            active
          >
            <div
              :class="
                !customStyleExist ? 'modal-content' : 'modal-custom-width'
              "
              :style="calcCustomStyle"
            >
              <slot />
            </div>
          </OutsideClickContainer>
        </div>
      </Transition>
    </div>
  </Portal>
</template>

<template>
  <Portal to="modal" :order="portalOrder">
    <div class="modal-wrapper">
      <div v-if="open" class="backdrop"></div>
      <Transition name="htl-drop">
        <div v-if="open" class="modal">
          <OutsideClickContainer
            @outside-click="$emit('cancel-modal-action')"
            active
          >
            <div
              :class="
                !customStyleExist ? 'modal-content' : 'modal-custom-width'
              "
              :style="calcCustomStyle"
            >
              <slot />
            </div>
          </OutsideClickContainer>
        </div>
      </Transition>
    </div>
  </Portal>
</template>

this is component html

31 replies

KPCKevin Powell - Community

•Created by PerpetualWar on 11/18/2022 in #front-end

filter vs backdrop-filter

I would prefer filter as it has better browser support

31 replies

Gaming

Programming