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
and I cannot for the life of me adjust the width of the dynamic textarea. I'll post pictures below for a clearer understanding of the layout.
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.
The first image is what I currently have and the second image is what I'm working towards.
I think a summary of the problem is this:
The only way a style actually has an effect on the dynamic textarea is if I do it with form textarea
. But the problem is if I do it that way, it then affects every textarea in the form (even the static one with the class .line-numbers). I’m not particularly new to css so I’m very confused to say the least. That’s why I was wondering if there was any dogmatic phoenix way to style dynamic inputs
Your .input textarea is wrapeed by div. And that div is automatically styled.
Solution:
Add id="wrapper" to div where both textareas are. Then add this to your css file:
#wrapper > div {
min-width: 90% !important;
}
Delete w-[54px]
and add below min-width: 10%;
You can experiment, but that's the idea.
Ps. You can change width of .input textarea in your css using w-[600px]
, for example. Div which wraps input will resize. But it will be harder to make page responding.