I am having a very strange issue using Materialize CSS's icons in a table. They do not seem to align properly.
Screenshot: (All personal details blurred out.)
Here is my Slim template:
.container
h1
| View Users
= form_for :user, url: "/users" do |f|
table
tr
th width="30px" ID
th width="80px" User ID
th Email Address
th First Name
th Last Name
th Type
th Notes
th width="20px" class="material-icons" delete
th width="20px" class="material-icons" mode-edit
- #users.each do |i|
tr
td = i.id
td = i.uid
td = i.email
td = i.first_name
td = i.last_name
td = i.user_type
td = i.notes
td = link_to 'delete', user_path(i), method: :delete, data: { confirm: 'Are you sure?' }, :class => "material-icons", :style => 'color: black'
td = link_to 'mode-edit', [:edit, i], :class => "material-icons", :style => 'color: black'
br
tr
td
input type="text" value="ID" readonly="readonly"
td
== f.text_field :uid, :id => "uid", :placeholder => "User ID"
td
== f.text_field :email, :placeholder => "Email Address"
td
== f.text_field :first_name, :id => "fname", :placeholder => "First Name"
td
== f.text_field :last_name, :placeholder => "Last Name"
td
== f.text_field :user_type, :placeholder => "Type"
td
== f.text_field :notes, :placeholder => "Notes"
.row
.actions
.col.s2
a class="waves-effect waves-light btn"
== f.submit "Add"
.col.s7
span
.col.s3 align="right"
a class="waves-effect waves-light btn" href="/users/new" Open Form
Here is my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<%= yield %>
</body>
</html>
Please help me resolve this very strange issue.
It turns out that the icon I used (edit-mode) was causing problems with the table. I tested it separately and it still caused those problems by itself.
The way I fixed the issue was by changing the icon from "edit-mode" to "create". That immediately fixed the issue.
Related
<style>
.mobile_note_form2 {
font-size: 30px;
}
</style>
<div class="mobile_note_form2">
<fieldset>
<%= f.date_select :created_at %><br/><br/>
<%= f.text_area :note %><br/>
<%= f.check_box :_destroy %>
<%= f.label :_destroy, "Remove Note" %>
</fieldset>
</div>
I want to make the "Remove Note" label with a font-size of 30px, but can't seem to figure out how to change styles in simple form.
use span with a class and use that class to set the font-size.
<span class="largeFont" ><%= f.label :_destroy, "Remove Note" %></span>
CSS:
.largeFont
{
font-size : 30px;
}
Remove class mobile_note_form2 from the div. It is causing all the elements to have font-size : 30px
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;
In pursuit of pixel perfection the browser seems to be adding an extra pixel to the top and bottom of the following input element but I can't figure out from where.
input {
border-radius: 10px;
height:30px;
display: inline-block;
float:left;
border:none;
}
}
Chromes magnifying glass shows the element with a total height of 32 and I'm trying to get 30.
It's a typical devise form coded in HAML:
.registration{:style => 'display:none'}
= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
%div
= f.label :email do
= f.email_field :email, :autofocus => false, :placeholder => "Email"
%div
= f.label :password do
= f.password_field :password, :placeholder => 'Password'
%div
= f.label :password_confirmation do
= f.password_field :password_confirmation, :placeholder =>'Confirm Password'
%div= f.submit "Sign up"
You should take out padding:
input { padding: 0; }
JSFiddle: http://jsfiddle.net/nSmU9/
Update:
In Google Chrome, I see the height is 30px.
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 :)
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;