highligting appearing above textarea in bootstrap

[adueck]

I am using bootstrap v3.3.7 for an Electron app, and when I try
use this plugin it does two things.

1. Modifies the text area (removing the styling that comes with bootstrap and squishes it to two lines
2. Puts the marked up text above the text area

Before highlighting...

After highlighting...

You can see the project I am trying to add this in at https://github.com/adueck/journee-diary

html before running the plugin:

<div class="col-md-7 full-height">
          <textarea class="form-control" id="textArea" autofocus dir="auto"></textarea>
          <p>
            <span class="glyphicon glyphicon-cog bottom-icon" aria-hidden="true" onclick="$('#settingsModal').modal('show');"></span>
            <span class="glyphicon glyphicon-question-sign bottom-icon" aria-hidden="true" onclick="$('#helpModal').modal('show');"></span>
            <span id="below-text" style="text-align: right; float: right; font-style: italic; color: grey;"></span>
          </p>
</div>

[lonekorean]

Hi Adam. This plug-in moves some stuff around, wrapping the textarea in some extra divs and adding CSS to make all the parts line up. This sometimes fights other CSS on the page (like that from Bootstrap).

The bulk of the problem is that the styles coming from .form-control need to be copied.

I tried to recreate your issue in a codepen, along with the CSS to fix it: https://codepen.io/lonekorean/pen/386ff80dd2c53a1313bee9e1886aed92

I'm not sure about the height. It's easy enough to hardcode a specific height, but it looks like maybe you had some dynamic 100% height action going on? I suspect there's more markup I don't have that is helping with that?

Other markup/styles may also be causing the highlights to be displaced, as you showed in your screenshot. I wasn't able to reproduce this.

Anywho, I know this isn't an ideal solution. Bootstrap can style a textarea just fine, but has no knowledge of styling a highlight-within-textarea-ified textarea (naturally). I'll keep this issue in mind.

[adueck]

Wow, thank you for the quick response. While that does move it down a little lower (closer to where it should be) it's still off. Also the textarea still loses it's standard bootstrap formatting when the function is called. I do have some dynamic 100% height action going on... it seems that's one of the main problems.

.col-md-7.full-height {
  display: flex;
  flex-flow: column;
  height: 100%;
}

textarea.form-control {
  margin-top: 20px;
  margin-bottom: 5px;
  flex: 1 1 auto;
}

(I kind of need to use this to get the layout I want for the app.)

When I remove the section above, the height issue is better, but the bootstrap textbox formatting is still being changed. Here are my screenshots with your codepen css added:

Before calling function:

After calling function:

[lonekorean]

Still not sure about the textarea losing the formatting. It's hard to tell without being able to inspect your CSS.

I think I got something to fix the height and vertical misalignment issue using some absolute positioning: https://codepen.io/lonekorean/pen/506bed61cad2ddc19d28fc7749ce2090

Yeah, it's kind of hacky. There's nothing wrong with your flexbox approach for the vertical sizing, but when combined with my plug-in adding extra divs, it really throws off the structure needed for flex to work properly.

[adueck]

Hmm... thank you very much again for your efforts but this still isn't quite working. The textbox gets really mangled. 😕

I understand my case might be a bit of a strange one and a trick to make this plugin work... but it pretty much is vanilla bootstrap. If you would like to try, you can clone the project I'm trying to integrate it in at https://github.com/adueck/journee-diary

[lonekorean]

Yeah, sorry mate. I would like to make this thing work better out-of-the-box with design systems, especially Bootstrap since it's so common. Unfortunately I don't have the free time to tackle that right now. Thanks for raising the issue, though.

[Dalimil]

The alignment should be fixed after applying this: #19