CSS design un-even? - ruby-on-rails

Alright, I'm launching this website (beta) in an hour but I've just noticed an ugly bug. I've added a new counter (1, 2, 3, etc..) was previously using <ol>.
Look at this picture the before:
everything was even, the vote up button, the text all the way down.
Now the live version after adding new counter: www.leapfm.com is un even. (when it becomes double digits)
Please use FireBug or Chrome Developer Tools, if you need any further code I will provide it ASAP.
original code:
.subtext1 {
font-family: Verdana;
font-size: 7pt;
color: #828282;
}
.song {
height: 42px;
}
.counter {
float: left;
margin-right: 2px;
font-size: 14px;
}
.subtext {
font-family: Verdana;
font-size: 7pt;
color: #828282;
}
.title {
font-family: Verdana;
font-size: 10.3pt;
color: #828282;
}

(I'm adding an answer because I can't preview my code with a comment and they're not giving me enough space.)
Yes, an ol (or table) would've worked. But a quick-fix solution would be to give the counter a fixed width (say 30px). The only problem with this would be if you started having a lot more digits.
If you wanted to fix this using JavaScript (which would work forever), use code like this (jQuery).
<script type="text/javascript">
var counters = $(".counter");
var counterLen = counters.length; //one based
//convert to zero based
var largestWidth = counters[counterLen - 1].offsetWidth + "px";
//WAY ONE: DO IT WITH A STYLESHEET (I recommend this)
var stylesheetDiv = $("<div>");
stylesheetDiv.html("<style type=\"text/css\">.counter{width: " + largestWidth + "}</style>");
$("head").append(stylesheetDiv);
//WAY TWO: DO IT WITH A JQUERY LOOP
counters.css({width: largestWidth});
</script>
I used way one before. I'm pretty sure I have to do the div with a stylesheet inside for IE8.

For .subtext1, give it a margin-left: 15px.
For .counter, give it a height of 100% or 22px.
And delete the multiple between .title and .subtext1.

Related

Why is this iFrame not behaving responsively on IOS?

I have an iFrame generated by ThingLink that I need to drop into an existing web page and behave responsively.
I would have thought that the usual CSS used to make YouTube or Vimeo iFrames would do the job. Which it does on most browsers, but for whatever reason this does not seem to be the case for Safari on IOS (Safari desktop appears to work). Why is this? Is there something in the Iframe's HTML that is causing an issue?
Here's a Fiddle showing the iFrame in question misbehaving (top) and a sample YouTube iFrame behaving (bottom).
And of course the actual code I am using
HTML:
CSS:
div.iwrap {
width: 100% ;
position: relative;
padding-bottom: 60%;
height: 0;
-webkit-overflow-scrolling:touch;
overflow: hidden;
}
.iwrap object,
.iwrap iframe,
.iwrap embed {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
border: none;
}
iframe,
object,
embed {
max-width: 100%;
}
You can see I've tried trying out the absolutely positioning each corner of the iframe, but with no joy.
I should stress that it is only Safari on IOS that it breaks. Safari for desktop and Android for mobile look good.
Any pointers to get that working would be much appreciated, but more importantly, why isn't it.
Using responsive iframe code I devised for myself, and using your src= url, I created and tested this Pen on CodePen.
Using CodePen's CrossBrowser Testing, the Pen displays and functions correctly on Android mobile devices. (With one exception: the embedded Youtube video has no audio in CrossBrowser Testing although in normal view it does.) But on iOS devices it displays only a black square where the content should be.
I'm not certain from your post whether this is the failure you are talking about.
I have other Pens, e.g., Responsive Iframe - Base Code, which function correctly on iOS devices. Just the one using your src= url does not.
This leads me to wonder whether, even though using known responsive HTML and CSS, there is something about the source that's not playing nicely with iOS.
I'm not sufficiently versed in the technology to be able to suggest what that might be, however, I hope I've demonstrated that even with code known to be responsive the source document doesn't display in iOS. Thus, the problem appears not to be with the code but rather some conflict inherent between the source and iOS.
Sorry I couldn't be of more help, but maybe this will help you to rephrase the question and question title more narrowly and specifically so that it will grab another user's attention.
The editor insists that, with a link to CodePen, I must include some code. So, merely to satisfy that requirement, here is my responsive HTML and CSS code.
HTML:
<div id="Iframe-Thinglink"
class="set-margin set-padding set-border set-box-shadow
center-block-horiz">
<div class="responsive-wrapper
responsive-wrapper-wxh-600x480"
style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="//www.thinglink.com/channelcard/632903487365054466">
<p>Error Message Here</p>
</iframe>
</div>
</div>
CSS:
/* CSS for responsive iframe */
/* ========================= */
/* outer wrapper: set the iframe's width and height by setting
max-width & max-height here; max-height greater than
padding-bottom % will truncate to padding-bottom % of max-width */
#Iframe-Thinglink {
max-width: 600px;
max-height: 100%;
overflow: hidden;
}
/* inner wrapper: make responsive */
.responsive-wrapper {
position: relative;
height: 0; /* gets height from padding-bottom */
/* put following styles (necessary for overflow and scrolling
handling on mobile devices) inline in .responsive-wrapper around
iframe because potentially unstable in CSS:
-webkit-overflow-scrolling: touch; overflow: auto; */
}
.responsive-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
/* padding-bottom = h/w as % -- sets aspect ratio */
/* YouTube video aspect ratio */
.responsive-wrapper-wxh-650x315 {
padding-bottom: 56.25%;
}
.responsive-wrapper-wxh-600x480 {
padding-bottom: 80%;
}
/* general styles */
/* ============== */
.set-border {
border: 5px inset #4f4f4f;
}
.set-box-shadow {
-webkit-box-shadow: 4px 4px 14px #4f4f4f;
-moz-box-shadow: 4px 4px 14px #4f4f4f;
box-shadow: 4px 4px 14px #4f4f4f;
}
.set-padding {
padding: 40px;
}
.set-margin {
margin: 30px;
}
.center-block-horiz {
margin-left: auto !important;
margin-right: auto !important;
}

Checkbox on iPhone: Left Border Cut Off

Got an issue on pages like this where the left border of my checkboxes appear cut off. Looks really unprofessional. Only seems to happen on iOS. I thought I could just add some padding to the div (or margin) but not the case. Is this common?
Try this.
input[type="checkbox"], input[type="radio"] {
-webkit-transform: translate(0px); /*Earlier than iOS 9.0*/
transform: translate(0px);
}
I think the problem is your framework (WooCommerce?) or plugin/theme for it. It has strange CSS code like this:
.single-product div.product .images {
width: 41.1764705882%;
float: left;
margin-right: 5.8823529412%;
margin-bottom: 3.631em
}
.single-product div.product .summary {
width: 52.9411764706%;
float: right;
margin-right: 0;
margin-bottom: 3.631em
}
I don't know why these numbers so fractional, but in this case your checkbox looks OK:
.single-product div.product .summary {
width: 52%;
...
}
I advice you to figure out why your framework/plugin/theme has so fractional numbers, but if you don't want/can't, you could use workaround with margin-left: 1px for your checkbox.

Why does space appear at the right of the three main buttons?

See the following link: http://www.howru.nl/preken/new/test3.html
For some reason I keep getting space at the right of the three main buttons.
To better identity this on this forum, I've enabled the border of the relevant table temporary.
The issue is inside the following class I reckon:
.button
{
display: block;
width: 350px;
height: 135px;
margin-left: 7px;
margin-right: 7px;
margin-top: 10px;
margin-bottom: 20px;
text-decoration: none;
background-position: top;
color: #FFFFFF;
}
The specified width is the actual width of the background image.
The full CSS sheet can be found at http://www.howru.nl/preken/new/styles.css
Right column (text) should float at the right, as is the case currently. Left column (buttons) should float at the left (as is currently the case), and the center picture should float in the center. Strange thing is the left column takes more space in the table, while none have a fixed width.
Ideally I don't want to specify a width of a column twice (for the TD and for the content, in case of a BG image on the display-block'd content); in the proposed solutions below the display-block'd has a width specified (width of the background image) and the parent TD element as well... That is what I don't like and for which I started this post. Because I still don't understand why the TD's aren't equally sharing the available table space:
Now column 1 (left) seems to take the most, while it doesn't need so much, the second takes a little less, and the right column takes only what was specified for the inner width, whilst the left (1st) column has the same (width specified for the content instead of the TD) and does not stick to that width apparantly, while the right TD does...)
Both in IE as Opera I get this; any idea what I am missing??!
Goal is to understand what is happening, and why. So I'm not looking for a cheap fix - as one can thing of 100 'ugly' ways to do this.
here are the changes i have made. Try this. Btw you should use % instead of px
.top {
vertical-align: top;
width: 350px;
}
removed float from .blkright
.blkright {
}
.title {
font-size: 14px;
font-weight: bold;
letter-spacing: -1px;
padding-bottom: 5px;
text-align: center;
}
.column {
margin-left: 12px;
overflow: hidden;
width: 325px;
}
Change right table .top .column width in the to change this space to right of buttons
.column {
overflow: hidden;
padding: 5px 5px 25px;
width: 290px;
(originally width was 250px) because it is trying to fit the width: 100% you have set
you can also remove the 250px , since the right column is the only column you've set a width on
I am not ultimately sure how you want the rest (e.g. the text paragraph) aligned then, but here is my approach.
First, give each body-column a class or an id. You assign these classes to the three <td>s respectively.
.content-left {
float: left;
}
.content-mid {
float: left;
}
.content-right {
display: table-row;
}
Although this solution takes a bit more effort than IanO.S.'s, this solution is also more dynamic. If your button or image sizes change someday you don't have to hack into your code, find and edit your pixel-widths.
Add declaration of width on the first table cell
.top:first{
width: 364px;
}
and you wont see any spaces anymore

How to wrap single column header text into multiple lines in jqgrid

If column label text is wider than column width, label text is truncated.
Increasing column width is not nice since some texts are long.
How to make text to word wrap into multiple lines? Header height should be determined by maximum column height.
Only solution which I found is
jQgrid: multiple column row headers
but this does not implement word wrap of text.
How to implement word wrap of header text ?
Update. I tried Oleg styles for character and word wrap.
Character wrap
th.ui-th-column div{
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
height: auto;
vertical-align: middle;
padding-top: 3px;
padding-bottom: 3px
}
shows only half of second line. Third line is not shown at all:
Word wrap
th.ui-th-column div{
white-space:normal !important;
height:auto !important;
padding:2px;
}
disables column resize for wrapped columns. On those columns moving mouse icon to column divider mouse cursor does not change to sizer. Wrapped columns cannot resized.
How to fix those issues ?
Update 2
I tried character wrap (last sample in Oleg reply).
I found issues if column width is decreased so that more lines appear in header:
Column cannot resized if dragging in bottom of column divider: resizer height is not increased on resize.
In IE9 header height increase is not sufficient: last header line is not visible after resize. In fireFox this issue does not occur.
In your example with character wrapping you forgot to use !important after the height: auto setting.
I agree that the problem with column resizer really exists in my demo from the my old answer. So I improved it. Moreover I try to describe in which situations can be important to use character wrapping instead of word wrapping.
The new demo with the word wrapping is here. the code is the following:
var grid = $("#list"), headerRow, rowHight, resizeSpanHeight;
grid.jqGrid({
...
});
// get the header row which contains
headerRow = grid.closest("div.ui-jqgrid-view")
.find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");
// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() +
'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.cssText = resizeSpanHeight;
});
// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
var ts = $(this);
ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');
});
It use the following CSS
th.ui-th-column div {
white-space: normal !important;
height: auto !important;
padding: 2px;
}
and produce the following picture
(I included <br/> after every character in the first column to make the text "Inv No" by placed on many rows).
Everything look very good, but it can be some situations that you can one very long word in the column header. Some languages like German build sometimes long words like "Softwareberetstellungsform" which consist from many words. In the example it was "Software", "bereitstellung" and "form". In other languages the same situation is also possible, but is not so frequently. As a result one will receive the following (less perfect) picture (see the demo here):
You can see that the texts "AmountInEUR", "TaxInEUR" and "TotalInEUR" are cut off. One can either include manual line brakes (<br/>) in the column text or use character wrapping which I described in the answer. If we change only the described above CSS for th.ui-th-column div to the following
th.ui-th-column div {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
height: auto !important;
vertical-align: middle;
}
we will receive the following results (see the demo here)
By the way the character wrapping work in some browsers like Google Chrome as word wrapping (!!!) if the text contains spaces. So the demo will be displayed in Google Chrome, Safari, Opera, Firefox like in the picture above with the word wrapping, but the same demo in IE (inclusive IE9) will be seen as
So no way is absolutely perfect, but the character wrapping have some advantages for all modern web browsers with the exception Internet Explorer (version < 10). The usage of <br/> inside of column text or the usage of CSS which depend on the currently used web browser can make the solution much better.
<style type="text/css">
.ui-jqgrid .ui-jqgrid-htable th div
{
height: auto;
overflow: hidden;
padding-right: 4px;
padding-top: 2px;
position: relative;
vertical-align: text-top;
white-space: normal !important;
}
</style>
Following code wraps row data
.ui-jqgrid tr.jqgrow td
{
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: normal !important;
height: auto;
vertical-align: text-top;
padding-top: 2px;
padding-bottom: 3px;
}
Following code wraps table header data
.ui-jqgrid .ui-jqgrid-htable th div
{
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: normal !important;
height: auto;
vertical-align: text-top;
padding-top: 2px;
padding-bottom: 3px;
}

Customizing the Stars Image for Ajaxful_Rating RoR plugin

I'm trying to come up with my own star image that's slightly smaller and different style than the one provided in the gem/plugin, but Ajaxful_rating doesn't have an easy way to do this. Here's what I've figured out so far:
The stars.png in the public folder is three 25x25 pixel tiles stacked vertically, ordered empty star, normal star, and hover star.
I'm assuming as long as you keep the above constraints, you should be fine without modifying any other files.
But what if you want to change the image size of the stars to larger or smaller?
I've found where you can change the height in the stylesheets/ajaxful_rating.css
.ajaxful-rating{
position: relative;
/*width: 125px; this is setted dynamically */
height: 25px;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
background-position: left top;
}
.ajaxful-rating li{ display: inline; }
.ajaxful-rating a,
.ajaxful-rating span,
.ajaxful-rating .show-value{
position: absolute;
top: 0;
left: 0;
text-indent: -1000em;
height: 25px;
line-height: 25px;
outline: none;
overflow: hidden;
border: none;
}
You just need to change every place that says "25px" above to whatever height your new star image is. This works fine but doesn't display the horizontal part correctly. Anyone know where I would look to set the horizontal part as well? (I'm assuming it's in an .rb file somewhere based upon how many stars you specified in your ajaxful_rating setup)
Nevermind, I'm stupid.
In the lib/axr/stars_builder.rb, find the following:
def ratings_tag
......
#css_builder.rule('.ajaxful-rating', :width => (rateable.class.max_stars * 25))
....
end
Change the 25 to your new width.

Resources