interpod Posts - Answer Overflow

Topics

interpod

Explore posts from servers

RReactiflux KPCKevin Powell - Community

KPCKevin Powell - Community

•Created by interpod on 8/4/2024 in #front-end

How to handle small screens in css ? Is small font good practise ? (shadcn-ui + tailwind)

This question is coming back regularly to my head when i deal with responsive design for small screen especially. I am using shadcn-ui and tailwind for design. Default font size is 16px (iirc). For desktop everything seems to be fit well but when I am doing responsive design its not so awesome. For example, iphone 16 and card component, seems like padding and text is too big, could be small i guess. I approach most of the time this problems in either two ways - doing everything by hand and component level using media breakpoints - making everything using em unit then setting font-size on the component level recently I was thinking maybe I should set breakpoints for body font size level (rem unit). (and because everything seems to be working on rem units it should scale out of box right ? ) How such stuff is solved in real world apps? What are good practise ? Thanks

13 replies

KPCKevin Powell - Community

•Created by interpod on 8/4/2024 in #front-end

How to create two aligned columns with unknown items size.

I have card like this: https://codepen.io/H4ds0n/pen/RwzVMKG What I want is two columns (i do not know the width of label and its percentage at build time). Two even grid column is bad because parent container is too big for its children. Flexbox wont work because size of children is not know at the build time (cannot set something like with:300 px) and I would like to make it resposive. Any advices ?

31 replies

KPCKevin Powell - Community

•Created by interpod on 11/5/2023 in #front-end

Component similar to google input

Hi, I am looking for component similar to google browser input. You can type something and you will get autcomplete. I was looking throught internet (I am using shadcn-ui) but wasn't able to find anything like this. I endup with react-select and <input/> as w input. Do you guys have any ideas if there is such component available somwhere in react? Thanks

24 replies

KPCKevin Powell - Community

•Created by interpod on 9/18/2023 in #front-end

Background overlay with overflow html

Hi, My css structure looks like this:

<html> //scrollable overflow
    <div className="fixed inset-0"><loadingSpinenr/></div>
</html/>

Is there possbility to provent of background scrolling w css when loading spinner visible ?

11 replies

KPCKevin Powell - Community

•Created by interpod on 9/15/2023 in #front-end

How to make sticky header without knowledge about its height.

My app structure looks like this: https://codepen.io/H4ds0n/pen/MWZvBGP So i thought ok then, i will make my body 100dvh and ten overflow:scroll and put the header sticky. And everything was ok utill I started to working with react-select and its dropdown. When dropdown shows then weird thing started going on (it seems like html was scrolling down even if target dropdown was body ??) One solution I saw was that people were making header fixed but then the content has to have padding-top with height the same as height of the header. How do I do this properly ?

1 replies

KPCKevin Powell - Community

•Created by interpod on 8/14/2023 in #front-end

Is it possible to select element based on its neighbour's child class ? (maybe :has???)

So i am wondering. Structure where I would like to select all div's based on its neighbour's child class but is seems that it does not work. Here is an example: https://codepen.io/H4ds0n/pen/WNYVEjX My goal is to make all div's background red if any of its neighbour's child has class selected

7 replies

KPCKevin Powell - Community

•Created by interpod on 8/11/2023 in #front-end

Is it good practise to use "em" unit for "almost" everything ? What about CVA then ?

Imagine card component, that could be reused in 3 different places (2 different parts of UI and 1 mobile view). To make this really re-usable I put almost everything (except borders) in "em" unit. Thats way if I am reusing it in different parts of app all I need to make smaller/bigger component is just to put parent font size. Seems like quiet comfortable but on the other hand a lot of libraries are using CVA instead. For button sm/md/lg. Is it bad practise what am I doing ?

5 replies

KPCKevin Powell - Community

•Created by interpod on 7/9/2023 in #front-end

Do you care about unneeded components when creating responsive UI ?

Some time ago I was writing an application using chakra-ui. There was available hooks/wrapper like useMediaQuery which allowed to render/not to render components based on viewport sizes. Right now I started to write an application using tailwind css. There is media query of course but sometimes I am feeling like I am missing useMediQuery hook. For example - on desktop i have search bar but on mobile i have drawer with search criteria inputs. So in case of desktop/mobile even if I use display:none on the component this component still will go through whole reactjs process and consume user's processor and memory. So maybe premature optimisation, but what do you think ? Maybe we should not render components which we do not need it instead of using display: none ?

2 replies

KPCKevin Powell - Community

•Created by interpod on 5/13/2023 in #front-end

Component library for tailwind?

So I am looking for component library for tailwind. Are you able to recomend something ? (or maybe not to use any, but then I am not designer and when I recall times before component libraries they were pretty hard times). Thanks

4 replies

KPCKevin Powell - Community

•Created by interpod on 5/4/2023 in #front-end

How do you approach height responsive website?

So i developed webapp in react + chakra-ui. I was developing it on monitor with 2160 height dimensions (either 4k or UHD). When i opened application on full HD monitor (1920 x 1080) everything looks so big. Header, Left and Right sidebar. Most of the time I was fusing on width responsiveness and this issue got me thinking. One idea I have i my mind is to use "em" unit everywhere (even on fontSize) and scale it on the parent using media query. What is you approach to something like this?

13 replies

KPCKevin Powell - Community

•Created by interpod on 3/9/2023 in #front-end

Is this overusing of hooks or am I paranoid ?

During my reactjs journey I always was puting inside hooks function which requires either access to props/state or they have to somehow use other hooks. Recently I join to the project where people (who are backend developers mainly) were putting inside hooks functions which does not requires any of those hooks stuff i decribed above. Like for example they were building two function incrementDate(date) and decrementDate(date). All those function requires is date. They are puting this inside hooks and using useEffects on this. Is this big anti-pattern or am I paranoid?

6 replies

KPCKevin Powell - Community

•Created by interpod on 3/4/2023 in #front-end

Is there any way to keep overflow-x while changing overflow-y?

My problem is caused by this issue: https://stackoverflow.com/questions/18135204/setting-overflow-y-causes-overflow-x-to-change-as-well Here is codepen: https://codepen.io/H4ds0n/pen/JjaJWGR Is there any way to keep overflow-y: auto on pink box and have have green box visible on the top of blue one ?

3 replies

KPCKevin Powell - Community

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

Is using button's onClick callback to navigate is a semantically correct?

Like in the title. Is calling

<button onClick={() => nav("/subpage")}>Btn</button>

<button onClick={() => nav("/subpage")}>Btn</button>

14 replies

KPCKevin Powell - Community

•Created by interpod on 2/22/2023 in #front-end

Website which stores filter criteria between tab reloads, but not between tabs.

Hi, So noticed that one of the websites which I am using stores criteria search somewhere. It is persisted between tab reloads but it is not persisted between tabs. I look into session storage it is empty, cleard local storage and indexedDb is empty as well. So my question is - where this webistes stores this criteria search ? (for sure its not a backend).

18 replies

KPCKevin Powell - Community

•Created by interpod on 1/30/2023 in #front-end

How do I test webiste for android devices on windows desktop?

Like in the title. I am looking for a way to test my webiste for android and optionally ios. Responsiveness, layout itp. Do you know any solution for this?

5 replies

KPCKevin Powell - Community

•Created by interpod on 1/25/2023 in #front-end

How to prevent focusing first input inside form when opening page on the mobile ?

Like in the title. I have application which when it is opened on mobile the first input inside form is focused and keyboard is displayed. I want to prevent this. The input does not have attribute autofocuse but it is focused still. Looking for some valid solution for this

7 replies

KPCKevin Powell - Community

•Created by interpod on 1/24/2023 in #front-end

How do I call callback on blur but only when the focus item is not a child

So i have this structure:

<div onBlur={...}>
     <input type="text"/>
     <div id={"content"} isVisible={..}>SomeContent</div>
</div>

<div onBlur={...}>
     <input type="text"/>
     <div id={"content"} isVisible={..}>SomeContent</div>
</div>

- clicking and focusing input text causes div.content to show itself So i want to hide content when user will leave input.text but only when the next focused tag is not content. So when user will click div.content I wont it to be still visible, but when user click something different but input.text it hides div.content. How do i achieve this ?

2 replies

KPCKevin Powell - Community

•Created by interpod on 1/20/2023 in #front-end

How to prevent refresh on overscroll on IOS

Hi, I have this small problem - refresh on scroll. So i have box inside my application with drag and drop feature. It works everywhere besides phones. On phones when I am starting dragging there is page reload. I read about something like this - https://stackoverflow.com/questions/29008194/disabling-androids-chrome-pull-down-to-refresh-feature But is seems it doesn't work. Any ideas ?

20 replies

KPCKevin Powell - Community

•Created by interpod on 11/17/2022 in #front-end

Why does the position sticky and z-index does not work properly on table?

So i did this demo https://codepen.io/H4ds0n/pen/gOKGEVX My goal was to take the first row and its first cell (the one with "XD" button) and put it over second row's first cell. But it seems that z-index over td are not respected. Could you explain my why?

44 replies

KPCKevin Powell - Community

•Created by interpod on 11/17/2022 in #front-end

How do I handle parent, child, sibling z-index relationship. How does this work ?

Here is link to codepen: https://codepen.io/H4ds0n/pen/poKWQga?editors=1111 I was wondering if this is even possible. What I want to achive here is put child over outer and parent under outer block. So the order of the colors from bottom would be parent, outer, child (blue, red, yellow)

5 replies