i am trying to convert the background images currently being used within my navigation to a sprite to save on http requests, though im getting the following error
content: "\000a Sass::SyntaxError: Undefined mixin 'navigation-sprite'.\000a (in \002f home\002f html\002f teammngt\002f app\002f assets\002f stylesheets\002f navigation.css.scss)";
scss file
#import "compass";
#import "navigation/main/*.png";
a {
display: table-cell;
/* #header_main height + 1, to move it 1px into the header_main strip */
height: 61px;
width: 120px;
#include navigation-sprite(bg-normal);
//background: url('navigation/main/bg-normal.png') no-repeat;
/* Concerning fonts/text */
line-height: 26px;
/* Concerning text align */
text-align: center;
vertical-align: bottom;
for sure im doing something wrong here, but im not having much luck working it out
#import "compass";
#import "navigation/main/*.png";
#include all-main-sprites;
use like this:
#include main-sprite(bg-normal);
Related
In my styles.scss i am importing the bootstrap variables, and did a testing it works.
#import '~bootstrap/scss/_functions.scss';
#import '~bootstrap/scss/_variables.scss';
#import '~bootstrap/scss/mixins/_breakpoints';
$grid-breakpoints: (
sm: 768px,
md: 768px,
lg: 1024px
);
$container-min-widths: (
sm: 768px,
md: 768px,
lg: 1024px
);
#import "~bootstrap/scss/bootstrap";
#include media-breakpoint-down (sm) {
body{
background: green;
}
}
#include media-breakpoint-between (md, lg) {
body{
background: blue;
}
}
#include media-breakpoint-up (lg) {
body{
background: gray;
}
}
But my question is, if i use the app.component.scss - still is it require to import all the variables again?
without import i tried, like:
#import '../../styles.scss'
#include media-breakpoint-down (sm) {
body{
background: green;
}
}
#include media-breakpoint-between (md, lg) {
body{
background: blue;
}
}
#include media-breakpoint-up (lg) {
body{
background: gray;
}
}
But got error like :
ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
#include media-breakpoint-down (sm) {
^
Media query expression must begin with '('
in D:\IBO\POC\ibo\src\app\app.component.scss (line 3, column 1)
i ｢wdm｣: Failed to compile.
can't we download all app specific requirement at once? or what is the correct approach?
This is how css encapsulation works in Angular, if you want to use SASS functions (like #include, #extend) in your scss with external #mixins or styles, you'll need to import these external files every time.
This is not a great practice though as it bubbles the amount of produced css in the final html page (every time you #import a file, it's whole content is copied). So a better approach would be to put some common styles in your styles.scss and use them through the whole app.
In your example I don't understand why you need to do the same in app.component.scss? Is it just for testing? You shouldn't need to - it should be enough putting common styles (like yours) in styles.scss and they should be applied to the whole application. Just make sure your style.scss is added to your angular.json file under the styles section. Something like:
"styles": [
"src/styles.scss"
]
Hope that helps.
I have a very simple ui-select component in my application like in the following examples :
http://angular-ui.github.io/ui-select/demo-basic.html
After migrating from Bootstrap 3 to Bootstrap 4. The component is still here but the results are not displayed.
What I've tried so far :
I used the console to check that they were in the code and they are.
I tried to add dropdown-item class into the results but it didn't work
I had the same issue and adding following css classes to Style.css resolved it.
/**
* ui-select.bootstrap4.shim.css
*
* Adapt `bootstrap` (v3) theme from AngularJS `ui-select`
* component to Bootstrap v4.x look and feel.
* Bootstrap v4.x look and feel
*
* Feel free to test and open issues and pull requests.
*
* #see https://angular-ui.github.io/ui-select/
*
* #project ui-select.bootstrap4.shim.css
* #version 1-20180706
* #author Francis Vagner dos Anjos Fontoura
* #copyright 2018 by the author
* #cssdoc version 1.0-pre
* #license MIT
*/
.pull-left {
float: left !important;
}
.caret {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;
display: inline-block;
margin-left: 0;
vertical-align: middle;
width: 0;
}
.pull-right {
float: right !important;
}
.ui-select-toggle.btn {
border: 1px solid #ced4da;
}
.ui-select-choices.dropdown-menu {
display: block;
}
.ui-select-match-text {
max-height: 24px;
}
.ui-select-match.btn-default-focus {
border-radius: .25rem;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
outline: 0;
}
.ui-select-match.btn-default-focus > .ui-select-toggle {
border-color: #80bdff;
}
Reference : https://github.com/francisfontoura/angularjs.ui-select.bootstrap4.shim.css/blob/master/ui-select.bootstrap4.shim.css
Turns out in BS4, the menu is displayed only when the show class is present along with the dropdown-menu class and not displayed otherwise :
.dropdown-menu.show {
display: block;
}
To fix my issue I had to take this part from BS3 and copy it into my own app style :
.open > .dropdown-menu {
display: block;
}
I'm well aware that this is not the proper way to do it but it will do the trick until angular-ui receive a BS4 ready update.
I had the same problem and after seeing that ui-select needs a lot of work to be fixed for bootstrap 4, I wrote a small directive to replace it.
The goal was also to keep it simple and looking native in bootstrap 4.
It's available on npm.
I'm quite new to this, but i cannot figure out the problem.
In twitter bootstrap i would use :
<div class="row-fluid">
<div class="span2">Column1</div>
<div class="span6">Column2</div>
</div>
And it all works fine. But i do not want to write spanX and spanY directly into my html file, rather i would like to give meaningful class names, for example:
<div class="user-container">
<div class="user-filter">First Column</div>
<div class="user-list">Second Column</div>
</div>
Given the fact, that i'm using https://github.com/thomas-mcdonald/bootstrap-sass, how should i write my scss file? I've tried the following, and it does not work (two columns are not displayed):
#import "bootstrap";
#import "bootstrap-responsive";
.user-container {
#extend .row-fluid;
}
.user-filter {
#extend .span2;
}
.user-list {
#extend .span10;
}
If i look at the generated code, it seems to me that everything should be ok:
/* line 164, ../../../../../.rvm/gems/ruby-1.9.3-p125/gems/bootstrap-sass-2.0.0/vendor/assets/stylesheets/bootstrap/_mixins.scss */
.span2, .user-filter {
width: 140px;
}
and so on.
What am i doing wrong?
UPDATE:
ok, just to be clear what is wrong - the columns are laid out as rows (one after another) rather like true columns (one next to each other), eg.:
with bootstrap: Column1 Column2
with my custom classes:
First Column
Second Column
I've inspected the elements layout in Chrome and it seems that bootstrap classes have float property, and mine - no. Looking at css source i see classes like this:
[class*="span"] {
float: left;
margin-left: 20px;
}
So in my case i think it should generate something like :
[class*="user-filter"] {
float: left;
margin-left: 20px;
}
or not?
It's your use of #extend, or rather, Sass' inability to deal with wildcard class matching, which is rather unsurprising, since it gets rather complex.
Bootstrap uses a number of what I might refer to as 'nonstandard' methods to address some classes. You've mentioned one of those in your post above - [class*="span"].
Naturally, when you use #extend x, Sass is extending the x class. Unfortunately, it (currently) has no way of knowing that a wildcard matcher also affects the output of the class. So yes, in an ideal world, [class*="span"] would also be extended to define [class*="span"], .user-filter, but Sass can't currently do that.
While extending .row-fluid is enough to include the rules nested underneath it wrt. the span classes, as per above, it won't adjust the wildcards for extended spans.
bootstrap-sass already had a mixin for fixed width columns/rows, makeRow() and makeColumn(). I've just pushed a makeFluidColumn() mixin, that, well, makes a fluid span. Your code would then become:
.user-container {
#extend .row-fluid;
}
.user-filter {
#include makeFluidColumn(2);
}
.user-list {
#include makeFluidColumn(10);
}
Unfortunately (as per usual) it's not quite so simple. Bootstrap uses this snippet to reset the margin on the first spanx class that is a child of the row.
> [class*="span"]:first-child {
margin-left: 0;
}
However, we cannot redefine this for each call of makeFluidColumn, and so we must manually set no margin-left on any element that will be the first child of a fluid row. It's also worth noting that mixing spanx classes and makeFluidColumn classes will cause the first spanx class to have its margin reset, regardless of whether it's actually the first column in the row.
Your code would therefore be
.user-container {
#extend .row-fluid;
}
.user-filter {
#include makeFluidColumn(2);
margin-left: 0; // reset margin for first-child
}
.user-list {
#include makeFluidColumn(10);
}
It's not a particularly pretty solution, but it works, and is all to do with how Bootstrap uses wildcard class matching, as you gathered in your question update. I've only just pushed this to the 2.0.2 branch, so you'll have to use Bundler with Git to install it, but I'm hoping for a release in the next couple of days.
You are right. Twitter is pushing an ani-patter here. See this article.
http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html
Using boostrap-sass 2.3.2.2 gem I had to create my own mixin based on bootstrap's mixins to make CSS classes act like bootstrap .span classes.
// private mixin: add styles for bootstrap's spanX classes
#mixin _makeFluidSpan($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
#include input-block-level();
float: left;
margin-left: $fluidGridGutterWidth;
*margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
#include grid-fluid-span($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
}
// thats what you should use
#mixin makeFluidSpan($gridColumns) {
#media (min-width: 980px) and (max-width: 1199px) {
#include _makeFluidSpan($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
}
#media (min-width: 1200px) {
#include _makeFluidSpan($gridColumns, $fluidGridColumnWidth1200, $fluidGridGutterWidth1200);
}
#media (min-width: 768px) and (max-width: 979px) {
#include _makeFluidSpan($gridColumns, $fluidGridColumnWidth768, $fluidGridGutterWidth768);
}
&:first-child {
margin-left: 0;
}
#media (max-width: 767px) {
float: none;
display: block;
width: 100%;
margin-left: 0;
box-sizing: border-box;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
}
example:
.like-span3 { // this class acts like .span3
#include makeFluidSpan(3);
}
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;
}
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.