I realize that this topic was discussed many many times. However, none seem to apply to me. I am generating HTML page using ASP.NET MVC construct HTML.DisplayFor() which generates <div class="display-label">Label</div> <div class="display-field">Value</div> pair for every property. I am trying to display them as a column - each line would have a label and a value. I tried various combinations, the best I came is the following:
.display-label {
font-weight: bold;
float: left;
width: 25%;
}
.display-field {
margin-left: 25%;
width: 75%;
}
Looks close to what I want; however, some fields have NULL value, in which case generated HTML is <div class="display-field"></div> In this situation next label is shown on the same line (where value would otherwise be).
I tried clear and display in various combinations - but none of them shows a label, a value and an empty block if the value is missing (for example, clear shifts all values up).
I am sure I am not the first one trying to solve this problem. But I couldn't find anything relevant; and my CSS skills are clearly insufficient. And yes, I know that I can write a custom DisplayFor template; but I was hoping that it wouldn't be necessary!
<div class="display-label">Label</div> <div class="display-field"></div>
<div style="clear:both"></div>
<div class="display-label">Label</div> <div class="display-field">Value</div>
Worked for me.
I think I got something that makes it work:
.display-field::after {
content: ".";
visibility: hidden;
}
Intuitively, I don't like it; so if somebody has a better solution, I'd love to use that one. But it works, and I don't have to mess with the template for a huge class
Related
this is a pretty specific question regarding Notepad++, or any other way you think I can separate these, frankly. I'll give you a quick example:
<div class="image" style="position: absolute; left: 260px; top: 0px;"><img src="http://www.Imagelink1.com/1"></div>
<div class="image" style="position: absolute; left: 520px; top: 0px;"><img src="http://www.Imagelink1.com/1"></div>
<div class="image" style="position: absolute; left: 180px; top: 0px;"><img src="http://www.Imagelink1.com/1"></div>
<div class="image" style="position: absolute; left: 210px; top: 0px;"><img src="http://www.Imagelink1.com/1"></div>
Despite their styling and positions, how would I delete all of these lines while maintaining the first of the duplicate lines (due to the ImageLink URLs being the same). It would be easy to just 'Search and Replace', if it weren't for the positions and some of them having the same link.
It's much more complicated than that, but how would you go about deleting this?
If I understand correctly, the URL is the part that should be unique?
My way to do that would be to seperate the url's from the rest of the HTML, for example by using a regex and replacing everything that's not the URL, or by using block-select in Notepad++ and select all the URL's.
Then I'd paste the URL's in one column in Excel and paste the complete line (including the HTML) in the second column.
Then simply filter the first column by uniqueness:
Select the first column containing the URL's
Click the data-tab
There's a button "Remove duplicates". Click that.
It will ask if you want to expand the selection or use the selected column only. Tell Excel to expand the selection (because we want to filter all columns)
Then a window will popup asking which column contains the duplicate values. Select only column A because that's the column containing the URL's.
If you then click OK (or whatever the button is named) it will remove the duplicates like it should.
Then copy the second column back to Notepad++ and you'd have the unique lines.
I've been using phantomjs and wkhtmltopdf to generate PDF reports of large 7000 row bootstrapped themed tables with color. Both run out of memory when trying to do so. Both uses nearly 1GB of memory to try to generate the PDF of the table. So I've been trying to figure out why. I want to first try to unlink tablesorter and clear it's cache when I'm printing a PDF report because it doesn't need any user interaction (no sorting or filtering needed). But everytime I use destroy, it destroys the look and feel of the table. I want to retain the look and feel but only destory tablesorter stuff like widgets and cache so that it doesn't consume so much memory. Is there a way to clear tablesorter but retain the look and feel of my table?
Update:
Thanx for replying Mottie!
I actually tried that and debugged and found that this is how the DOM looks like with tablesorter enabled with bootstrap theme:
<table data-bind="if: details" id="ColorTable-sticky" class="tablesorter tablesorter-bootstrap table table-bordered hasFilters containsStickyHeaders tablesorter-sticky-hidden" style="position: fixed; margin: 0px; top: 40px; visibility: hidden; z-index: 2; height: 0px; width: 1190px; padding: 0px; border: 0px; left: 36px;">
But once I destroy(false), I get this:
<table data-bind="if: details" id="ColorTable-sticky" class="tablesorter">
I would have thought that "tablesorter-bootstrap" class would be retained in the class but it appears that all classes were removed except for "tablesorter" class.
How do I get it to retain the tablesorter-bootstrap class?
The destroy method does have parameters:
// Remove tablesorter and all classes but the "tablesorter" class on the table
// callback is a function
$("table").trigger("destroy", [false, callback]);
If you pass false as the first parameter, everything is still destroyed, but the "tablesorter" class, including the theme name (e.g. "tablesorter-blue"), is retained.
The sort arrows are removed as well.
Update: Oh, I guess the "tablesorter-bootstrap" class is removed because it is part of the "uitheme" widget. I'll look into that. In the mean time, use the destroy callback function to restore the class name:
$("table").trigger("destroy", [false, function(table){
$(table).addClass('tablesorter-bootstrap');
}]);
Update 2: Ok, that didn't work as expected, you'll need to reapply the "uitheme" widget, but since the destroy method removes the API, I'll update the destroy method in the repository and have it working in the next udpate.
1) I am trying to get the Paginate to display in same line instead of new line. Currently I have
<< Previous
1
2
Next >>
My CSS is defined as follows:
.pagination{CSS Style code}
.pagination a {CSS Style code}
.pagination a.current{CSS Style code}
2) How to turn off << Previous and Next >>?
3) What is the a.(class) called for currently selected paginate?
Currently I have .pagination a.current{CSS Style} but it does not work
I am using https://github.com/mislav/will_paginate
I am a complete Newbie in Rails;
Thanks in advance! :)
In case, any body still needs help with this... because there are many things with the class .pagination all as part of the <%=will_paginate %>. You may want to refer to the parent element.
div.pagination {
max-width: 100%;
min-width: 100%;
width: 100%;
}
and any other styling you may want.
Also, ensure that the parent element to that div does allow it to be spread out..
in case it happens to be in an or which have a width of 10px and you have 3000pages or that kind of thing.
you may want to remove it from it's parent element.
In many of my projects I use simple_form and love it.
However one really strange quirk that I find is that I get 3 small dots underneath the * it supplies for required fields.
I have to get around it with:
= f.input :name, :label => '*', :required => false # Display purpose only (it is required)
Which is messy because the field is required, so this code looks ugly.
Is there a better fix for what seems like a common problem?
I think it's from CSS, if you are useing blueprint, "abbr and accronym" tags have a border-bottom: 1px dotted black style.
Try add to your css file the next line :
abbr, accronym{ border-bottom: 0px; } /*try adding !important after 0px if doesn't work*/
Wish helps :)
It seems like CSS stuff. See what are the properties for abbr tags on your CSS.
Simple form adds an abbr with a border-bottom.
You can remove the border-bottom just with css, but you also need to override the text underline property (which I think comes from default navigator styles)
So, this small css block should work :
form abbr[title] {
border-bottom: none !important;
text-decoration: none !important;
}
There's another solution that I found, in case anyone else comes across this question in the future. I responded to a similar issue that was closed on simple_form with this:
I had this issue too, and it would be pretty easy for the simple_form
maintainers to change, so it might be worth looking into. At the very
least, I'd like to help if someone else runs into the problem using
the gem combination I'm using. On a new rails 5.2.3 app, with
bootstrap 4.3.1 and simple form 4.1.0, I had the same issue with an
ellipses under the asterisk.
I found a way to solve it, since it actually only happens when using
the tag. In locales/simple_form.en.yml, if you remove mark: '', and
change html: '' to html: '*', this removes the ".." that appears under
the asterisk. This occurs because there's an included style with
bootstrap that adds an underlined dotted border to any abbreviation
tags, which allow the user to select that text in order to view the
rest of the word.
What I know:
Rails has the cycle() method that enables odd/even rows in a table to have different CSS classes. We can pass multiple classes to the cycle() method and that works great.
I wanted rows which are grouped in three's; so, I used this:
...some html-table code...
<tr class="<%= cycle("table_row_1","table_row_2","table_row_3","table_row_4","table_row_5","table_row_6") %>">
...some more html-table code...
The corresponding CSS I defined is:
.table_row_1 { background-color: red;}
.table_row_2 { background-color: red;}
.table_row_3 { background-color: red;}
.table_row_4 { background-color: blue;}
.table_row_5 { background-color: blue;}
.table_row_6 { background-color: blue;}
It works, but it doesn't feel "clean".
Is there a recommended way to do this in Rails ?
UPDATES
On similar lines to #Ryan Bigg's answer, is it possible to generate strings in sequence so that the cycle() method can be sent strings of the form prefix_1 prefix_2 prefix_3 somehow using the *3 syntax or some other way?
The inspiration to use this "every third row" striping came from an article on Edward Tufte's site
It seems CSS3 can do this (link), but that's not widely supported at this time :(
Not related to question, but I just searched for this problem I have on Google, and the questions listed at questionhub.com! I never asked this on questionhub.com!
Now its on http://loopingrecursion.com too! What's going on.
How about this?
<tr class="<%= cycle(*[["striped"]*3,["unstriped"]*3].flatten) %>">
Actually this sounds like something i would solve using pure CSS:
table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3) { background:red;}
table tr:nth-child(6n+4), table tr:nth-child(6n+5), table tr:nth-child(6n) { background:blue;}
While this is short and dandy, this does not work in IE unfortunately (it will work in the new IE9).
To get this working you could use jQuery, which offers the same selectors and is completely cross-browser compatible.
In your css you add two classes:
table_row_third_even { background: red;}
table_row_third_odd { background: blue;}
and then you write some javascript (inside application.js for instance), like this
$(function() {
$('table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3)').addClass('table_row_third_even');
$('table tr:nth-child(6n+4), table tr:nth-child(6n+5), table tr:nth-child(6n)').addClass('table_row_third_odd');
});
and your table would have to have the class highlight (you should change that to a better suiting name, this is just an example); but nothing specific for your tr tags, as they will be added by the javascript code.
<table class='highlight'>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</table>
But for this to work you would need to introduce jQuery inside your project. The good thing: it would keep your ruby-code clear from the clutter needed to do this.
Hope this helps!
I found a way to do this, which is sort of "clean" and suits me for now. Details:
In a controller helper (no error checking, yet!):
def cycle_every_third(options = [])
cycle(options[0],options[0],options[0],options[1],options[1],options[1])
end
HTML:
...
<tr class="<%= cycle_every_third(["table_row_1","table_row_2"] ) %>">
...
CSS:
.table_row_1 { background-color: red;}
.table_row_2 { background-color: blue;}
Is that a good way to go about this I wonder? Any pitfalls in Rails I may not be aware of, of calling cycle() inside a helper method as opposed to calling it in the rhtml/erb file?