<textarea> and <pre> are not aligned when a width is set

[francesca-cicileo]

Testcase: http://codepen.io/fcicileo/pen/LWrGwE

It appears that when the container has a specific width set via CSS, the code in the <textarea> and the <pre> is not aligned anymore.

[d4hines]

I've noticed this too. Can anyone recommend short term fix? Any kind of workaround would do for my purposes.

[kazzkiq]

@d4hines These properties seem to quick-fix the issue:

.CodeFlask__textarea {
  white-space: nowrap;
  overflow-x: hidden;
}

While this CSS helps, the real solution will be implementing horizontal scrolling support for CodeFlask. As of today, it only support vertical scrolling it seems.

[d4hines]

Thanks for the response! I tried implementing the above CSS, but didn't notice any difference in the issue.

[kazzkiq]

@d4hines That must be overriding by another rule. Adding .CodeFlask to the selector should help override it:

.CodeFlask .CodeFlask__textarea {
  white-space: nowrap;
  overflow-x: hidden;
}

[d4hines]

Hi Kazzkiq,
I tried adding the code you suggested, but am still getting weird formatting issues. If you have the time, could you look at this JsFiddle I've created and tell me what I'm doing wrong: https://jsfiddle.net/d4hines/bb02ykx7/
Thanks!

[kazzkiq]

@d4hines It seems to be a issue with the CSS. The selector is applying same properties to both <pre> and <code>, where <code> shouldn't receive those.

The main issue seems to be with <code> also receiving position: absolute. Removing that property for this element seems to fix the issue, as you can see here.

So basically a quick-fix should be adding this to your CSS in order to override the property from CodeFlask:

.CodeFlask .CodeFlask__code {
  position: relative;
}

I will take a closer look to this bug this weekend, until there you can probably run smoothly with the CSS code above.

[klocus]

@kazzkiq: Your fix works but after that .CodeFlask__code changes its position. I've dealt with this by adding padding: 0 !important.

[ivanalemunioz]

@kazzkiq This issue was resolved in commit c441164 , but this generated a new bug, solved in Pull request #41

[scaddenp]

I added #41 to my code and it fixed issue with very long text getting truncated in view too. I have issues with very long text getting the caret discordant with underlying text. #41 improved (out by only 1 instead of 6-7 characters) but not fixed.

[kazzkiq]

This was fixed in 1.0. Lots of changes though, since its a major version upgrade.

[scaddenp]

Having some is issues moving from early version to new. I have a prism language definition (sql) included as a js, (eg Prism.languages.sql={comment: etc)
but
sqlflask = new CodeFlask('#codeFlaskSQL', {language: "sql"});
isnt picking it up. Do I need to do an add language? Old version has css file. Incorporated in new?

[kazzkiq]

@scaddenp You now have to add new languages by using .addLanguage method. Example:

const sqlflask = new CodeFlask('#codeFlaskSQL', {language: "sql"});
sqlflask.addLanguage('sql', {comment: etc...});

[scaddenp]

thanks. That works for highlighting. Now to sort out the css miasma...

[scaddenp]

Hmm. <label>Base Query:</label> <div class="codeFlask" id="codeFlaskSQL"></div>
and stripping out any styling of that div other than body and page locators. I get textarea with no caret and odd location.

I am delving into the css but is this what you expect?

[scaddenp]

Got the css sorted, except that no text cursor in box no matter what I do. is there an example project using codeflask that could be used for reference?

[kazzkiq]

@scaddenp You can take a look at the project website, or take a look at this example here:

https://jsfiddle.net/yx3qpqpe/

[scaddenp]

Yes, thanks very much for that. What I notice is that editor.js has the codeflask-style that I see on the fiddle. However, the .codeflask-style that is injected when using codeflask.min.js is different. ie
.codeflask { position: relative; min-width: 500px; min-height: 400px; border: 1px solid #ccc; overflow: hidden; }
compared to
.codeflask { position: absolute; width: 100%; height: 100%; overflow: hidden; }
I have yet to see where this is the issue, but it looks to me as if codeflask.min.js is not reflecting the source code.

[kazzkiq]

@scaddenp You're right. There was an error with the release on npm.

It is now fixed and the version 1.0.5 now uses position: absolute as it should.

[scaddenp]

Thanks very much for your persistence. With new code and one more fiddle to css (background was same colour as text caret), I now have the caret and everything looking nice. I salute your efforts to make life easier for the rest of us.