Use CSS3 calculations to set the width of a rich text edit control
to the maximum possible while still allowing space for the help.
Also set the subject/title fields to the same width.
Fixes #657
/* Rules for rich text editors */
+input.richtext_title[type="text"] {
+ width: 50%;
+ width: -moz-calc(100% - 235px);
+ width: -webkit-calc(100% - 235px);
+ width: calc(100% - 235px);
+
+ @media only screen and (max-width:768px) {
+ width: 100%;
+ }
+}
+
.richtext_container {
margin-bottom: $lineheight;
.richtext_content {
width: 50%;
+ width: -moz-calc(100% - 235px);
+ width: -webkit-calc(100% - 235px);
+ width: calc(100% - 235px);
display: inline-block;
vertical-align: top;
+ @media only screen and (max-width:768px) {
+ width: 100%;
+ }
+
.richtext_preview {
display: inline-block;
padding: $lineheight;
<fieldset>
<div class='form-row'>
<label class="standard-label"><%= t 'diary_entry.edit.subject' -%></label>
- <%= f.text_field :title %>
+ <%= f.text_field :title, :class => "richtext_title" %>
</div>
<div class='form-row'>
<label class="standard-label"><%= t 'diary_entry.edit.body' -%></label>
<fieldset>
<div class='form-row'>
<label class="standard-label"><%= t'message.new.subject' %></label>
- <%= f.text_field :title, :size => 60, :value => @subject %>
+ <%= f.text_field :title, :size => 60, :value => @subject, :class => "richtext_title" %>
</div>
<div class='form-row'>
<label class="standard-label"><%= t'message.new.body' %></label>