I want to display my product image in a marker infowindow, but I get a broken link error:
qmxjai8cmuuve5mnpf4y.jpg:1
GET localhost:3000/v1503135294/qmxjai8cmuuve5mnpf4y.jpg 404 (Not Found)
I don't know how to include a cloudinary link in my infowindow.
My infowindow:
def gmaps4rails_infowindow(bien)
"
<div class='col-xs-6'>
<a href='#{user_path(product.user)}', class='btn btn-fill btn-danger btn-sm'>Accéder au profil</a>
</div>
<img src=\"#{product.user.photo.path}\" style='width: 200px; height: auto; margin: 10px; border-radius: 5px; text-align: center;'>
"
end
How I display it in my view:
<%= cl_image_tag user.photo.path, height: 100, width: 200 %>
Related
Every cycle I get the new Thumbnail BUT under the previous one. Any suggestions how to solve that? How in each cycle add the new Thumbnail horizontally next to the previous one, until the space is fill and then move to the next line? Thanks.
From TO Picture
CODE
<% #employees.each do |em| %>
<div class="listTumbnail">
<% if em.user.imagepath %>
<div class = "user-image">
<img src="<%= em.user.imagepath%>" class="listimg">
</div>
<% else %>
<div>
<%= image_tag("icons/desconocido.jpg", :alt => "not found", :class => "listimg") %>
</div>
<% end %>
</div>
<% end %>
.user-image {
float: none;
padding-top: 127px;
margin-left: 193px;
padding-left: 6px;
border-left-style: solid;
border-left-color: #000;
border-left-width: 1px;
}
.listimg {
display: block;
max-width:80px;
max-height:100px;
width: auto;
height: auto;
margin: 0 auto;
border-radius: 40px;
}
.listTumbnail {
border: 2px solid #95989A;
border-radius: 3px;
color: #000;
height: 140px;
width: 110px;
margin: 5px;
}
try adding this to your stylesheet:
.listThumbnail {
display: block;
}
.user-image {
display: inline-block;
}
If for some reason you don't have a css file in your project, here's one basic way to add one:
Create a file named my_styles.css (or whatever you want to name it) & add the above css examples there.
Add the following link in the <head> of your application.html.erb file:
<link rel="stylesheet" type="text/css" href="my_styles.css">
This allows your html file to work with your css file/stylesheet.
I'm making a web-app and came accross an interesting thing.
So I have a wrapper div with other divs in it. The wrapper has the following formating:
#ready{
height:568px;
white-space: nowrap;
}
their children divs have this:
.theme{
overflow: hidden;
position:relative;
display: inline-block;
height:568px;
width:320px;
text-align: center;
background-color: #FFF;
}
It works in firefox and chrome, the divs are next to each other as intended. I have to add float:left to .theme to make it work in Safari. Although when I add float:left Mobile Safari will break the divs to new lines.
Is this a bug, or am I doing something wrong? Any ideas, workarounds?
[EDIT]
Added html
<div id="ready">
<div id="welcome"class="theme active">
...
</div>
<div id="cat"class="theme">
...
</div>
<div id="minap"class="theme">
...
</div>
<div id="minecraft"class="theme">
...
</div>
<div id="padthai"class="theme">
...
</div>
<div id="orange"class="theme">
...
</div>
<div id="bszn"class="theme">
...
</div>
</div>
Since you've tried variations of float: left, display: inline-block, position: relative and position: absolute to get your row to stay in one line, but it always breaks into two lines on one device/browser or another, maybe a table layout will achieve your goal.
You can use either the HTML <table> element or CSS table properties. In my example below I've gone with CSS.
http://jsfiddle.net/w01ckufb/2/
HTML
<div id="container">
<div id="ready">
<div id="welcome"class="theme active">IMAGE</div>
<div id="cat"class="theme">IMAGE</div>
<div id="minap"class="theme">IMAGE</div>
<div id="minecraft"class="theme">IMAGE</div>
<div id="padthai"class="theme">IMAGE</div>
<div id="orange"class="theme">IMAGE</div>
<div id="bszn"class="theme">IMAGE</div>
</div><!-- end .ready -->
</div><!-- end #container -->
CSS
#container {
display: table;
width: 4000px;
border-spacing: 15px;
}
#ready{
display: table-row;
border: 2px solid red;
}
.theme {
display: table-cell;
height: 568px;
width: 820px;
text-align: center;
background-color: #FFF;
border: 2px dashed blue;
}
Hope this helps. If you have any questions leave a comment below.
I need this type of page
Which shows achievements of a particular individual on yearly basis, as you can see it is all dynamic, if there are tho achievements, two rows are shown and so on. I am able to produce this, .
But I am not able to get these dots (or circles). I tried with left-border border-image and so on, but it would all break, because it is all dynamic, and any year can have as little as one achievement (or none, in that case it won't show up) or as many as tens (we don't have any max limit on this, but it can be many). So, if I do something with a image, it all breaks down.
Here's the page
<div class="achievements-details-container">
#foreach (var group in groupedModel)
{
<div class="achievements-details-group">
#for (var i = 0; i < group.Count(); i++)
{
var item = group.ElementAt(i);
<div class="achievements-details">
<div class="achievements-details-main">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-1">
#(i == 0 ? item.Year.ToString() : string.Empty)
</div>
<div class="achievement-title-before">
</div>
<div class="col-md-4 achievement-title">
#item.Title
</div>
<div class="col-md-1 smaller-padding-left">
<a href="#">
<img src="#Url.Content("~/Images/achievement_arrow.png")" alt="achievement_arrow" class="achievement-arrow-open" /></a>
</div>
<div class="col-md-3">
#item.SmallSummary
</div>
<div class="col-md-2 achievements-action-buttons no-padding">
<div class="">
#{Html.RenderPartial("_EditDiv", item.StatusID == (int)VersionStatus.Draft);}
</div>
</div>
</div>
</div>
</div>
}
</div>
}
</div>
The CSS
.achievements-details-container{
}
.achievements-details{
}
.achievements-details-main{
}
.achievement-title{
font-family: Tahoma, Arial, Sans-Serif;
font-weight: 600;
}
.achievements-details-group
{
border-bottom: 1px solid #F0F0F0;
margin-top: 1%;
}
.achievement-title-before:before
/* This is the css that is giving me the border line, I don't know how to add css for that desired circle here */
/* I tried setting the content to something like '\2022' but it turned out terrible*/
/* I have that circle image as achievement_circle.png */
{
content: '';
border-right: 2px solid #EB5B1D;
height: 500%;
position: absolute;
margin-top: -1%;
}
.achievements-details
{
margin-bottom: 1%;
}
.achievements-action-buttons{
}
.no-padding
{
padding-left: 0px !important;
padding-right: 0px !important;
}
.small-padding-left
{
padding-left: 8%;
}
.smaller-padding-left
{
padding-left: 4%;
}
.xx-small-padding-left
{
padding-left: 2%;
}
You might be able to generate this using the :after pseudo element.
Something like:
.achievement-title-before:after {
content: "";
position: absolute;
/*Set height and width*/
height: 30px;
width: 30px;
/*make it circular, as well as have a background color*/
border-radius: 50%;
background: tomato;
/*position this accordingly*/
left: 0px;
top: 5px;
}
Although, you may need to alter the positioning with the left: and top: values
I am a Ruby Newbie and I am following the Book Agile Development with Rails 4, page 95
I created a second store controller and get the following error: undefined local variable or method `products'. Somebody knows what is missing?
View
<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<h1>Your Pragmatic Catalog</h1>
<% #products.each do |product| %>
<div class="entry">
<%= image_tag(product.image_url) %>
<h3><%= product.title %></h3>
<%= sanitize(product.description) %>
<div class="price_line">
<span class="price"><%= products.price %></span>
</div>
</div>
<% end %>
class StoreController < ApplicationController
def index
#products = Product.order(:title)
end
end
.store {
h1 {
margin: 0;
padding-bottom: 0.5em;
font: 150% sans-serif;
color: #226;
border-bottom: 3px dotted #77d;
}
/* And entry in the store catalog */
.entry {
overflow: auto;
margin-top: 1em;
border-bottom: 1px dotted 77d;
min-height: 100px
img {
with: 80px;
margin-right: 5px;
margin-bottom: 5px;
position: absolute;
}
h3 {
font-size: 120%;
font-family: sans-serif;
margin-left: 100px;
margin-top: 0;
margin-bottom: 2px;
color: #227;
}
p, div.price_line {
margin-left: 100px;
margin-top: 0.5em;
margin-bottom: 0.8em;
}
.price {
color: *44a;
font-weight: bold;
margin-right: 3em;
}
}
}
<span class="price"><%= products.price %></span>
should be
<span class="price"><%= product.price %></span>
I created a simple jQuery mobile website and when I view this website on a Windows Phone there is a weird gradient between my footer and my content. It only occurs on a Windows Phone and I have no idea how it gets there.
See image: http://imgur.com/m3nChi7
CSS
.ui-page
{
background-color: white;
height: 100%;
}
.ui-content
{
background-color: white;
height: 100%;
}
.ui-footer
{
position: absolute !important;
bottom: 0;
width: 100%;
}
HTML Example plage
<div data-role="page" data-theme="c" id="Diensten">
<div data-role="header">
<h1>Diensten</h1>
</div>
<div data-role="content">
<ul>
<li>
<p>
Proofreading
</p>
<p>
Hebt u een tekst (brochure, webtekst, mailing,...) die u nog even wilt laten nalezen? Geen probleem, wij hebben proofreaders voor alle talen van de Europese Unie, het Russiche, Chinees en Japans. Wij zorgen ervoor dat uw tekst klaar is voor publicatie of verspreiding.
</p>
</li>
<li>
<p>
Taaladvies
</p>
<p>
Aangezien onze pool van vertalers en revisoren uit mensen bestaat die een taalkundige opleiding hebben genoten, zijn zij ook uitstekend geplaatst om u taaladvies te verstrekken.
</p>
</li>
</ul>
</div>
<div id="footer" data-role="footer">
<p>© No Problem</p>
</div>
</div>
Install weinre and check the classes assigned to that part of HTML. It will help you find that class.
http://sviluppomobile.blogspot.com/2013/03/how-to-debug-windows-phone-html5-apps.html
Because JQueryMobile assigns lots of classes to each element, those are not all:
.ui-page
{
background-color: white;
height: 100%;
}
.ui-content
{
background-color: white;
height: 100%;
}
.ui-footer
{
position: absolute !important;
bottom: 0;
width: 100%;
}