How can I make sure that 50 characters are shown in block (width:100px;) with CSS if User posts 50 characters on one line.
Now, my view is below.
<div class='example-wrapper'>
<%= simple_format(#user.content , class:'example') %>
</div>
If User posts 50 characters on one line(without making a line break) in #user.content, it is sticking out from browser.I don't mean that I use overflow:hidden;.Although I use white-space:normal; , nothing changes. Please tell me how to do it.
Now, scss is below.
.example-wrapper{
background-color:red;
max-width:100px;
}
.example{
max-width:100px;
white-space:normal;
}
You can use the truncate method. An example:
truncate("Once upon a time in a world far far away", length: 17)
# => "Once upon a ti..."
Read more here: http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-truncate
With your example it would be something like this:
<div class='example-wrapper'>
<div class='example'>
<%= trucate(simple_format(#user.content), length: 50) %>
</div>
</div>
Related
Some background info:
I just started learning middleman to build my portfolio.. I don't have a programming background, so bear with me :-).
I have an index page where I list all my projects like cards, created / populated by data from a json file. This is the loop I use to create the cards for each project on the index page:
<div class="row">
<% data.projects.projects.each do |project| %>
<div class="col-md-12">
<h2>
<%= project.title %>
</h2>
<div>
<%= link_to 'View project', project.path, relative: true %>
</div>
</div>
<% end %>
</div>
This is the json file from which I set the project title and url:
{
"projects": [
{"title": "One",
"path": "/one.html"
},
{"title":"Two",
"path": "/two.html"
},
{"title":"Three",
"path": "/three.html"
}
]
}
So far, so good.
Now what I want to do is to set a (unique) background image for each card, and I'm not quite sure how to do it. As I see it, there are two approaches I could take:
1. Create the CSS rules for each card and set the class in the loop from json:
bg-img-1 { background-image: url("img1.jpg"); }
bg-img-2 { background-image: url("img2.jpg"); }
bg-img-3 { background-image: url("img3.jpg"); }
and add { "bg-img": "bg-img-x" } in each project in the json file.
and then in my card creating loop add the 'bg-img' to the class of each card.
2. Set an inline style on the div, and inject the img path from the json file:
<div class="card" style="background: url(<%= data.project.img %>)"> </div>
However, neither of these solutions seem elegant / optimal?
With solution #1 making a change becomes tedious as I would have to make changes in several places, the CSS & json file.
Solution #2 doesn't have that issue, but I'm not a fan of inline styling / having styling saved in separate places.
So is there another way of doing this? Or do I have to pick one of these and deal with the pro's & cons of each?
Thanks!
Solution #2 is completely fine and often used. inlining style for the background is a standard practice
I have to make text wrap convert into into two line and ellipse will add if the text is more than two line.
Currently it's wrap in multiple line and view look so weird.
What i have done so far in css:
<div class="list card item-text-wrap" ng-click="getNewsDetail(new)">
<a class="item item-thumbnail-left" href="#">
<img src="http:{{new.thumbnail}}">
<h2>{{new.summary}}</h2>
<p style="padding: 0;">{{new.date | date:'EEE, MMM d yyyy'}} {{new.date |
date:'shortTime'}}</p>
</a>
</div>
This is work perfectly when text length is short but i want to make it consistent in two line and rest of part is append with dot(...).
Any help would highly appreciate.
So you cannot accomplish this using only CSS because you must use white-space: nowrap; to be able to use text-overflow: elipsis; and nowrap will not let the words wrap down multiple lines.
Here is a similar question with a Jquery solutions: CSS word ellipsis ('...') after one or two lines
Here is a page dedicated to different version of text-overflow and the different ways to handle it: http://dotdotdot.frebsite.nl/
You are going to need JQuery to do this, but luckily you gain a lot of control and may find a better visual design rather than the ellipsis.
Of course, apply any styles to the parent elements holding the text.
e.g.
<!-- HTML -->
<!-- Give class of "date" -->
<p style="padding: 0;" class="date>{{new.date | date:'EEE, MMM d yyyy'}} {{new.date | date:'shortTime'}}</p>
// Jquery
if ($('.date').height() > 50) {
var words = $('.date').html().split(/\s+/);
words.push('...');
do {
words.splice(-2, 1);
$('.date').html( words.join(' ') );
} while($('.date').height() > 50);
}
Frustrated new user having difficulty. Tried many variations and just cannot get it to work. The html is below and I've stripped out the extra lines. The test has to be written using this html, I cannot change it. Note, classes are named "span3".
This is a popup window that is NOT a new window, it just appears to be a new window. The top "span3" is a dropdown list and I am trying to change the selection. I tried using the select_list in watir, but that did not work.
In the bottom "span3", the grossmarginpercent value will be updated when I change the dropdown value in the top "span3". I want to confirm that grossmarginpercent is updated to the correct value.
I've included the last script I tried. I added a put because I wanted I seeing '2' on the screen, watir was returning false, and I wanted to see what watir was seeing.
watir script:
grossmarginpercent = browser.div(:id => "target_modal").div(:class => "modal_body").div(:class => "row").div(:class => "span3", :index => 1).label(:id => "GrossMarginPercent")
puts grossmarginpercent.value
puts grossmarginpercent.value.include? '2'
html:
<div class="modal-body">
<div class="row">
<div class="span3">
<label>Reward Type</label><select data-bind="options: $root.RewardOptions, optionsText: 'DisplayName', value: RewardOptionId, optionsValue: 'RewardOptionId'"></select>
</div>
<div class="span1"></div>
<div class="span3">
<label>Gross Margin Percent</label><label id="GrossMarginPercent" data-bind="formattedNumber: { value: GrossMarginPercent, format: '#,###.##%' }" style="padding: 6px 4px 8px 0px;"></label>
</div>
</div>
</div>
This is a bit of a stab in the dark, but I would try using Element#text instead of Element#value:
puts grossmarginpercent.text
puts grossmarginpercent.text.include? '2'
I am making a couple of assumptions:
Given the "data-bind" attributes, I am guessing that you are using KnockoutJS (as that seems to be the most popular search result when I looked for people using data-bind attributes).
formattedNumber is a custom binding that is setting the text of the label. I assume you are trying to check something you see, which for a label element would be its text rather than its value attribute.
In my model I have a field type string called god_type.
Example:
Ice,Fire
Ranged,Cannon
Fire,Ranged
I'm going to be using Isotope to filter these models based on their god_type.
I need the output HTML to look like:
<div class="item Fire Ranged">
</div>
Here's what I've tried:
#gods-list.isotope-container
- for god in #gods
.item class='#{god.god_type.split(",").each { |c| c }}'
a href='#{god_path(god)}' class='god'
img src='#{god.thumbnail.url(:thumb)}'
h2= god.name
And the resulting HTML:
<div class="item ["Fire", "Ranged"]">
...
</div>
What am I doing wrong?
I'd suggest:
.item class='#{god.god_type.gsub(/\,/, " ")}'
You could also wrap it in a method, within a decorator, or directly in the model, or even an application helper. Here's a general idea:
class God
def god_type_classes
god_type.gsub(/\,/, " ").downcase
end
end
# your view
.item class='#{god.god_type_classes}'
Noticed I've used .downcase on the string. This is just to address standard CSS naming (should be item fire ranged).
So I want to rig up some css rules for interview transcripts. The format I have in mind looks something like this:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<p>Is it ok if I ask you a question now?</p>
<h2 class="interviewee">Bob: [00:00:03]</h2>
<p>Sure go ahead.</p>
I'd like the paragraph to be a particular colour based on the class of the preceeding heading. Is there a way to do this, as it would make the html markup significantly simpler.
You can use following-sibling combinator: +
h2.interviewer + p { /* style goes here */ }
Sure:
h2.interviewer + p {
color: red;
}
I'm not entirely sure how to do it with multiple paragraphs though. Perhaps if you encased the entire set of paragraphs in a div:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<div>
<p>Is it ok if I ask you a question now?</p>
<p>More text here.</p>
</div>
<h2 class="interviewee"> class="interviewee">Bob: [00:00:03]</h2>
<div>
<p>Sure go ahead.</p>
</div>
You could then do this:
h2.interviewer + div {
color: red;
}
By the way, there are better HTML elements for displaying a conversation, like the newly introduced <dialog> tag
http://www.quackit.com/html_5/tags/html_dialog_tag.cfm
UPDATE:
The <dialog> element never made it into HTML5. It does not exist.