I'd like to place the text "även uppfinnare" to the right like in this mockup:
I can display everything except the text farthest to the right when this is the actual result with dynamic data:
The HTML and JSP that does this is:
<div class="clear"></div>
<div class="fl10"><h3>Sökande</h3></div>
<% if(apc.hasSokande()) {
if(sokandeList != null && sokandeList.size() > 0) { %>
<% for(PersonInfo person : sokandeList) { %>
<div class="data-box">
<table border="0">
<tr><td colspan=3><strong> <% if (person.getNamn() != null) { %>
<%= person.getNamn() %>
<% } %> </strong></td></tr>
<tr><td></td><td>Telefon</td><td><%= person.getTelefon() %></td></tr>
<tr><td></td><td>Fax</td><td><%= person.getFax() %></td></tr>
<tr><td></td><td>E-post</td><td><%= person.getEpost() %></td></tr>
<tr><td><%= person.getLandKod() %></td><td>Referens</td><td></td></tr>
</table>
</div>
</div>
<div class="clear"></div>
<div class="fl10"></div>
<% } %>
<% } %>
<% } else { %>
<%= apc.getNyregPerson().getNamn() %>
<% } %>
</div>
Can you please tell me how I can achieve the text on the right? I tried with a div and float:right but it didn't work. Please help. Thank you.
Using HTML div tag would be more suitable for such design. Create two divs for columns.
<div id="personName">
......
</div>
<div id="otherDetails">
.....
</div>
<br style="clear:both;"/>
CSS:
#personName {
float:left;
width:300px;
background:#9c9;
}
#otherDetails {
float:right;
width:450px;
background:#c9c;
}
Check : example
You can use absolute positioning like this one.
<span style='position:absolute; top:10px; right:0px;'>även uppfinnare</span>
Related
Well, I tried solving this on my own but it seems like that many people have the same problem for all sort of different reasons, so here is my situation:
<div class="col-md-4">
<ol class="albums">
<%= render #albums %>
</ol>
<%= will_paginate #albums %>
</div>
#album:
<li id="album-<%= album.id %>" class="listed_album">
<div class=row>
<aside class="col-md-6" id="album_cover">
<% if album.clips.any? %>
<%= link_to album do %>
<img src="http://img.youtube.com/vi/<%= album.clips.first.adress %>/mqdefault.jpg" height="110" width="178">
<% end %>
<% else %>
<%= link_to album do %>
<img src="http://img.youtube.com/vi/ksjfhskd4/0.jpg" height="110" width="178">
<% end %>
<% end %>
</aside>
<div class="col-md-6" id="album_info">
<p><span class="title"><%= album.title %></span></p>
<span class="likes">
<%= pluralize(Album.find(album_to_display).relationships.where(value: 1).count, "like") %> |
<%= pluralize(Album.find(album_to_display).relationships.where(value: -1).count, "dislike") %>
</span>
</div>
</div>
</li>
I would like to have the title in the top-center of its col and span.likes in the bottom-left (top and bottom relative to the height of the picture in the col to the left) but until now I was only able to move it with something like padding-right: 15px; for example. How do I need to adjust it, in order to make things like text-align: center; or float: bottom; work?
li.listed_album {
#album_info {
span.title {
text-align: center;
}
span.likes {
float: bottom;
}
}
}
Hard to tell without being able to see it on jsfiddle or codepen.. Have you tried this:
li.listed_album {
#album_info {
text-align: center;
}
span.likes {
float: bottom;
}
}
or just make #album_info a flexbox:
#album_info {
display:flex;
justify-content: center;
}
I have a rails 4.2 app. I would like to have the whole tr to be clickable and take the user to the user to the product show page.
At the moment the html gets rendered without <href.. and I don't exactly understand why. What did I miss?
index.html.erb
<div class="panel panel-default">
<table class="table">
<tbody class="product-profile-index">
<%= render #products %>
</tbody>
</table>
</div>
_product.html.erb (partial for index page)
<%= link_to product do %>
<tr class = "product-index-row">
<td class="col-md-3 name">
<span class="product-image">
<%= image_tag attachment_url(product, :product_image, :fill, 45, 45) %>
</span>
<span class="product-name">
<%= product.name %>
</span>
</td>
<td class="col-md-6 oneliner">
<%= product.oneliner %>
</td>
<td class="col-md-3 updated">
<%= local_time_ago(product.updated_at) %>
</td>
</tr>
<% end %>
css.scss
.product-profile-index {
.product-index-row {
&:hover {
background-color: $gray-medium-light;
}
}
}
UPDATE:
If I wrap just a smaller part of html like this, then it's working:
<%=link_to product %>
<%= product.name%>
<% end %>
Try using this code
<tr class = "product-index-row" data-href"/product/<%=#product.id%>">
I found a solution. It's not DRY but working pretty well.
I had to pass the link into each td like this:
.......
<td>
<%= link_to(product, html_options = {style:"display:block;"}) do %>
......
<% end %>
</td>
..........
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>
Currently when the code runs both my title fields appear above the same table. It also lower cases all letters except for the first one. I wanted to have a title above each table. The main code looks like,
<%= form_for(#test) do |f| %>
<div id="field">
<%= f.label "test" %>
<%= f.text_field :test_title %><br>
</div>
<div id="field">
<%= f.label "Description" %>
<%= f.text_area :description %><br>
</div>
<div class="actions">
<br><%= f.submit %><br>
</div>
<div id="title">
<%= f.label "Associated worlds" %><br><br>
</div>
<div id="add_fields">
<%= link_to_add_fields "Associate New world", f, :pwss_wbss %><br><br>
</div>
<div id="fields">
<% if #test.valid? %>
<table id="sort_table" class="display">
<thead>
<tr>
<th>Line Item</th>
<th>Description</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<% if #test.valid? %>
<%= f.fields_for :tests_worlds, #test.tests_worlds.each do |builder| %>
<%= render "tests_world_row", f: builder %>
<% end %>
<% end %>
</tbody>
</table>
<% end %>
</div>
<div id="title">
<%= f.label "States" %><br><br>
</div>
<div id="add_fields">
<% if #test.valid? %>
<%= f.fields_for :state, #test.states.each do |builder| %>
<%= render "states_fields", f: builder %>
<% end %>
<% end %><br>
</div>
<div id="add_fields">
<%= link_to_add_fields "Add State", f, :state %>
</div>
<div id="fields">
<% if #state.valid? %>
<table id="sort_table" class="display">
<thead>
<tr>
<th>Line Item</th>
<th>Description</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<%= f.fields_for :states, #test.states.each do |builder| %>
<%= render "states_row", f: builder %>
<% end %>
</tbody>
</table>
<% end %>
</div>
<% end %>
The CSS code I am using for the title fields is:
div#title label {
display: inline-block;
padding: 0px,5px,0px,5px;
min-width: 80px;
font-size: 14pt;
color: Blue;
font-weight: bold;
}
div#title {
position: static;
display: inline-block;
}
When this runs, both titles appear on one line above both tables. How do I get the title so that each one appears above the respective table?
Here is an image of what it displays
If you are going to use title as a tag, set it as a class rather than an Id in the HTML. ID's should only appear once in any page.
Also, it may have something to do with the display being inline-block only on the titles. If the other elements aren't also inline-block they may render in a different order.
I tend to use inline-block for pretty much entire pages. Try setting the value of the container div or the body to inline-block and see if that helps.
If a User creates a bunch of <ul></li>:results</li></ul> those bullets will overlap the <div> below it. How can we stop this from happening? Will you save the <div> before it's too late?!? dun dun dun
index.html.erb
<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
<div class="panel-heading"><h4><b>AVERAGE</b></h4></div>
<% #averaged_quantifieds.each do |averaged| %>
<% if averaged.user == current_user %>
<div style="float:left; width:150px;">
<%= link_to edit_quantified_path(averaged) do %>
<b><%= averaged.name %> (<%= averaged.metric %>)</b>
<% end %>
<ul>
<% averaged.results.each do |result| %>
<li>
<%= result.date_value.strftime("%b.%y") %>
<%= result.result_value %>
</li>
<% end %>
</ul>
</div>
<% end %>
<% end %>
</div>
# The line breaks only work if the User only adds a few rows, but I want to encourage the User to creates as many rows as his heart desires.
<br>
<br>
<br>
<br>
<!-- Default bootstrap panel contents -->
<div id="values" class="panel panel-default">
<div class="panel-heading"><h4><b>INSTANCE</b></h4></div>
<% #instance_quantifieds.each do |instance| %>
<% if instance.user == current_user %>
<div style="float:left; width:150px;">
<%= link_to edit_quantified_path(instance) do %>
<b><%= instance.name %> (<%= instance.metric %>)</b>
<% end %>
<ul>
<% instance.results.each do |result| %>
<li>
<%= result.date_value.strftime("%b.%y") %>
<%= result.result_value %>
</li>
<% end %>
</ul>
</div>
<% end %>
<% end %>
</div>
<div class="values-button">
<%= link_to new_quantified_path, class: 'btn' do %>
<b><span class="glyphicon glyphicon-plus"</span></b>
<% end %>
</div>
you have a the code <div style="float:left; width:150px;">. this is what makes it overlflow to the div below it. float style takes it out of the normal flow of the dom (floats above the natural structure of the dom is a way of describing it) and the div below it doesnt pay attention to it. removing that line of code (you have it twice) will solve your problem