TextArea and how to style

Phoenix Forum Questions / Help
, , , , ,
1

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.

2

This question is more of a general CSS/HTML, I would recommend you to Google how to create a code editor with using a textarea.

Short story long you would need to learn how to position an element above your textarea.

I’ve built one for https://dbvisor.com with no JS, just LiveView, Makeup and CSS.

3

If you only want to style the dynamic area, what’s the problem with using a selector that exclusively targets it? It has a distinct class markup-input…

4

I’ve tried that and it doesn’t work; it’s so weird. 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