I have a WIP form I would like to expand a text area for. However, when I apply a height it applies it more like a margin than actual height. If I edit the CSS after the page has been rendered it works properly.
With height: 12.5
Now when I check the console I notice that height: 12.5rem is absent. However, if I add it, the page renders properly.
I am using bootstrap 4 and rails. Relevant code is provided below.
messages.scss
#message_form{
margin-left: 4.0rem;
// Only visible with smaller screen sizes
margin-right: 4.0rem;
margin-top: 2.0rem;
margin-bottom: 2.0rem;
width: 50%;
}
.text_form{
height: 15rem !important;
}
_form.html.erb
<div id="message_form">
<%= form_with(model: message, local: true) do |form| %>
<%# Error message setup %>
<% if message.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(message.errors.count, "error") %> prohibited this message from being saved:</h2>
<ul>
<% message.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<%# Form setup %>
<%# Message Title %>
<div class="form-group">
<%= form.label :message_name %>
<%= form.text_field :message_name, id: :message_message_name, :class=>"form-control" %>
</div>
<%# Message Context %>
<div class="form-group text_form">
<%= form.label :text %>
<%= form.text_area :text, id: :message_text, :class=>"form-control" %>
</div>
<%# Message send time %>
<div class="form-group">
<%= form.label :date_and_time_to_send %>
<%= form.text_field :date_and_time_to_send, id: :message_date_and_time_to_send, :class=>"form-control" %>
</div>
<%# Actions to perform %>
<div class="actions">
<%= form.submit 'Send Now', :class=>'btn btn-primary btn-block'%>
<%= form.submit 'Save to Database', :class=>'btn btn-primary btn-block'%>
</div>
<% end %>
</div>
How can I fix this problem? Thanks
It's because you're targetting the parent element. Try this instead:
.text_form textarea {
height: 12.5rem;
}
Resource if you need more help with text area elements: https://css-tricks.com/textarea-tricks/
Related
Please look at the following image:
My current UI: https://i.stack.imgur.com/9dlyJ.png
I have one class, <div class="newsfeed"> which modifies each post that gets created.
The issue I have is that I want to modify the 'edit' and 'delete' glyphicon buttons without affecting the rest of the class. Specifically, I want to move them both to the top right corner of the post.
Now, I know I can create a separate class (or an ID); however, how will the class know I'm referencing the newsfeed class? For example, if I wanted to fixate them to the right, how would they know to stick to the right hand side of the box rather than the page?
All help is massively appreciated. Massive bonus for anybody who can provide me with the CSS required. :)
Thanks all!
Edit - below is all my current code contained inside of my view:
<% if #posts.any? %>
<% #posts.each do |post| %>
<div id="post_<%= post.id %>">
<div class ="newsfeed">
<div class="well">
<% if post.user.has_image? %>
<div class="profile_pic"><%= image_tag post.user.images.first.file(:profile), class: "img-thumbnail", alt: "Cinque Terre", width: "50", height: "50" %></div>
<% else %>
<div class ="profile_pic"><%= image_tag "default_user_image.png",class: "img-thumbnail", alt: "Cinque Terre", width: "50", height: "50" %></div>
<% end %>
<div class="name_and_time">
<%= post.user.first_name %> <%= post.user.last_name %><br>
<span><%= post.created_at.strftime("%d %b %Y %H:%M") %></span>
</div>
<% if !post.image.exists? %>
<h2> <%= post.text %> </h2>
<% else %>
<h2> <%= link_to post.text, post_path(post) %> </h2>
<%= link_to post_path(post) do %>
<p><%= image_tag post.image.url(:medium) %></p>
<% end %>
<% end %>
<% if #user %>
<% if current_user.voted_up_on?(post) %>
<%= link_to "Like", dislike_post_path(post), method: :put %>
<% else %>
<%= link_to "Like", like_post_path(post), method: :put %>
<% end %>
<% end %>
<%= "#{post.get_upvotes.size} | " %>
<div class="edit_and_delete_posts">
<% if post.user == current_user %>
<%= link_to edit_post_path(post) do %>
<span class="glyphicon glyphicon-pencil"></span>
<% end %>
<%= link_to post_path(post), method: :delete do %>
<span class="glyphicon glyphicon-trash"></span>
<% end %>
</div>
<div class='comments_div'>
<%= render post.comments %>
</div>
<% if current_user %>
<%= form_for [post, post.comments.new ], remote: true do |f| %>
<%= f.text_area :text, placeholder: 'Add a comment' %>
<%= f.submit 'Comment' %>
<% end %>
<% else%>
<p>You need to <%= link_to "sign in", new_user_session_path %> to comment</p>
<% end %>
<% end %>
</div>
</div>
</div>
<% end %>
<% else %>
No posts have been added!
<% end %>
If you post the full compiled HTML and the CSS I could show you a working demo, but what you need to add is this:
.newsfeed {
position:relative;
}
.edit_and_delete_posts {
position:absolute;
top:0;
right:0;
}
By adding position:absolute to the .edit_and_delete_posts div, it's pulled out of the flow, so that it doesn't affect the rest of the elements. You can then set it's top and right positions; this sets it to the top right of the closest ancestor element with relative positioning. Since .newsfeed has position:relative it's the closest ancestor, and thus .edit_and_delete_posts will be positioned relative to this.
You can then add additional margin or padding to fine tune it if necessary.
I'm working on a simple image gallery, and I suddenly noticed
a weird bug I can't figure out.
The page looks the way its supposed to when a user is logged in, however
once the user logs out, the image-specific CSS gets destroyed.
I'm using Rails 4 with Twitter Bootstrap gem
ERB/HTML
<div class="container">
<div class="row">
<% #projects.each do |project| %>
<div class="col-lg-4 col-md-3 col-sm-3 col-xs-12 prosjekt_ramme">
<div class="prosjekt">
<p class="prosjekt_content">
<%= project.content %>
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %> </p>
<% end %>
<%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>
<hr>
</div>
<% end %>
</div>
</div>
CSS
.prosjekt {
background-color: #eee;
padding: 0;
text-align: center;
margin-bottom: 5%;
height: 350px;
img {
max-width: 100%;
max-height: 80%;
display: block;
margin: auto;
}
}
If I remove
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %></p>
<% end %>
The image-specific CSS stays destroyed, whether I'm logged in or not.
Got any idea what's going on?
You are closing your p tag within the if conditional. As a result, it never closes if the user is not signed in. This is probably what is messing up the styling. Try this:
<div class="prosjekt">
<p class="prosjekt_content">
<%= project.content %>
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %>
<% end %>
</p>
<%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>
Or, if you don't want the link to be part of the paragraph:
<div class="prosjekt">
<p class="prosjekt_content">
<%= project.content %>
</p>
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %>
<% end %>
<%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>
Currently when the code runs both my title fields appear above the same table. It also lower cases all letters except for the first one. I wanted to have a title above each table. The main code looks like,
<%= form_for(#test) do |f| %>
<div id="field">
<%= f.label "test" %>
<%= f.text_field :test_title %><br>
</div>
<div id="field">
<%= f.label "Description" %>
<%= f.text_area :description %><br>
</div>
<div class="actions">
<br><%= f.submit %><br>
</div>
<div id="title">
<%= f.label "Associated worlds" %><br><br>
</div>
<div id="add_fields">
<%= link_to_add_fields "Associate New world", f, :pwss_wbss %><br><br>
</div>
<div id="fields">
<% if #test.valid? %>
<table id="sort_table" class="display">
<thead>
<tr>
<th>Line Item</th>
<th>Description</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<% if #test.valid? %>
<%= f.fields_for :tests_worlds, #test.tests_worlds.each do |builder| %>
<%= render "tests_world_row", f: builder %>
<% end %>
<% end %>
</tbody>
</table>
<% end %>
</div>
<div id="title">
<%= f.label "States" %><br><br>
</div>
<div id="add_fields">
<% if #test.valid? %>
<%= f.fields_for :state, #test.states.each do |builder| %>
<%= render "states_fields", f: builder %>
<% end %>
<% end %><br>
</div>
<div id="add_fields">
<%= link_to_add_fields "Add State", f, :state %>
</div>
<div id="fields">
<% if #state.valid? %>
<table id="sort_table" class="display">
<thead>
<tr>
<th>Line Item</th>
<th>Description</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<%= f.fields_for :states, #test.states.each do |builder| %>
<%= render "states_row", f: builder %>
<% end %>
</tbody>
</table>
<% end %>
</div>
<% end %>
The CSS code I am using for the title fields is:
div#title label {
display: inline-block;
padding: 0px,5px,0px,5px;
min-width: 80px;
font-size: 14pt;
color: Blue;
font-weight: bold;
}
div#title {
position: static;
display: inline-block;
}
When this runs, both titles appear on one line above both tables. How do I get the title so that each one appears above the respective table?
Here is an image of what it displays
If you are going to use title as a tag, set it as a class rather than an Id in the HTML. ID's should only appear once in any page.
Also, it may have something to do with the display being inline-block only on the titles. If the other elements aren't also inline-block they may render in a different order.
I tend to use inline-block for pretty much entire pages. Try setting the value of the container div or the body to inline-block and see if that helps.
If a User creates a bunch of <ul></li>:results</li></ul> those bullets will overlap the <div> below it. How can we stop this from happening? Will you save the <div> before it's too late?!? dun dun dun
index.html.erb
<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
<div class="panel-heading"><h4><b>AVERAGE</b></h4></div>
<% #averaged_quantifieds.each do |averaged| %>
<% if averaged.user == current_user %>
<div style="float:left; width:150px;">
<%= link_to edit_quantified_path(averaged) do %>
<b><%= averaged.name %> (<%= averaged.metric %>)</b>
<% end %>
<ul>
<% averaged.results.each do |result| %>
<li>
<%= result.date_value.strftime("%b.%y") %>
<%= result.result_value %>
</li>
<% end %>
</ul>
</div>
<% end %>
<% end %>
</div>
# The line breaks only work if the User only adds a few rows, but I want to encourage the User to creates as many rows as his heart desires.
<br>
<br>
<br>
<br>
<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
<div class="panel-heading"><h4><b>INSTANCE</b></h4></div>
<% #instance_quantifieds.each do |instance| %>
<% if instance.user == current_user %>
<div style="float:left; width:150px;">
<%= link_to edit_quantified_path(instance) do %>
<b><%= instance.name %> (<%= instance.metric %>)</b>
<% end %>
<ul>
<% instance.results.each do |result| %>
<li>
<%= result.date_value.strftime("%b.%y") %>
<%= result.result_value %>
</li>
<% end %>
</ul>
</div>
<% end %>
<% end %>
</div>
<div class="values-button">
<%= link_to new_quantified_path, class: 'btn' do %>
<b><span class="glyphicon glyphicon-plus"</span></b>
<% end %>
</div>
you have a the code <div style="float:left; width:150px;">. this is what makes it overlflow to the div below it. float style takes it out of the normal flow of the dom (floats above the natural structure of the dom is a way of describing it) and the div below it doesnt pay attention to it. removing that line of code (you have it twice) will solve your problem
Here is my code for my edit.html.erb:
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
<div class="row">
<br />
<div class="span12">
<h2>Main content</h2>
<%= form_for(#post) do |f| %>
<% if #post.errors.any? %>
<div id="errorExplanation">
<h2><%= pluralize(#post.errors.count, "error") %> prohibited this post from being saved:</h2>
<ul>
<% #post.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<h1>New post</h1>
<div class="field">
<%= f.label :Title %><br />
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :content %><br />
<%= f.text_area :content, :rows => "40", :cols => "40" %>
</div>
<div class="field">
<%= f.label :slug_url %><br />
<%= f.text_field :slug_url %>
</div>
<div class="field">
<%= f.label :Project %><br />
<%= f.text_field :project %>
</div>
<div class="field">
<%= f.label :Desciption %><br />
<%= f.text_field :desc %>
</div>
<div>
<%= f.submit %>
</div>
<% end %>
</div>
</div>
On my webpage when it loads the form_for stuff is super skinny and won't break out of a very narrow section. When I got to inspect element and I look at the h2 it spans the whole 12 columns, but everything else doesn't. I can adjust the col number on the text area and it does nothing. It looks like it is defaulting to the the smallest text_field for it's width.
Any ideas on how I can figure out what is going wrong?
Try this:
<%= f.text_field :title, :style => "width:100px;" %>
It works for me and you can change the '100px' depend on your needs.
At the other answers mention, this should be handled by your CSS. Though it's difficult to know exactly without knowing the intracicies of your stylesheet, something like this:
.edit_post input[type=text], .edit_post textarea {
width: 100%;
/* or */
width: 450px;
}
will probably work.
Inspect your CSS. This is a pure CSS issue and has nothing to do with Rails.
(Bonus tip: Try Haml instead of ERb.)
Well, you haven't specified any sort of widths, unless you did in your stylesheet, which you didn't include in your post.
Are any of the lines wrapping (like the titles < h1 > or < h2 >) ? If they are and that's not what you want, you can add "white-space:nowrap:" to your h1/h2 styles in your stylesheet.
I also noticed you are looping and adding a list (< li >). Try specifying a width in the < ul > tag to force it to be the same width as the header tag (maybe width:100%;).
Just some ideas since I don't know what your stylesheet looks like :)