Customizing the Stars Image for Ajaxful_Rating RoR plugin - ruby-on-rails

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.

Related

min-height with calc and position fixed not working on mobile

I have a mobile menu with position:fixed and min-height of calc(100vh - 48px). Top is set to 48px. In the mobile menu I have a wrapper set to height:100% and overflow:auto. I tried setting it to min-height: 100% but it doesn't work. When the content gets taller, the content inside is hidden and there is no scroll. I have set overflow to auto and then tried scroll on the mobile menu but nothing works. What may cause the problem?
.mobile-nav__menu {
width: 100vw;
min-height: calc(100vh - 48px);
position: fixed;
top: 48px;
bottom: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
z-index: 21;
overflow: auto;
}
.mobile-nav__menu-wrapper {
min-height: 100%;
width: 100%;
background-color: #fff;
overflow-y: auto;
}
Try to set the height property on window resize javascript event something like that;
var onresize = function() {
height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);
Try using percentage instead of absolute px values.
For example,if u want a header of height 10px on a screen that is 1000px tall, type in "1%" instead of "10px".
This will help the header to adapt to different screen sizes.
Also try adding background-size:cover OR background-size:100% in the css class.

What to do if my Background-img is not responsive on every device

I am making my portfolio and i get stuck. I just made small view of it...how should it look. I started testing it on my PC it is OK...just how i want...than i started to test it on my iPad and the BACKGROUND-IMG was not fit but on my Sony Xperia mobile it was OK as on my PC. Can you please help me? Thank's
---> link to testing website: http://marten.esy.es/
I hope there are some people which should help me with that :) Have a nice day!
There are a couple of things. I would remove the fixed position from your background on slide 1. Then change the property of background-size to cover. This allows you to set a height for each of your media queries. I would also suggest adding background-position: center; so the image always stays in the center relative to the div.
.slide1 {
background: url('mountainsmorning.jpg') 50% 0 no-repeat;
color: #fff;
height: 400px;
margin: 0;
padding: 25% 0 30% 0;
background-size: cover;
text-align: center;
}
as far as i could understand your question and after looking at the example i think the problem is with the covering the background to the whole view-port. If it's such then use the following style for your .slide1 element.
.slide1 {
background: url('mountainsmorning.jpg') 50% 0 no-repeat fixed;
color: #fff;
/* height: 400px; */
margin: 0;
padding: 25% 0 30% 0;
background-size: cover;
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Note: And don't use fixed height or width as you're developing for multiple screen sizes. Else's is fine.

Strange position: fixed behaviour on iOS and Chrome (Windows)

I made a website that looks exactly like it should on Firefox but unfortunately not on iOS (which uses Safari webkit) and chrome on some devices of the device. It just doesn't properly display the Menu-Bar (it should be position fixed). The problem here is, that I don't really know what the issue is.
Screenshots:
White space between address bar and photo should be the menu:
Here you see that you only see the menu when it's above the parent
I can't really figure out why it behaves like this, because according to various wikis position fixed is relative to the viewport and not it's parent "the viewport is always their containing block" ( http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Summary )
*The CSS:
.main-navigation {
clear: both;
float: left;
width: 100%;
position: fixed;
width: 100vw;
height: 6rem;
background: -webkit-linear-gradient(top, #fff, #d6d6d6);
background: -moz-linear-gradient(top, #fff, #d6d6d6);
background: -ms-linear-gradient(top, #fff, #d6d6d6);
background: -o-linear-gradient(top, #fff, #d6d6d6);
top: 0;
right: 0;
z-index: 100;
overflow: visible;
}
nav {
display: block;
}
.home header.site-header {
top: 24rem;
left: 8rem;
position: absolute;
z-index: 3;
}
.home header.site-header is the parent of the menu
There are so many issues with :position: fixed; on mobile devices/with mobile browsers, that I don't even know where to start.
http://bradfrost.com/blog/mobile/fixed-position/
Check Brad Frost's article on the matter and you will see why this is not an easy task to accomplish.
What could help is Filament Group's fixed-sticky-fix:
https://github.com/filamentgroup/fixed-sticky

Make ngTags scrollable

Can anyone tell me how to make ng-input-tag(Angular) scrollable in X-direction.
Currently if I insert the tags then the height of the div increases.
What I want is that If I go on inserting the tags then it should scroll in X-direction
I have tried:
width: auto;height: 34px;overflow-x: auto;overflow-y: hidden;white-space: nowrap;
But it didn't work as expected
So let me know where I am wrong.
I know this is late, but I have seen similar questions go unanswered recently and this one is at the top of a google search for this problem. This can be done using only CSS. If you would like an added visual effect, try customizing the scrollbar.
For the X direction:
This can get a bit ugly if you decide to set a min-width or width on your tags.
The only way I've found to do it in the X direction is using flexbox:
tags-input .tags .tag-list {
display: flex;
flex-direction: row;
overflow-x: auto;
}
tags-input .tags .tag-item {
/* Applying this display class */
display: inline-table;
/* OR set the tag width to ensure that the text is visible */
min-width: 150px; /* Could also use width: 123px */
}
This Github issue is also directly related to the problem.
For the Y direction:
Applying a fixed height to the .tags class and setting the overflow-y to scroll will give you the desired result:
.tags {
height: 34px;
overflow-y: scroll;
}
Try This
simple css to add on tags-input class for scroll on x and y axis
.tags-input {
max-width: 100%;
line-height: 22px;
overflow-y: scroll;
overflow-x: scroll;
height: 65px;
cursor: text;
}

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

Resources