Simon Comments - Answer Overflow

Topics

Simon

KPCKevin Powell - Community

•Created by noob on 12/16/2024 in #front-end

how to create an otp input field

one-time-code is a valid value for the autocomplete attribute. Additionally use more attributes like inputmode, maxlength, pattern on demand. The rest really depends on the projects design and requirements – several articles and examples can be found by searching otp input field with your favorite search engine. Or maybe you are lucky and somebody else here has more time than me (: cheers

2 replies

KPCKevin Powell - Community

•Created by snxxwyy on 12/10/2024 in #front-end

:has() alternatives

What epic said, and ... imo – a clean alternative involves JavaScript because vice versa :has() is our replacement for JavaScript. If the missing rules wouldn't render the content unreadable then personally I would use "critical" selectors. Further reading https://caniuse.com/?search=has, https://gs.statcounter.com/browser-market-share

20 replies

KPCKevin Powell - Community

•Created by i_lost_to_loba_kreygasm on 12/4/2024 in #front-end

Do I need to use absolute or relative positioning for the image ?Or how do I approach this layout?

#how-to-ask-good-questions

10 replies

KPCKevin Powell - Community

•Created by devdrivenai on 12/4/2024 in #front-end

Is `min-width` necessary or best practice for containers?

-# highly opinionated, I am a junior front-andy imo; There is no generally valid answer to this, accompanied with an « it depends ». short; I do not use that property by default. We can not fully workaround all of the designers or content creators grievances nor users quirks simultaneously. I would be eager to see a project of the person you have argued with, where they successfuly preserved design-ideas mainly by setting min-width. Adding a min-width, if anything, would do more for the designers peace of mind rather than for the users accessibility. When the layout and/or contents are not designed to work at small sizes, the forced scrollbar will not fix that any better than what the browser automatically does with overflow in the first place. It can be important to keep the content or call-to-actions intact (like words or buttons) at all costs – but bruteforcing a specific layout across viewports not realistic. There can be cases where an inner scrollbar makes sense when there is hardly any better alternative to display that content – like a shopping-cart list for checkouts. But then again that is to preserve the content's readability. A card usually is a mere design choice and does not need to stay that way. It is fair to say↦ test at reasonable sizes or zoomed, especially when it's relevant for the main audience. Anything else is bluntly said pedantic. Beyond that, 200px or extreme-zoom are an arbitrary and niche measurement or situation. If one wants to back up some kind of reasoning for this, at least they should use common and real life viewports resulting from statistics. E.g. 320 or 375px for handheld devices (Dec 2024).

5 replies

KPCKevin Powell - Community

•Created by Dovah on 11/23/2024 in #front-end

Fixed element not scrollable when resizing mobile screen?Bottom of the screen is eating the element.

No description

36 replies

KPCKevin Powell - Community

•Created by Dovah on 11/23/2024 in #front-end

Fixed element not scrollable when resizing mobile screen?Bottom of the screen is eating the element.

(: while the design may work for handheld-portrait, look at the wasted vertical space in landscape. This is a self-made issue – so before trying to solve this technically, you could ask yourself «does this viewport really need to look like that or should it rather work?» ~imo learning to be d'accord with form follows function is a valuable mindset lesson 🙆 Aside from checking for inspiration, for this size you could try; allow overlay full height, rearrange the heading section, scale the elements, reduce margin/padding, etc.

36 replies

KPCKevin Powell - Community

•Created by Dovah on 11/23/2024 in #front-end

Fixed element not scrollable when resizing mobile screen?Bottom of the screen is eating the element.

Good job on recognizing the issues – If you are free to adapt the design, I would advise you to seek inspiration from other sites that you visited and know of a similar function. Visually check how they solve it. Maybe find a hint on how to improve what you have so far. Most commonly scaling down typography, loosening reins on design ideas and sometimes cutting secondary content are effective ways to gain space in responsive webdesign. For that perhaps get comfortable with CSS container- and media-queries to provide fitting rules at specific sizes (or ranges). Just be mindful of your own sanity. Sometimes settling with the ugly is a better approach than min-maxing for niche viewports. Don't get me wrong, there are likely band-aid fixes that could force design. But I am uncomfortable with suggesting these as they could result in unfitting bad practices. -# band-aid like overflow:auto; fixes the issue, but not really

36 replies

KPCKevin Powell - Community

•Created by Dovah on 11/23/2024 in #front-end

Fixed element not scrollable when resizing mobile screen?Bottom of the screen is eating the element.

Do you have freedom over how it can look or do you need to follow a strict template?

36 replies

KPCKevin Powell - Community

•Created by Dovah on 11/23/2024 in #front-end

Fixed element not scrollable when resizing mobile screen?Bottom of the screen is eating the element.

I feel like you don't need overflow or fixate rules as there is nothing to worry about when overlaying the viewport. Especially when developing for handheld devices you can (should) use responsive units. You may lean to absolute units when you can be certain that the concerned element won't cause any issues. Further perhaps you want to think about what happens when the user flips the device to landscape mode. For the inner structure of the overlay, flex or grid can do some heavy lifting. Here is a quick & dirty example https://jsfiddle.net/1jqruwhd/2/ – keep in mind that this approach and/or parts of it may neither be correct nor good.

36 replies

KPCKevin Powell - Community

•Created by Flora on 11/28/2024 in #front-end

how to adjust this space around my table?

The ul element comes with a padding-left by default. If you want to change it you need to apply rules to override that:

<ul style="padding-left:0;">

<ul style="padding-left:0;">

For further research https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists -# hint: many HTML elements come with default stylings – can be more than one rule

5 replies

KPCKevin Powell - Community

•Created by Dovah on 11/23/2024 in #front-end

Fixed element not scrollable when resizing mobile screen?Bottom of the screen is eating the element.

No description

36 replies

KPCKevin Powell - Community

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

a 50/50 items in the -- no wrapper mindset with css grid

mmhhyeah good input ... I approached this by declaring an additional class.split to add another grid

grid-template-columns:
  minmax(0, 1fr)
  repeat(auto-fit, minmax(50%, 200px))
  minmax(0, 1fr);
}

grid-template-columns:
  minmax(0, 1fr)
  repeat(auto-fit, minmax(50%, 200px))
  minmax(0, 1fr);
}

and adding :has() conditions to let these parents further act on their children. experimental context ... and I am unsure if I like it. lol – it feels a wee bit gimmicky and unclean

30 replies

KPCKevin Powell - Community

•Created by Dovah on 11/23/2024 in #front-end

Fixed element not scrollable when resizing mobile screen?Bottom of the screen is eating the element.

I get what you are saying, but imo it can not be too big if it adapts to the height as vh is a relative unit – there needs to be some kind of limitation. And then comes the overflowing content which you want to fall back to the flow of the structure rather than be handled inside the fixed overlay. Maybe there is some fancy-schmancy way to do it, generally speaking this seems more of a design issue rather than code 🫠

36 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 11/19/2024 in #front-end

how to remove gap of text align end.

148 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 11/19/2024 in #front-end

how to remove gap of text align end.

148 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 11/19/2024 in #front-end

how to remove gap of text align end.

@peterpumkineaterr have you designed your mobile to desktop layouts – because that can help you figure out your designs limitations

148 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 11/19/2024 in #front-end

how to remove gap of text align end.

Are you telling it that there should be a max-width?

148 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 11/19/2024 in #front-end

how to remove gap of text align end.

I assume the title should stretch across the same width as the name does in both cases, single-line and multi-line. I feel like exporting both the name+title into a single scalable vector graphic instead of having to micro-manage two seperate text-entities would get you closer to what you are trying (opinions?). To prevent the title becoming unreadable (small) maybe even have two file versions, one with the name+line-break-title and one without to switch between the two according to the parents container-size. Solving this with text elements will probably lead you to unpleasant results considering the many factors that play into rendering. ... maybe it's possible, there are always some crazy CSSers out there In any case "pixel perfect" is not to be expected.

148 replies

KPCKevin Powell - Community

•Created by Faisu0p on 11/19/2024 in #front-end

Content going upwards and out of viewport when adding new things below

Isolating the problematic html and css in a coding snippet can even help you solve it by yourself. If you can't recreate the issue it's perhaps caused by something else 🫠

48 replies

KPCKevin Powell - Community

•Created by peterpumkineaterr on 11/19/2024 in #front-end

how to remove gap of text align end.

I could be entirely wrong. What happens if it's aligned right? – is the second word cut off? 😶‍🌫️

148 replies