I am using form_for to create a form that has 1 input field and 1 button. I'd like the submit button to be beside the input field rather than underneath it.
Relevant code is:
.input{border: 1px solid #666666; width:400px; height:22px;font-size:16px;}
<td width="900" height="50" align="left" valign="middle">
<% form_for #contact, :url => {:action => "create"}, :html => {:class => "input"} do |f| %>
<%= f.text_field :email, :size=> 74 %>
<%= image_submit_tag '2009-12-06-Landing1.gif' %>
<% end %>
</td>
Try using
display: inline;
Related
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/
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.
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.
view:
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<div class="loginText makeInline2">
<%= f.text_field :email, :placeholder => "email", :size => 20 %></br>
<% if devise_mapping.rememberable? -%>
<%= f.check_box :remember_me %> <%= f.label :remember_me %>
<% end %>
</div>
<div class="loginText makeInline2">
<%= f.password_field :password, :placeholder => "password", :size => 20 %></br>
Forgot your password?
</div>
<div class="makeInline2">
<%= f.submit "Log in" %>
</div>
<% end %>
CSS:
.loginText {
color: #DCDCDC;
}
.loginText label {
font-weight:normal;
}
.makeInline2 {
display:inline-block;
padding: 20px;
}
Produces:
Would like to do a couple of things with the above image via CSS:
First you can see that the password box is just slightly lower than the email box and the login button lower than both the input boxes. Any ideas on how to make them completely level vertically (like the facebook login looks like for example)? In other words bring the tops of both the password textbox and login button to the horizontal line in the below picture:
Lastly, any idea on how to close the horizontal gap (represented by 'x' in the below picture) between the email textbox, password textbox, and login button:
Hope this will work.
.makeInline2{
float:left;
padding-left:0px;
}
Try this:
padding-left: 0px;
vertical-align: text-top;
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 :)