<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
Related
I really try so hard to change the underline color but I can't, I don't know where do that, please help me! 🙏🙏
<div class="row">
<div class="col-md-6 col-md-offset-3">
<%= form_for(:session, url: login_path) do |f| %>
<%= f.label :email %>
<%= f.email_field :email, class: 'form-control white-text' %>
<br>
<%= f.label :password %>
<%= f.password_field :password, class: 'form-control white-text' %>
<br>
<%= f.submit "Log in", class: "btn" ,style:"color:white;background-color: #EEB756;" %>
<% end %>
</div>
</div>
According to the docs you can change the underline colour in CSS by modifying the colour of border-bottom and box-shadow of the element containing the input element (that is the one with the class input-field)
so maybe it would be something like this:
.input-field input[type=email] {
border-bottom: 1px solid red;
box-shadow: 0 1px 0 0 red;
}
You can change the class .input-field, and add more specific selector, for example:
.input-field input
or to email type of input
.input-field input[type=email]
or to focused field:
.input-field input[type=text]:focus
And set the border style:
.input-field input[type=text]:focus{
border-bottom: 1px solid #aaa;
}
You can read more in Materialize documentation: http://materializecss.com/forms.html
EDIT: edited as suggested by #Toby1Kenobi
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" %>
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;
The background color of my blog is blue and I want to make the background color of my text_area form white but currently the text_area form is the same blue as the background of my blog.
With the code below the text_field background is white and the submit button background is also white, but the text_area background is still blue.
html.erb code:
<div class="post">
<%= form_for #post do |f| %>
<%= f.label :title %>
<%= f.text_field :title %><br>
<%= f.label :post %> <br>
<%= f.text_area :post, size: "95x20" %><br>
<%= f.submit %>
<%end%>
</div>
css code:
.post input {
background-color: white;
}
Just apply the background to the textarea element, for example:
.post textarea {
background-color: yellow;
}
<div class="post">
<textarea></textarea>
</div>
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 :)