I have an html.heex file that has both a static textarea tag and a dynamic textarea denoted like so <.input type='textarea' />
. I encounter problems when I try to style both of them independently. I have a feeling the problem has to do with the way I’m accessing the dynamic textarea in my css with form textarea
- the current problem is that the styling with form textarea
overrides what’s in .line-numbers
(class selector for static textarea) and I cannot for the life of me adjust the width of the dynamic textarea.
But here’s the code I have now:
html.heex:
<div class="flex">
<textarea id="line-numbers" class="line-numbers rounded-bl-md" readonly>
<%= "1\n" %>
</textarea>
<.input
field={@form[:markup_text]}
type="textarea"
class="markup-input"
placeholder="Insert code..."
spellcheck="false"
autocomplete="off"
phx-debounce="blur"
/>
</div>
css file:
form textarea {
@apply bg-emDark-dark font-brand font-regular text-xs border border-white h-[300px] resize-none;
border-top-left-radius: 0 !important; /*!important seems to be a cheat code when css is misbehaving. doesn't work otherwise*/
border-top-right-radius: 0 !important;
color: white !important;
margin-top: 0 !important;
width: 300px !important; /*This affects both textareas but I want it to only affect the dynamic textarea*/
}
form textarea {
@apply focus:outline-none focus:border-white
}
.line-numbers {
@apply border border-white font-brand font-regular text-xs text-emDark-light bg-emDark-dark h-[300px] w-[54px] text-right overflow-hidden resize-none;
border-right: none;
border-top: none;
}
.line-numbers:focus {
@apply focus:outline-none focus:border-white focus:ring-0;
}
As you can see I have a bunch of !important
thrown everywhere in the code which is not ideal, but for some reason nothing works otherwise. I just need to know the right way to work with dynamic textareas and how to style them to prevent this hacky way of doing things.
I know this forum is probably used for more academic use cases but I’ve been stuck on this simple thing for so long and I just feel like styling textareas can’t be this difficult. I would like to know what I’m missing please.