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" %>
Related
So I have this following code that works, but I can't separate the text from the button. For instance, when skewed, the text skews. Any way to separate them?
<div class="row">
<div class="left">
<h2>Categories</h2>
<div class="categories-">
<% #categories.each do |cat| %>
<%= link_to cat.name, listings_path(:category => cat), class: "btn btn-primary-2" %>
<% end %>
</div>
Here's the CSS:
.categories- {
padding-top: 30px;
font-size: 30px;
-webkit-font-smoothing: antialiased;
}
I then attempted doing this, which works, but the button itself when clicked, doesn't click to anything as it's not attached to the link. Any way to attach it?
<div class="categories-">
<% #categories.each do |cat| %>
<div id="btn-text"><div id="btn-cat"><%= link_to cat.name, listings_path(:category => cat) %></div></div>
<% end %>
</div>
I was told you add but that didn't work.
Here's the CSS:
#btn-cat {
transform: skew(-15deg);
background: linear-gradient(to right, yellow, red) !important;
border: none;
color: white;
padding: 20px;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
border-radius: 16px !important;
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
}
#btn-text {
transform: skew(15deg);
background: transparent;
border: none;
color: white !important;
text-decoration: none !important;
How can I accomplish either one of those methods? The top one the text and button won't detach. The bottom one, the button and text won't attach.
without seeing your controllers or routes I would have to guess it would have to be:
<% #categories.each do |cat| %>
<%= link_to cat.name, category_path(cat), class: "btn btn-primary-2" %>
<% end %>
But if you're not using the conventional restful routes, and your passing a model that doesn't correlate to the controller with same name type as class of your instance variable, you'll need to be more verbose.
<% #categories.each do |cat| %>
<%= link_to cat.name, controller: 'listings', action: 'show', id: cat.id, class: 'btn btn-primary-2' %>
<% end %>
The above should try to produce:
Category Name
# where 23 and Category name are repspective from the cat object.
See documentation for the variations on how to use link_to helper
If you want separate the text from the button and use #btn-cat and #btn-text separately.
You can use:
<div class="categories-">
<% #categories.each do |cat| %>
<div id="btn-cat">
<%= link_to listings_path(:category => cat) do %>
<div id="btn-text"><%= cat.name %></div>
<% end %>
</div>
<% end %>
</div>
Now, all the button it's a link :)
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
<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;
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>