# CSS and Javascript Editor Size Increase

**URL:** <https://discuss.write.as/t/css-and-javascript-editor-size-increase/942>\
**Category:** Feature requests\
**Tags:** 🛳-released\
**Created:** [November 20, 2019, 6:28pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942 "2019-11-20T18:28:26Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![quiethabits](https://discuss.write.as/user_avatar/discuss.write.as/quiethabits/32/33_2.png) [@quiethabits](https://discuss.write.as/u/quiethabits)\
**Post date:** [November 20, 2019, 6:28pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/1 "2019-11-20T18:28:26Z")

</div>

So, I’ve been creating some custom write.as blog themes and the Custom CSS and Custom Javascript editors on the Customize page of write.as are just too dang small. I’m using a chrome extension to modify the CSS to make them bigger and easier to type in/scroll through/parse. I know it’s a tiny quality of life improvement, but can we make these a bit bigger?

Here’s the CSS I modified:

_OLD:_

```auto
.ace_editor {
    height: 12em;
    width: 100%;

```

_NEW (aka my version):_

```auto
.ace_editor {
    height: 25em;
    width: 125%;

```

There’s probably a better way to make these changes, but I just needed something temporary to make these bigger. I’d also not be opposed to having the little bar in the bottom right corner to drag and resize those editors.

---

<div class="post-metadata">

**Author:** ![cjeller1592](https://discuss.write.as/user_avatar/discuss.write.as/cjeller1592/32/128_2.png) [@cjeller1592](https://discuss.write.as/u/cjeller1592)\
**Post date:** [November 20, 2019, 8:44pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/2 "2019-11-20T20:44:25Z")

</div>

Thanks for recommending this @quiethabits! I’d be curious to know what extension you are using to make the editors bigger.

Now you have me thinking about creating something for Write.as similar to what we have with [HTML house](https://html.house) - a way to edit CSS (and maybe JS) within a bigger/easier editor while also being able to see what the results look like within a Write.as blog template. What do you all think of somethin like that?

---

<div class="post-metadata">

**Author:** ![quiethabits](https://discuss.write.as/user_avatar/discuss.write.as/quiethabits/32/33_2.png) [@quiethabits](https://discuss.write.as/u/quiethabits)\
**Post date:** [November 20, 2019, 9:15pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/3 "2019-11-20T21:15:56Z")

</div>

I use [Stylebot](https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en) to inspect and edit the CSS and then I can make it persistent every time I visit the site.

I think something like HTML house would be above and beyond what I’m looking for and would be pretty amazing. I imagine it’d be overkill for most people, but would be an awesome feature to have.

---

<div class="post-metadata">

**Author:** ![bugbuster](https://discuss.write.as/letter_avatar_proxy/v4/letter/b/85f322/32.png) [@bugbuster](https://discuss.write.as/u/bugbuster)\
**Post date:** [November 21, 2019, 2:08am UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/4 "2019-11-21T02:08:58Z")

</div>

Yes, thank you, I second quiethabit’s request and add to it the ability to make the custom CSS and Javascript input boxes sizeable by being able to drag the lower right-hand corner of the box to the desired size.

---

<div class="post-metadata">

**Author:** ![cjeller1592](https://discuss.write.as/user_avatar/discuss.write.as/cjeller1592/32/128_2.png) [@cjeller1592](https://discuss.write.as/u/cjeller1592)\
**Post date:** [November 21, 2019, 2:27pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/5 "2019-11-21T14:27:36Z")

</div>

What do you think of the above idea of a separate app with a bigger/easier editor where you can preview CSS (and maybe JS) of a Write.as blog template @bugbuster?

---

<div class="post-metadata">

**Author:** ![bugbuster](https://discuss.write.as/letter_avatar_proxy/v4/letter/b/85f322/32.png) [@bugbuster](https://discuss.write.as/u/bugbuster)\
**Post date:** [November 21, 2019, 3:25pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/6 "2019-11-21T15:25:27Z")

</div>

Personally, I wouldn’t use Stylebot, because in general I want to minimize the number of browser extensions used. The standard html `<textarea>` input is sizeable by dragging the lower right corner, so it should be easy to implement this.

---

<div class="post-metadata">

**Author:** ![quiethabits](https://discuss.write.as/user_avatar/discuss.write.as/quiethabits/32/33_2.png) [@quiethabits](https://discuss.write.as/u/quiethabits)\
**Post date:** [November 21, 2019, 3:57pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/7 "2019-11-21T15:57:45Z")

</div>

I don’t think @cjeller1592 was referring to the Chrome extension, I think he’s asking if you’d rather have a bigger/expandable text area or if you’d rather have a separate tool that looks like the one he linked above called HTML House. Personally I think these would be two separate ideas: one for a bigger expandable text area and one for having a separate linked tool from that page that gives you a live preview.

---

<div class="post-metadata">

**Author:** ![bugbuster](https://discuss.write.as/letter_avatar_proxy/v4/letter/b/85f322/32.png) [@bugbuster](https://discuss.write.as/u/bugbuster)\
**Post date:** [November 21, 2019, 5:35pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/8 "2019-11-21T17:35:25Z")

</div>

> [@quiethabits](#):
>
> I think he’s asking if you’d rather have a bigger/expandable text area or if you’d rather have a separate tool that looks like the one he linked above called HTML House

For my purposes, the expandable text area would be 1st choice. The separate tool could also be useful, but if it’s an either/or I’d really like to have that expandable text area.

Thanks for initiating this topic!

---

<div class="post-metadata">

**Author:** ![quiethabits](https://discuss.write.as/user_avatar/discuss.write.as/quiethabits/32/33_2.png) [@quiethabits](https://discuss.write.as/u/quiethabits)\
**Post date:** [November 21, 2019, 7:19pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/9 "2019-11-21T19:19:51Z")

</div>

@bugbuster I fully agree, I’d much rather have the expandable area! (and I think it would be a much easier/quicker change than creating a full page tool with built-in preview)

---

<div class="post-metadata">

**Author:** ![matt](https://discuss.write.as/user_avatar/discuss.write.as/matt/32/2760_2.png) [@matt](https://discuss.write.as/u/matt)\
**Post date:** [November 22, 2019, 5:23pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/10 "2019-11-22T17:23:58Z")

</div>

I did a little research on what’s technically needed here and found that while it’ll be complicated to make the editor resizable by dragging the corner, we can change it to automatically resize (especially up to a maximum height).

What do you all think of the experience with the textareas on [this page](https://ace.c9.io/demo/autoresize.html)?

---

<div class="post-metadata">

**Author:** ![quiethabits](https://discuss.write.as/user_avatar/discuss.write.as/quiethabits/32/33_2.png) [@quiethabits](https://discuss.write.as/u/quiethabits)\
**Post date:** [November 22, 2019, 5:47pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/11 "2019-11-22T17:47:53Z")

</div>

I do like that solution. For my purposes, this is just as good as dragging to resize. I can’t speak for anyone else, but this is completely acceptable as a solution.

---

<div class="post-metadata">

**Author:** ![bugbuster](https://discuss.write.as/letter_avatar_proxy/v4/letter/b/85f322/32.png) [@bugbuster](https://discuss.write.as/u/bugbuster)\
**Post date:** [November 23, 2019, 3:38pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/12 "2019-11-23T15:38:43Z")

</div>

> [@matt](#):
>
> What do you all think of the experience with the textareas on [this page](https://ace.c9.io/demo/autoresize.html)?

Yes, thanks, that works nicely. Having a max height is also fine and prudent.

Just to be clear about the scope of this: it’s for the Custom CSS and Custom Javascript inputs on the blog Customize page.

---

<div class="post-metadata">

**Author:** ![cjeller1592](https://discuss.write.as/user_avatar/discuss.write.as/cjeller1592/32/128_2.png) [@cjeller1592](https://discuss.write.as/u/cjeller1592)\
**Post date:** [November 23, 2019, 4:05pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/13 "2019-11-23T16:05:19Z")

</div>

That’s what he’s referring to @bugbuster! The inputs currently use [Ace](https://ace.c9.io/), an embeddable JS code editor, so we have to work within the options that Ace can give us.

Personally I think those editors would work well. Because for me, it was always the height that was the problem, not the width of the editor. This auto-expanding solution takes care of the height problem.

Makes me wonder if, to complement this change, the _Post by Email_ box should then go above the Custom CSS/JS inputs, right below _Text Rendering_. But then again I don’t think this is too drastic of a change to affect anything else on this page (unless I am missing something).

---

<div class="post-metadata">

**Author:** ![bugbuster](https://discuss.write.as/letter_avatar_proxy/v4/letter/b/85f322/32.png) [@bugbuster](https://discuss.write.as/u/bugbuster)\
**Post date:** [November 23, 2019, 4:09pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/14 "2019-11-23T16:09:39Z")

</div>

> [@cjeller1592](#):
>
> The inputs currently use [Ace](https://ace.c9.io/), an embeddable JS code editor, so we have to work within the options that Ace can give us…for me, it was always the height that was the problem, not the width of the editor

Thanks for that info about the Ace editor, cj. Same here regarding the height of the input - that’s the issue for me also.

---

<div class="post-metadata">

**Author:** ![matt](https://discuss.write.as/user_avatar/discuss.write.as/matt/32/2760_2.png) [@matt](https://discuss.write.as/u/matt)\
**Post date:** [November 25, 2019, 7:16pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/15 "2019-11-25T19:16:14Z")

</div>

Glad the auto-expanding text box would solve this particular issue for everyone. We’ll definitely get this changed – currently tracking development here: [writefreely.org/tasks/708](https://writefreely.org/tasks/708).

---

<div class="post-metadata">

**Author:** ![cjeller1592](https://discuss.write.as/user_avatar/discuss.write.as/cjeller1592/32/128_2.png) [@cjeller1592](https://discuss.write.as/u/cjeller1592)\
**Post date:** [September 24, 2020, 6:49pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/16 "2020-09-24T18:49:14Z")

</div>

Just wanted to bump this topic because @matt pushed a recent change to Write.as that will automatically resize the CSS/JS editors depending on how much code you add to them. This makes the editors _a lot_ easier to work with.

Would be curious to see what y’all think!

---

<div class="post-metadata">

**Author:** ![quiethabits](https://discuss.write.as/user_avatar/discuss.write.as/quiethabits/32/33_2.png) [@quiethabits](https://discuss.write.as/u/quiethabits)\
**Post date:** [September 24, 2020, 10:21pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/17 "2020-09-24T22:21:38Z")

</div>

Perfect, I love it!

---

<div class="post-metadata">

**Author:** ![bugbuster](https://discuss.write.as/letter_avatar_proxy/v4/letter/b/85f322/32.png) [@bugbuster](https://discuss.write.as/u/bugbuster)\
**Post date:** [September 25, 2020, 3:24pm UTC](https://discuss.write.as/t/css-and-javascript-editor-size-increase/942/18 "2020-09-25T15:24:20Z")

</div>

Very nice! Just what I was hoping for. This is a big improvement to the Customize page. Many thanks!