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.
Related
I have some fields (such as name, phone number, company) a user can fill out. The text boxes are good sizes, except for one, which is a "note" field. I want the note text box to be very large when compared to the other text box fields, but I am only able to make all the text boxes the same size.
_form.html.erb/vendors
<%= form_for #vendor do |f| %>
#this text field will be a regular size
<p>
<%= f.label :company %><br>
<%= f.text_field :company %>
</p>
#more code...
#I want this text field to be large
<body>
<div class = "notes">
<p>
<%= f.label :notes %><br>
<%= f.text_field :notes %>
</p>
</div>
</body>
<p>
<%= f.submit %>
</p>
</div>
<% end %>
my css file
input[type=text]{
width: 40%;
padding: 12px 12px;
border: 2px solid #ccc;
background-color: white;
}
textarea {
width: 20%;
height: 10px;
padding: 12px 12px;
border: 2px solid #ccc;
background-color: white;
resize: none
}
#more code...
You can add a class with the style (width) you want for that input:
.large-box {
width: 60% !important;
}
Then, add it to your input:
<%= f.text_field :notes, class: "large-box" %>
Use the cols and rows property. <%= f.text_area :notes, :cols => "10", :rows => "10" %>
You can also just specify size like: <%= f.text_area :notes, size: "60x12" %>
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.
<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;
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;