I'm working on Sencha touch application.
I have created list view using Ext.list component of sencha touch.
I have set background images for all list item using CSS
.x-list .x-list-item {
position: absolute !important;
left: 0;
top: 0;
width: 100%;
height:20px;
background: url('../images/list_1.png');
background-repeat: no-repeat;
background-size: 97% 98%;
}
Now I want to set different images for different list items. Is this possible?
If you are using tpl to generate your list items, simply give your list items a class name, something like:
tpl: '<div class="{bgimage}">This is list item 1.</div>'
then change the bgimage property of the data that you set to the list, something like this should do:
prepareData: function(data, index, record) {
data.bgimage = "bg-" + index;
}
Then in your CSS/SASS, you can do
.x-list-item.bg-1 {
background-image: url('../images/list_1.png')
}
.x-list-item.bg-2 {
background-image: url('../images/list_2.png')
}
…
You could customise this to your needs, but this should get you started.
If you're using list item components (i.e. your list does not have a tpl config but an itemCmp config), just set the cls config on each item to get the same result.
If targeting them using nth-child is not working you might have to go the more cumbersome route and attach a separate class to each list item in the html and then manipulate their background images in the CSS by changing the background property of each individually
Related
I want to make this DateTime picker take up the entire screen and also change the style of some parts such as the size of each time slot and day.
I've got this from https://reactdatepicker.com/#example-default and the github repo for it is https://github.com/Hacker0x01/react-datepicker
Any help would be much appreciated!
You can check in the examples the Custom calendar class name.
It defines a custom class name with the DatePicker property calendarClassName="rasta-stripes". The class-name rasta-stripes is defined as follow:
.rasta-stripes {
.react-datepicker__week:nth-child(3n + 1) {
background-color: #215005;
}
.react-datepicker__week:nth-child(3n + 2) {
background-color: #eea429;
}
.react-datepicker__week:nth-child(3n + 3) {
background-color: #a82a15;
}
}
So, as you can see, to style some parts just make a reference to the classes React DatePicker uses for itself to override it. You can check which classes exist by inspecting the sources with the browser of your preference.
To make it full screen for example just override the react-datepicker-popper class-name by removing transform and adding left: 0; right: 0; top: 0; bottom: 0; and then change every fixed size child to your needs.
I am currently using the PrimeNG library's accordion component in my angular project. See info here.
The template includes some special css styling for printing the page--something like the following:
#media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
What I am trying to do, is automatically expand all accordionTab elements when the #media print rendering is processed for the page to be printed.
From the documentation I see that each accordionTab element has a [selected] property which can be bound to and set to "true" in order to expand the tab.
Selected Visibility of the content is specified with the selected
property that supports one or two-way binding.
However, can this be somehow automatically triggered when the #media print rendering occurs?
Thanks!
media query is the way to go, you can take a css only approach to achieve this; no change in TS or HTML files
relevant css:
#media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
complete demo on stackblitz here
This is an interesting one. To keep it inside the realm of Angular, you could use the #angular/cdk/layout library and inject MediaMatcher. You could also, of course, do almost this exact same thing using JavaScript (see here... the cdk/layout method I'll show you really just wraps this).
The MediaMatcher service has a method called matchMedia, and from there you just add a listener:
import { MediaMatcher } from '#angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.log('printing!') : null);
}
So where I've put the console.log, just perform your logic to get the accordians to expand.
I have several containers with multiple background images specified for each of them and separated by comma, where one of the background images is the same for every container.
.foo_1 {
background-image: url(../img/01.png), url(../img/photo1.jpg);
}
.foo_2 {
background-image: url(../img/01.png), url(../img/photo2.jpg);
}
.foo_3 {
background-image: url(../img/01.png), url(../img/photo3.jpg);
}
.foo_1, .foo_2, .foo_3 {
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
}
Is there any way to avoid repeating the image which is used in each class, while still keeping the structure of a background image and allowing for the same manipulation as of a normal background-image property ?
Unfortunately, due to how the cascade works, it is not possible to specify multiple background layers in different rulesets without redeclaring the same background layer in each ruleset. See my answer to this related question for details:
A comma-separated list of background layers counts as a single value for the purposes of the cascade, which is why your second background declaration completely overrides the first.
While background is a shorthand for several other properties, it is not a shorthand for individual background layers, as they do not have their own properties. Since individual layer properties don't exist, you cannot use the cascade to override only certain layers while keeping the rest.
you can user repeat-x or repeat property.
but first of all you have need using Photoshop make there different images for each container :
1. first_img.jpg ( img1.jpg + imga.jpg)
1. second_img.jpg ( img1.jpg + imgb.jpg)
3. third_img.jpg ( img1.jpg + imgc.jpg)
.foo_1 {
background: url(../first_img.jpg) repeat-x or repeat ;
}
.foo_2 {
background: url(../second_img.jpg) repeat-x or repeat ;
}
.foo3 {
background: url(../third_img.jpg) repeat-x or repeat ;
}
Thanks.
I have 31 icons of a calendar one for each day of the month and my css looks not as good as I would like. Right now I've:
.icon-agenda.day-1, .icon-agenda.day-1:before{
background: url(../images/tiles/agenda/1.png) no-repeat;
}
.icon-agenda.day-2, .icon-agenda.day-2:before{
background: url(../images/tiles/agenda/2.png) no-repeat;
}
.icon-agenda.day-3, .icon-agenda.day-3:before{
background: url(../images/tiles/agenda/3.png) no-repeat;
}
.icon-agenda.day-4, .icon-agenda.day-4:before{
background: url(../images/tiles/agenda/4.png) no-repeat;
}
...
.icon-agenda.day-31, .icon-agenda.day-31:before{
background: url(../images/tiles/agenda/31.png) no-repeat;
}
I would like to replace the above code with something more simple like
.icon-agenda.day-xxx, .icon-agenda.day-xxx:before{
background: url(../images/tiles/agenda/xxx.png) no-repeat;
}
Can I do something like this in CSS?
There's no way (yet) to do this in native CSS. You could use a preprocessor like LESS, but that would generate the same output, only with the added hassle of compiling it, so your current method is the most optimal one as far as this layout goes.
One possible optimization could be to create an entire sprite from all of the images, set it as a background-image for all items with 1 selector like [class*=".icon-agenda.day-"], [class*=".icon-agenda.day-"]:before, and alter the background-position of the separate elements. This would save you requests meaning a faster page load.
As per your comment about using JavaScript, here's a solution that will add an extra <style> tag to the <head> of the page with your CSS:
var styl = document.createElement('style');
for (var i=1; i<=31; i++)
styl.innerHTML += '.icon-agenda.day-'+i+',.icon-agenda.day-'+i+':before{background:url(../images/tiles/agenda/'+i+'.png) no-repeat}';
document.head.appendChild(styl);
At some point in the future, you will be able to do
background-image: attr(data-png url);
which would take the URL from the data-png attribute of each element.
Right now it only works with the content CSS property.
See https://developer.mozilla.org/en-US/docs/Web/CSS/attr.
I have recently started using css-only image preloading of background-images for a project.
//preload images
body:after{
display: none;
content: url(img01.png) url(img02.png);
}
//use images
li.one { background-image: (img01.png) }
li.two { background-image: (img02.png) }
I make my CSS files from SCSS, and was wondering if there would be some way I could use SASS to run through the file and create the body:after preload from the background-image URLs throughout the file?
If not, what would be your best solution, making a script to use Regex to do this step after the CSS file is compiled?
#yorbro solution works for this specific case but I think its better to use only a function to do this two things at once, add the image path to $preload-images list and returns the value. Here is the preload-img() function:
// This declare a list variable to store all images to preload
$preloaded-images: ();
// This function will append the image or images to $preload-images and returns img path values
#function preload-img($img-path) {
$output: ();
#each $img in $img-path {
$preloaded-images: append($preloaded-images, url($img));
$output: append($output, url($img), comma);
}
#return $output;
}
With this function you can use background or background-image property and you can pass more than one image path to create multiple backgrounds. As #yorbro says you should add body:after at the end of your entire CSS:
// Use images, you can use background or background-image
// Note that you can pass a list of paths to preload-image function
li.one { background: preload-img("img01.png" "img02.png"); }
li.two { background-image: preload-img("img02.png"); }
//preload images
body:after{
display: none;
content: $preloaded-images;
}
You can use SASS mixins, functions and lists for that. First, you create a mixin background-image that will add a background-image property and will append the image to a SASS list preload-images.
/* '$img-path' is in your case 'img01.png' or 'img02.png' */
#mixin background-image($img-path) {
background-image: url($img-path);
$tmp: preload-image($img-path);
}
Then you define the function preload-image along with a list $preloaded-images. The function appends url($img-path) to the $preloaded-images list.
/* Preloaded images */
$preloaded-images: null;
#function preload-image($image-path) {
$preloaded-images: $preloaded-images url($image-url);
#return $preloaded-images;
}
Every time you want to use a background image, you use the background-image mixin. Then, at the end of your entire CSS file, you add the body:after expression. This is important because you need to have added all the preloaded images to the list before outputting the body:after expression. So
//use images
li.one { #include background-image("img01.png"); }
li.two { #include background-image("img02.png"); }
//preload images
body:after{
display: none;
content: $preloaded-images;
}
Conclusion: SASS as a language is limited in some ways but still powerful enough to realise these kind of nice things!