Using the code provided in this link Convert a decimal rating (max of 5 w/ 0.1 increments) to a percentage, I'm implementing an star rating system. The problem is that the starts are only filling whole numbers. For example, if my number is 2.3 the orange stars only fill until 2 even though its width is being given correctly taking into account the 0.3.
HTML
<div class="star-container">
<span class="star-icon grey" [innerHTML]="icons"></span>
<span
class="star-icon orange"
[ngStyle]="getCssWidth()"
[innerHTML]="icons"
></span>
</div>
CSS
.star-container {
max-width: 140px;
width: 85px;
height: 20px;
line-height: 20px;
display: inline-block;
}
.star-container .star-icon {
font-size: 20px;
position: relative;
}
.star-container .star-icon.orange {
color: #f37a1f;
top: -22px;
display: block;
height: 100%;
overflow: hidden;
}
.star-container .star-icon.grey {
color: #e3e3e3;
}
.star-container:not(:last-child) {
margin-right: 5px;
}
Typescript
cssWidth: number = 0;
icon = "★";
icons = `${this.icon}${this.icon}${this.icon}${this.icon}${this.icon}`;
ngOnInit() {
this.calculateCssWidth();
}
public getCssWidth() {
let styles = {
width: `${this.cssWidth.toString()}px`
};
return styles;
}
calculateCssWidth() {
let num = 2.7; //Number of stars
this.cssWidth = this.getStars(num);
}
getStars(num) {
return (num / 5) * 85;
}
This image show how it is supposed to look
This one shows how it actually looks
As you can see, even though the second span in the html does receive the correct width, it does not color to the end, instead it just fills it if it can fill the whole stars.
First I believe there is a typo in your CSS as you are missing a period from the first line of CSS if the intention is that this is a class and not an element.
Second I think the math is wrong for the getStars. Changing this value to 100 gets things to work as expected in this stackbliz.
So change CSS to:
.star-container {
max-width: 140px;
width: 85px;
height: 20px;
line-height: 20px;
display: inline-block;
}
and adjust your getStars function:
getStars(num) {
return (num / 5) * 100;
}
EDIT BASED ON COMMENT:
The root cause of your issue is that while you have defined your container component as 85px, your sub-components are in fact 100px due to total width of icons.
If your intention is to make the width dynamic you are better off using percentages as discussed in the thread you reference in your question.
I have a form with labels in fixed width and right text-align :
.form-horizontal label {
clear: right;
float: left;
font-size : 11px;
margin: 7px;
padding: 5px 5px 0 0;
text-align: right;
word-wrap:break-word;
width: 90px;
}
The problem is, when the label size exceeds 90px, it's rendering one letter over another. For instance, the label 'Tx Emis. Int. R$' is rendering like this image :
Is there a way using only CSS to reduce the font size automatically to avoid this ? Or if not, how can i force word-wrap to next line instead of this behaviour ?
Thank in advance !
Responsive Font Size
* {
/* Calculation */
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}
h1 {
--max-size: 50;
--min-size: 25;
font-size: var(--responsive);
}
h2 {
--max-size: 40;
--min-size: 20;
font-size: var(--responsive);
}
Please see the attachment for more detailed comprehension
I'm using Bootstrap in my current project. As you can see from the picture, there's a blank space that comes in a first column right after the content. Though if I just use columns without any styling, clearly the desired space isn't going to take place. What is the best solution for this problem? I was thinking of wrapping the content in a div with min-height rule but obviously it's a clumsy option.
Thank you.
That is your grid gutter. You can change the width of it with a custom build or by using the source code and changing the scss variable $grid-gutter-width.
As said, the problem is with the gutters.
I use this classes to avoid gutter when I don't want them:
css:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^='col-'],
.row.no-gutters > [class*=' col-'] {
padding-right: 0;
padding-left: 0;
}
// I use those for removing side padding when necessary for an specific col
[class^='col-'].no-pad, [class*=' col-'].no-pad {
padding: 0px;
}
[class^='col-'].no-left-pad, [class*=' col-'].no-left-pad {
padding-left: 0px;
}
[class^='col-'].no-right-pad, [class*=' col-'].no-right-pad {
padding-right: 0px;
}
sass:
.row.no-gutters {
margin-right: 0;
margin-left: 0;
> [class^='col-'], > [class*=' col-'] {
padding-right: 0;
padding-left: 0;
}
}
// I use those for removing side padding when necessary for an specific col
[class^='col-'].no-pad, [class*=' col-'].no-pad {
padding: 0px;
}
[class^='col-'].no-left-pad, [class*=' col-'].no-left-pad {
padding-left: 0px;
}
[class^='col-'].no-right-pad, [class*=' col-'].no-right-pad {
padding-right: 0px;
}
Problem:
Do you see the gutter spacing between them? I'd like to get rid of that and add custom ones to match the margin at the bottom.
Here's the page's code:
#posts
.row
- #posts.each do |post|
.col-xs-12.col-sm-6.col-md-4.col-lg-3
.post
.post_content
.title
%h2
= link_to truncate((post.title), length: 25), post
%p
$
= post.price
.post_image
= link_to image_tag(post.image.url), post
.data.clearfix
%p.username
Listing by
= post.user.name
%p.buttons
%span
%i.fa.fa-comments-o
= post.inquiries.count
%span
%i.fa.fa-thumbs-o-up
= post.get_likes.size
And of course, the CSS:
#posts {
.post {
margin: .5rem;
border: 1px solid #9B9B9B;
&:hover {
border: 1px solid white;
};
.post_image {
height: 20rem;
overflow: hidden;
img {
width: 100%;
border-radius: .3rem .3rem 0 0;
}
}
.post_content {
margin: 1rem;
h2 {
margin: 0;
font-weight: 100;
padding: 1rem;
border-bottom: 1px solid #E4E4E4;
font-size: 1.5rem;
a {
text-decoration: none;
/*color: #333233;*/
&:hover {
color: #6E58E0;
}
}
}
.data {
/*padding: .75rem 5%;*/
color: #969696;
.username, .buttons {
margin: 0;
font-size: 1rem;
}
.username {
float: left;
}
.buttons {
float: right;
span {
margin-left: .5rem;
}
}
}
}
}
}
Ideally, you should show me how to style it so that the individual posts are squares with even margin between them.
Simply add this (the other answer had the same idea but you don't need the commas since you're using HAML):
.col-xs-12.col-sm-6.col-md-4.col-lg-3 {
padding-right: 0;
padding-left: 0;
}
The reason is that Boostrap's row comes preloaded with paddings (not margins) of 35px and 15px. Therefore you need to reset it or set your own.
In the Sass version of Bootstrap, find the _variables.scss file. Search for "$grid-gutter-width". You can adjust this value to whatever you want to affect the gutter width.
The default gutter width is this:
$grid-gutter-width: 30px !default;
Change that to something smaller to see if that works.
If you're working in the already compiled version of Bootstrap, you'll have to adjust this crazy set of code:
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px
}
Adjust the padding-left and padding-right here, or override them in your own css.
You shouldn't override default css, like in most answers.
To keep the default bootstrap css you could use this:
<div class="customdiv">
<div class="col-xs-12.col-sm-6.col-md-4.col-lg-3">
content here
</div>
</div>
You can than add the styling to customdiv.
.customdiv{
boder:2px red;//or something
}
When you override the bootstrap css you dont have the padding anymore at spots where you do want the padding.
I have a jsfiddle here - https://jsfiddle.net/w4k70at5/
It's a realy simple problem but I'm a bit stumped.
I have a border between each link to separate them.
I don't want a border on the last link in the line.
I can remove the last border but can I remove the border after 'Link Six' and then when the page is resized remove the border on the last link on that line.
*{
margin: 0;
padding: 0;
}
nav{
margin: 50px;
max-width: 600px;
margin: 50px auto 0 auto;
}
ul{
list-style: none;
text-align: center;
}
li{
display: inline;
margin: 0 0 10px 0;
}
a{
display: inline-block;
border-right: 1px solid red;
font-size: 1.5em;
padding: 5px;
text-decoration: none;
}
li:last-of-type a{
border-right: none;
}
You can perform that using Jquery :
1st possibility:
Add a JQuery function which will add a class to your ul if it's the last one on the line:
$(function() {
var lastElement = false;
$("ul > li").each(function() {
if (lastElement && lastElement.offset().top != $(this).offset().top) {
lastElement.addClass("noborder");
}
lastElement = $(this);
}).last().addClass("noborder");
});
And a CSS class to remove the border:
.noborder a {
border: 0;
}
If you want, you can remove your CSS rule with the previous solution:
li:last-of-type a {
border-right: none;
}
JSFiddle 1: https://jsfiddle.net/ghorg12110/w4k70at5/4/
2nd possibility:
Same JQuery function but will not target the last ul > li a (because you already target it with your CSS):
$(function() {
var lastElement = false;
$("ul > li").each(function() {
if (lastElement && lastElement.offset().top != $(this).offset().top) {
lastElement.addClass("noborder");
}
lastElement = $(this);
});
});
And a CSS class to remove the border:
.noborder a {
border: 0;
}
JsFiddle 2: http://jsfiddle.net/ghorg12110/x93456gr/
FULL CSS SOLUTION
https://jsfiddle.net/w4k70at5/
I added a class to the <li> that cause a problem, and this one is set up like following :
When the screen size is under 590, I tell the class to show a right red border
When screen size is above, border is transparent
I used media queries CSS function to perform this. This allows to set different class behiaviour for different variables (like the screen size in this case).