FryBlaster Posts - Answer Overflow

FryBlaster

•Created by FryBlaster on 10/15/2024 in #front-end

Make right sticky card disappear when it's close to the bottom

Hi everyone, hope you're doing fine! 🙂 I'm struggling in finding a way to make what the title said. I have a container with two columns where I have in the right column a sticky card that I want to disappear before it touches the bottom edge of its wrapper (I put a border around it, so you can see better what I mean. Here's the codepen for a small demo: https://codepen.io/fracav99/pen/QWejpqE?editors=1100 I'm working on an Angular project and I tried different ways, one using a div to observe with intersection observer (but since inside a @if statement in the template, I'm not able to query it from my component and using viewchild gives me always undefined, even after using afterViewInit hook). So I decided to go with a pure vanilla js solution for this but I cannot came up with a solution using coordinates or elements clientHeight, offsetHeight, etc... Thanks in advance for your time and I'd like to know how you came up with the solution 🙂

7 replies

KPCKevin Powell - Community

•Created by FryBlaster on 9/29/2024 in #front-end

How can I compress the space underneath the element in the first column and first row

5 replies

KPCKevin Powell - Community

•Created by FryBlaster on 8/31/2024 in #front-end

How would you approach and structure this input in an accessible way?

2 replies

KPCKevin Powell - Community

•Created by FryBlaster on 2/18/2024 in #front-end

Why picture isn't taking full height?

2 replies

KPCKevin Powell - Community

•Created by FryBlaster on 1/30/2024 in #front-end

Change color of svg used in ::before when :hover on text

Hi everyone, hope you're doin well! 🙂 I have the following markup (sorry, but I'm from phone): <button class="btn--primary-iconlink"> <span>Add option</span> </button> And this the css: .btn--primary-iconlink { ..other styles &:hover { color: var(--my-color); } } .btn--primary-iconlink > span::before { content: url(my-image.svg); color: inherit; fill: currentColor; } Basically what I want to achieve is, when I hover the button, both the text and svg should change color. But at the moment only the text does. What I'm doing wrong? Maybe I should put the icon directly in the html instead?

7 replies

KPCKevin Powell - Community

•Created by FryBlaster on 1/18/2024 in #front-end

Fluid wrapper

Hi everyone, hope you're doin well! 🙂 I've got a requirements where I should set based on different viewports width, the width of a wrapper container. Here's the list of breakpoints: - From 1440 to 1583 it should adapt to the viewport's width with left and right margin of 64px - From 1584 to 1919 same as before, but with a right and left margin of 72px - From 1920 to 2560 it should be 80% of viewport's width - Above 2560 it should be the 80% of 2560 (2048, basically) I did a first try using media queries to do so, but I wasn't that happy with the result, cause it wasn't that fluid. I was thinking of using calc() for doin the math, but I'm not quite sure. I'm 100% sure that the minimum width of the wrapper is 1312px and the maximum is 2048 (as I said in the last point) Any suggestion? Thanks in advance

34 replies

KPCKevin Powell - Community

•Created by FryBlaster on 1/12/2024 in #front-end

fieldsets are ignoring container's padding

12 replies

KPCKevin Powell - Community

•Created by FryBlaster on 12/3/2023 in #front-end

Is semantically correct have a empty legend inside a fieldset?

Hello friends, hope you're doin well! 😄 I'm facing a situation where I have a form structured in 3 different sections. So my first instinct was to have a form divided into 3 fieldset, like this:

<form>
  <fieldset>
    <legend><!-- This hasn't a proper description --></legend>
    <!-- input fields... -->
  </fieldset>


  <fieldset>
    <legend>Second section</legend>
    <!-- input fields... -->
  </fieldset>


  <fieldset>
    <legend>Third Section</legend>
    <!-- input fields... -->
  </fieldset>
</form>

<form>
  <fieldset>
    <legend><!-- This hasn't a proper description --></legend>
    <!-- input fields... -->
  </fieldset>


  <fieldset>
    <legend>Second section</legend>
    <!-- input fields... -->
  </fieldset>


  <fieldset>
    <legend>Third Section</legend>
    <!-- input fields... -->
  </fieldset>
</form>

As you can see, everyone has a legend briefly describing what section is about, except the first. I'm wondering, is correct to use the legend tag in this case, from a semantic standpoint? Or should I structure the form in a different way? Sorry in advance if it's not quite clear, so ask further if you need more detail!

4 replies

Gaming

Programming