thethingisback Comments - Answer Overflow

Topics

thethingisback

KPCKevin Powell - Community

•Created by thethingisback on 8/26/2024 in #front-end

React useRef() is being useless. Can't prevent re-fetching on form clear

thank you. I tried both useCallback and useMemo and still seeing the fetch call being re-run, but I've lightened significantly the fields being retrieved from the table, so I think I'm just going to roll with that for now. I'll have to come back and play with this more later.

4 replies

KPCKevin Powell - Community

•Created by thethingisback on 6/28/2024 in #front-end

grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content

right i gotcha

24 replies

KPCKevin Powell - Community

•Created by thethingisback on 6/28/2024 in #front-end

grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content

thank you

24 replies

KPCKevin Powell - Community

•Created by thethingisback on 6/28/2024 in #front-end

grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content

okay, i'll give it a read

24 replies

KPCKevin Powell - Community

•Created by thethingisback on 6/28/2024 in #front-end

grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content

right no i get what you're saying, i'm just wondering how to achieve this same respnsiveness if I'm hard coding a width in the html

24 replies

KPCKevin Powell - Community

•Created by thethingisback on 6/28/2024 in #front-end

grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content

So the grid container (.photos_div_right) which contains the child div grid items, which themselves contain the <img/> elements, is itself a child of .photos_div. Here is a wider view:

<div className="photos_div" scrollable="true" ref={photosDivRef}>
 <div className="photos_div_right">
    {vehiclePhotos.map((photo, index) =>
      index > 0 ? (
        <div key={index}>
          <PhotoView src={`${photo}`}>
            <img
              src={`${photo}`}
              alt={`vehicle-${stockNumber}-photo-${index}`}
                onClick={openPreviewer}
              />
            </PhotoView>
          </div>
        ) : null
      )}
    </div>
</div>

<div className="photos_div" scrollable="true" ref={photosDivRef}>
 <div className="photos_div_right">
    {vehiclePhotos.map((photo, index) =>
      index > 0 ? (
        <div key={index}>
          <PhotoView src={`${photo}`}>
            <img
              src={`${photo}`}
              alt={`vehicle-${stockNumber}-photo-${index}`}
                onClick={openPreviewer}
              />
            </PhotoView>
          </div>
        ) : null
      )}
    </div>
</div>

And this .photos_div container, has a responsive height and width:

.photos_div{
  width: 100vw;
  height:50vw;
  min-height:14rem;
  max-height:30rem;
}

.photos_div{
  width: 100vw;
  height:50vw;
  min-height:14rem;
  max-height:30rem;
}

This container responsiveness is affecting .photos_div_left (its grid container child)'s height, which is in turn affecting the sizes of its grid cell divs' heights.

24 replies

KPCKevin Powell - Community

•Created by thethingisback on 6/28/2024 in #front-end

grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content

the images are rendering in the same way, same widths, behaving uniformly across browsers, but this is their setting:

.photos_div_right>* {

  >img{
        height:100%;
        width:auto;
  }
}

.photos_div_right>* {

  >img{
        height:100%;
        width:auto;
  }
}

24 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/26/2024 in #front-end

Handling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?

here we go: https://github.com/nnall/hm-frontend-Nick.git

4 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/26/2024 in #front-end

<a/> in component return being auto-assigned "button" class somehow, overwriting my classNames

Nevermind, I found it, was in the wrong file LOL Thank you, apologies for that. I'll delete the post.

9 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/26/2024 in #front-end

<a/> in component return being auto-assigned "button" class somehow, overwriting my classNames

yea, i just removed it on purpose to test

9 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/26/2024 in #front-end

<a/> in component return being auto-assigned "button" class somehow, overwriting my classNames

No description

9 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/26/2024 in #front-end

<a/> in component return being auto-assigned "button" class somehow, overwriting my classNames

this is my component return right now:

  <li>
              <a href="/" className="footer_link footer_quickLinks">
                <Image
                  className="footer_icon quickLink_img"
                  src={home_icon}
                  alt="home icon"
                />
                Home
              </a>
            </li>

            <li>
              <a
                className="footer_link footer_quickLinks"
                href="https://maps.app.goo.gl/1LFzqhHTRoqRSjaZ8"
                target="_blank"
              >
                <Image
                  className="footer_icon quickLink_img"
                  src={locations_icon}
                  alt="locations icon"
                />
                Locations
              </a>
            </li>

  <li>
              <a href="/" className="footer_link footer_quickLinks">
                <Image
                  className="footer_icon quickLink_img"
                  src={home_icon}
                  alt="home icon"
                />
                Home
              </a>
            </li>

            <li>
              <a
                className="footer_link footer_quickLinks"
                href="https://maps.app.goo.gl/1LFzqhHTRoqRSjaZ8"
                target="_blank"
              >
                <Image
                  className="footer_icon quickLink_img"
                  src={locations_icon}
                  alt="locations icon"
                />
                Locations
              </a>
            </li>

9 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/26/2024 in #front-end

<a/> in component return being auto-assigned "button" class somehow, overwriting my classNames

yea just tried that, still getting this 'button' class in the browser somehow.

9 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/22/2024 in #front-end

Git repo 'rebasing' message in terminal: "Please enter the commit message for your changes"

I got it working actually, I can just close here I guess? although I do have another existing issue/post here if you cared to look, involving @react-spring/parallax : https://discord.com/channels/436251713830125568/1231702825529114654 Thank you though either way!

6 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/22/2024 in #front-end

Git repo 'rebasing' message in terminal: "Please enter the commit message for your changes"

sorry I'll close it, thanks

6 replies

KPCKevin Powell - Community

•Created by thethingisback on 3/4/2024 in #front-end

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

This may work: https://codesandbox.io/s/zen-shaw-qpqnt5?from-embed

16 replies

KPCKevin Powell - Community

•Created by thethingisback on 3/4/2024 in #front-end

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

Okay here's a sandbox: https://codesandbox.io/p/sandbox/zen-shaw-qpqnt5?file=%2Fsrc%2Fstyles.css%3A11%2C1 'pickUpToday' is the useState that has to be true in order to render the .conditionalRendDiag dialog, which you can just manually set to true, false. I wish I could say I perfectly replicated the issue from my react project, but the ::backdrop{} pseudo-element in this code sandbox doesn't seem to have any effect on either the conditional or normally-rendered dialogs. Maybe we could figure out why that would be first, get it to work, then test the difference that I was talking about.. In my react project, the conditionally-rendered dialog is not receiving the dialog::backdrop{background:"blue"} CSS setting, and not showing any coloring in its "backdrop", while the other two non-conditional dialogs do reflect this CSS setting.

16 replies

KPCKevin Powell - Community

•Created by thethingisback on 3/4/2024 in #front-end

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

True, I'll post tmrw

16 replies

KPCKevin Powell - Community

•Created by thethingisback on 3/4/2024 in #front-end

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

well, in case anyone else answers here or you care to look, heres also my full un-factored css

16 replies

KPCKevin Powell - Community

•Created by thethingisback on 3/4/2024 in #front-end

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

blast!

16 replies