fluffy bacon Posts - Answer Overflow

fluffy bacon

•Created by fluffy bacon on 8/14/2024 in #front-end

Cannot make grid-container scroll on overflow

I am stumped on what seems like a relatively easy problem: make a grid container scroll when it overflow, specifically in the x direction. However, the container isn't respecting my overflow: scroll. Im stumped.. Codepen below https://codepen.io/fluffybacon-steam/pen/bGPYyMQ Solution: It was my MacOs settings. System Setting -> Appearance -> Show Scrollbars (Always)

23 replies

KPCKevin Powell - Community

•Created by fluffy bacon on 5/30/2024 in #front-end

Trying to inject styles in shadow-dom but element.shadowRoot is always null

SOLVED: Shadow Dom created by the browser cannot be altered. I am trying to style the timeline of an audio player and need to inject a stylesheet into the shadow-dom to do this (::-webkit are not enough). edit: Now this codepen https://codepen.io/fluffybacon-steam/pen/dyENayJ

<audio id="audio-player" controls>
    <source src="<?= $music_mp3 ?>" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<audio id="audio-player" controls>
    <source src="<?= $music_mp3 ?>" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

` after the page is loaded, I go into the dev console and

const d = document.querySelector('#audio-player');
const ds = d.shadowRoot;

const d = document.querySelector('#audio-player');
const ds = d.shadowRoot;

player is defined but player-s is always undefined. Its driving me insane because I really don't want to have to make my own player when all I want to do is change some colors. edit: restored original names

15 replies

KPCKevin Powell - Community

•Created by fluffy bacon on 5/23/2024 in #front-end

SVG's group floating inside container instead of origin'd at 0,0

20 replies

KPCKevin Powell - Community

•Created by fluffy bacon on 3/28/2024 in #front-end

Promise is fulfilling as undefined

I have a component that fetches all the terms of a taxonomy product_type to be displayed on the frontend (WordPress site). Terms are fetched via REST and terms (may) contain a url to a svg file that I wish to directly embedded in the DOM for manipulation. Assumes all SVG files are trusted. fetchSVG() takes in the svg url and returns the <SVG> markup. The problem is await fetchSVG doesn't await at all... the promise immediately resolves to 'undefined' Any help understanding whats wrong would be lovely

     useEffect(() => {
        const fetchData = async () => {
          try {
            const termsResponse = await axios.get('/wp-json/wp/v2/product_type');
  
            const terms = termsResponse.data.map((term) => {
                if (term.title_svg_url) {
                    console.log("Fetching!",term.title_svg_url);
                    const svgContent = fetchSVG(term.title_svg_url);
                    console.log('svgContent (Promise)',svgContent);
                    term.title_svg_url = svgContent;
                }
                console.log('returning term',term);
                return term;
            });
            console.log(terms);
            setTerms(Promise.all(terms));

          } catch (e) {
            console.error('Terms[]:', e);
          }
        };
      
        fetchData();
      }, []);

    const fetchSVG = async (svg_url) => {
        axios.get(svg_url)
            .then((res)=>{
                console.log('fetchSVG',res);
                return res.data;
            })
            .catch((e)=>{
                console.log('fetchSVG',e);
            })
    }

     useEffect(() => {
        const fetchData = async () => {
          try {
            const termsResponse = await axios.get('/wp-json/wp/v2/product_type');
  
            const terms = termsResponse.data.map((term) => {
                if (term.title_svg_url) {
                    console.log("Fetching!",term.title_svg_url);
                    const svgContent = fetchSVG(term.title_svg_url);
                    console.log('svgContent (Promise)',svgContent);
                    term.title_svg_url = svgContent;
                }
                console.log('returning term',term);
                return term;
            });
            console.log(terms);
            setTerms(Promise.all(terms));

          } catch (e) {
            console.error('Terms[]:', e);
          }
        };
      
        fetchData();
      }, []);

    const fetchSVG = async (svg_url) => {
        axios.get(svg_url)
            .then((res)=>{
                console.log('fetchSVG',res);
                return res.data;
            })
            .catch((e)=>{
                console.log('fetchSVG',e);
            })
    }

console.log : Fetching! http://pilgrimsusa.local/wp-content/uploads/2024/03/pilgrims_logo.svg : svgContent (Promise) Promise {<fulfilled>: undefined} ...later : fetchSVG {data: '<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns=…ar(--second); stroke-width: 0px;"></path>\n</svg>\n', status: 200, statusText: 'OK', headers: {…}, config: {…}, …}

2 replies

KPCKevin Powell - Community

•Created by fluffy bacon on 12/5/2023 in #front-end

Grid area and negative numbers

58 replies

KPCKevin Powell - Community

•Created by fluffy bacon on 10/17/2023 in #front-end

Creating a responsive figure with caption, without using layout models (i.e grid, flexbox)

Say you have a parent container of a fixed height but variable width. The parent contains an image and caption. The caption height is set to min-content and will wrap as the parent width's decreases. Can you set the image to fill all the available height, using 'classical' css properties and without overflow?

<figure>
  <img />
  <figcaption>This text will wrap at some point.</figcaption>
</figure>

<figure>
  <img />
  <figcaption>This text will wrap at some point.</figcaption>
</figure>

3 replies

KPCKevin Powell - Community

•Created by fluffy bacon on 10/13/2023 in #front-end

Place-items:center not having the desired effect for grid elements

5 replies

Gaming

Programming