I'm using carrierwave with rails 4. I need image upload functionality on a few models in my app and it's working great on all of them except one. On the adverts model, all the uploaded images seem to have the following HTML style attributes being generated automatically (or seemingly so):
<img alt="Advert" src="..image_path_is_correct..." width="0" height="0" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 1px 1px;">
My form is declared like so:
<%= form_for [#user, #advert] do |f| %>
<div class="form-field-area-centered">
<p class="form-label"><%= f.label :advert_image, "New Advert" %></p>
<p class="form-field"><%= f.file_field :advert_image %></p>
</div>
<%= f.submit "SAVE", :class => "button button-green button-login" %>
<% end %>
and in my view I have:
<div class="advert-area">
<%= image_tag #first_post.user.adverts.last.advert_image_url %>
</div>
I'm kind of at a loss as to what could be causing this so any help would be much appreciated.
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 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/
I'm working on a simple image gallery, and I suddenly noticed
a weird bug I can't figure out.
The page looks the way its supposed to when a user is logged in, however
once the user logs out, the image-specific CSS gets destroyed.
I'm using Rails 4 with Twitter Bootstrap gem
ERB/HTML
<div class="container">
<div class="row">
<% #projects.each do |project| %>
<div class="col-lg-4 col-md-3 col-sm-3 col-xs-12 prosjekt_ramme">
<div class="prosjekt">
<p class="prosjekt_content">
<%= project.content %>
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %> </p>
<% end %>
<%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>
<hr>
</div>
<% end %>
</div>
</div>
CSS
.prosjekt {
background-color: #eee;
padding: 0;
text-align: center;
margin-bottom: 5%;
height: 350px;
img {
max-width: 100%;
max-height: 80%;
display: block;
margin: auto;
}
}
If I remove
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %></p>
<% end %>
The image-specific CSS stays destroyed, whether I'm logged in or not.
Got any idea what's going on?
You are closing your p tag within the if conditional. As a result, it never closes if the user is not signed in. This is probably what is messing up the styling. Try this:
<div class="prosjekt">
<p class="prosjekt_content">
<%= project.content %>
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %>
<% end %>
</p>
<%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>
Or, if you don't want the link to be part of the paragraph:
<div class="prosjekt">
<p class="prosjekt_content">
<%= project.content %>
</p>
<% if user_signed_in? %>
<%= link_to 'Slett', project, method: :delete, data: { confirm: 'Er du sikker?' } %>
<% end %>
<%= image_tag(project.picture.url, class: "img-responsive project_image") %>
</div>
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 :)