KPC
Kevin Powell - Communityclevermissfox
html input behaviour
i've been wondering about this for awhile. when your text input starts running out of room the right side of it starts to disappear (as shown in this screen recording; gave the input a bg of hotpink to further illustrate) and its value starts getting cut off. is there a way to stop this behaviour or always make sure its the width of its value? (well besides min-width: npx or something)
like does it recognize its input.value as content ? doesnt seem like it or it wouldnt hide itself, it would overflow which would be better.
M
MarkBoots•15d ago
unfortunatly there is no native solution for it .... yet. If i remember correctly there is something coming to auto size the input to the value size (will try to find a refference to it)
for now, you could make your current input a button or div or whatever (maybe a div with contenteditable so you can still type in it) and then with js copy it to a temp input for the clipboard copy
something like this: (pen removed, see screenshot below)
ohw, i've found the new property:
field-sizing: content
It is already in chromium
here an earlier post were i have an example https://discord.com/channels/436251713830125568/1223333018798788618/1223541118508204092C
clevermissfox•14d ago
ohh thats exciting! i will have to add it to my list of properties/functions to watch!
wow i wouls have never thought of that , to create an remove a textarea. it happens so fast i dont even see it in the dom
M
MarkBoots•14d ago
you could even hide it with css to be sure
C
clevermissfox•14d ago
if its hidden with
display: none will the text still be selectable for the function or would it have to be an opacity/visibility property? or perhaps an 'sr-only' class ?
also is there a reason you chose textarea and not input[type=text] or just personal preference?M
MarkBoots•14d ago
Not for sure, but a fixed position (no shifting in the document) and 0 opacity should be enough for that short amount of time
Both input and textarea are okay. I had copied it from a project i used before. there i did want to show it for a short time
C
clevermissfox•14d ago
Gotcha thank you ❣️
M
MarkBoots•8d ago
I removed the pen, here a screenshot for future reference
C
clevermissfox•7d ago
Thank you, I think i forked it too🙏🏻
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
34KMembers
View on DiscordWant results from more Discord servers?
More Postsget value of sibling aboveHey, if i have a structure like so:
```html
<p class="a">...</p>
<p class="b">...</p>
```
```css
.a Error I dont understandHI everyone somebody can explain me what is going wrong hereSearch bar jsHow do i get results from my search barCan't figure out how to wrap text under an imageBasically, what I want to achieve is this (1st image):
https://prnt.sc/EO_CIn76U9UT
The closest I cHow to add stuff off of my sidebarI want to add stuff on the right side of my website but it isnt showing upUsing escaped unicode in contentIs it possible to use escaped unicode in content to get emoji combinations like Phoenix for example,Github blocked push due to secretsIt was right, my `rest.http` file was misspelt in my `gitignore`.
But now it's correct and git is Trying to get the cards over each other properlyI want to set the back-card under the front-card with wider and shorter than the front-card, but couOverflow Issuehttps://w5bkz10l-3000.inc1.devtunnels.ms/
I'm trying to find which section is overflowing,
tried inpUsing Vite with SCSSSo i was advised to try scss with vite instead of just using node as i was getting errors.
What i dAbsolute position with gridI need help to position a text and image inside a grid item which size its 2fr but trying to positiSVGs <use> and not...Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one ofHandling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?GH:https://github.com/nnall/hm-frontend-Nick.git
I have an element in my react return, several realReact + Tailwindcss users? Help with some examples please!I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but Navbar helpi cant get the navbar to go end to end on the pageVS code control panelhey guys does anyone know how can i add source control button in my vs code left panel i tried everyAdding code blocks to websitesI see some websites and blogs like this have these really nicely styled code blocks with syntax highFlexbox column swap without media or container querie.I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution Is there a way to test for css nesting support?I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make<a/> in component return being auto-assigned "button" class somehow, overwriting my classNamesThis is the relevant portion of the return:
```
<ul className="quickLink_list">
<li>