Database Text Area field breaks CSS 2.7

Database Text Area field breaks CSS 2.7

by Clay Burell -
Number of replies: 2

Hi All,

I did read this post from 2010, but it was not resolved.

My problem seems simple to fix, but attempts have failed.

Goal: CSS width 300 for column 1 of Add Entry (I have guidance and models in that column, requiring the width).

Problem: Text areas push the CSS column 1 to about 100 px, resulting in very ugly UI.

Attempted solutions: Set all text area field widths to 45 columns. No success.

When Add Entry loads, it looks good (screenshot 1), but quickly resets to look bad (screenshot 2). I have to manually drag all text area editors to expand width of column 1. CSS template included (screenshot 3) if the fix is simple there.

Many thanks in advance. It's my first attempt at using Database, and I'm crazy excited for the research possibilities. Don't want to unveil it until it looks good to my students. Buy-in is all smile

Initial Load:

initial load


Final load (auto-reset/override of CSS)

final look


CSS Template

CSS

Average of ratings: -
In reply to Clay Burell

Re: Database Text Area field breaks CSS 2.7

by Itamar Tzadok -

The editor opens at 100%. The cols attribute affects only the textarea element underlying the editor but not the editor itself. You need to set the width of the editor container. One simple way is to wrap the field pattern in the template with a div element and set its width to prevent the editor from stretching. (See related post at https://moodle.org/mod/forum/discuss.php?d=267859#p1156487) hth smile

Average of ratings: Useful (1)
In reply to Itamar Tzadok

Re: Database Text Area field breaks CSS 2.7

by Clay Burell -

Mr. Tzadok, you shall forever be Saint Tzadok in my eyes.

Thank you so much. A helping hand within 30 minutes. Beautiful Moodle community. smile

Average of ratings: -