I use the mwl calendar and I will mark the hour from 12 - 13 in another color inday view.
Is there a simple possibility to do this?
[EDIT]
Now I have tried this one
<style type="text/css">
.cal-day-hour-part:nth-of-type(2n) {
background-color: #f00 !important;
}
</style>
with this plunker example:
Plunker example
and this works fine, than I have tried it with .cal-day-hour-part:nth-of-type(3n) and this does not work. Does anyone know why?
The DOM is structured like this:
<div class="cal-day-hour">
<div class="cal-day-hour-part">
<div class="cal-day-hour-part">
</div>
<div class="cal-day-hour">
<div class="cal-day-hour-part">
<div class="cal-day-hour-part">
</div>
...
The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent. There are at most 2 .cal-day-hour-part children of .cal-day-hour in your DOM. That's why 2n works but 3n does not.
Regarding your original question (and thanks for the edits to clarify), you'll want to use :nth-of-type(n) on .cal-day-hour instead, and stop using the counter n as you don't need it.
.cal-day-hour:nth-of-type(7) {
background-color: #f00 !important;
}
Here's an updated plunkr
Related
I am trying to create a responsive image wrap gallery. Each image will have a header. I distribute them using column-count of webkit.
The problem is this: I've specified a container to be "relative". Inside that container, I have an "absolute" header followed by an image. What seems to be happening in some values of column-count is that the header is going to another column and the image in the next. I need them both to be together at all times and I'm surprised why the absolute within relative container is not doing that.
A codepen for reference: http://codepen.io/pliablepixels/full/YwWLzy/
The core image gallery code is:(SO insists I include a code fragment when posting a codepen link, so here goes)
<div style="-webkit-column-count:{{ cols }};-webkit-column-gap:0px;line-height:0px;">
<span ng-repeat="image in images">
<div style="position:relative">
<div class="my_header">Header</div>
<img class="scaled_image" src={{ image.src }} />
</div>
</span>
</div>
Please change the column values and note the header behavior.
How does one solve this? (Note I must use an img tag - can't use background-image)
thanks
Columns
To protect elements from breaking and keep them entirely in a column you can add these properties:
.element {
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
}
Your fixed example http://codepen.io/anon/pen/rxMWxa
Header
Such behaviour occurs because you've added line-height:0px to your container div. So you can just return header's line-height value to normal. Fixed that in codepen.
Using line-height sometimes can make headache. Try to use padding like below:
.my_header {
background-color: red;
padding: 2px 4px;
line-height: normal;
}
Here's the situation:
I'm building a page for an application which consists of a navbar, a footer and a 3 column body.
Initially, only one column should be shown. This first column will be filled with clickable divs (let's call them cards). When one of these cards is clicked, the second column should slide open from the side, revealing more information about the clicked card.
The same workflow applies to the second column: the details displayed in the second column contains its own cards, which - when clicked - open up the third column with more details about the card in the second column.
The second and third column can also be closed, while the first can not.
I'm loading the column information using Angular, and so far I've had no real struggle implementing the 1-3 column layout.
But when I try to make this work smooth - e.g. using animations - things get weird. I don't really know how I can animate the (dis)appearance of one of each columns.
Here's what I have so far: Codepen example
<div class="container" ng-controller="Controller as ctrl">
<div class="column" ng-repeat="column in ctrl.columns" ng-class="[column.mode, column.color]" ng-show="column.open">
<button ng-click="ctrl.close(this)" ng-show="column.id != 0">Close</button>
<p ng-click="ctrl.open(this)">Name: {{column.name}}</p>
<p>Open: {{column.open}}</p>
<p>Mode: {{column.mode}}</p>
<p>Color: {{column.color}}</p>
</div>
</div>
CSS:
.container {
height: calc(100% - 50px);
display: flex;
}
.column {
padding: 10px 0 0 10px;
overflow-y: auto;
}
.column-narrow {
flex: 33;
}
.column-wide {
flex: 66;
}
.column-full {
flex: 100;
}
The second and third column can be triggered by clicking the name paragraph.
Don't worry about the colors, they're definitely not final and are used only for a clear visual difference between containers etc.
Can any one of you offer me a CSS(3) solution to this? If my code can be optimised please do, as I'm currently learning Angular.
There is not a lot of code needed to get some basic animations working.
The ng-show and ng-hide directives already provide support for animations out of the box. That means that AngularJS will add animation hooks in the form of additional classes ng-hide-add, ng-hide-add-active, ng-hide-remove, ng-hide-remove-active.
So these classes get added to your CSS column.
I literally only had to add these CSS lines to make animations work in your Codepen.
.column.ng-hide-add.ng-hide-add-active,
.column.ng-hide-remove.ng-hide-remove-active {
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
Here is the updated codepen:
http://codepen.io/anon/pen/XbVLxO
Seems to be an impossible task to find a range slider that works well with ng-repeat and can be displayed vertically. Anyone have ideas about what to try next?
I'm trying to make a took where you can manually control the brightness of a sign at each hour of the day. The current idea is to stack 24 vertical range sliders next to each other where each one controls the brightness for that hour and a 25th slider that is a master control that adjusts all 24 other sliders simultaneously.
The closest I came was with angular-rangeslider but it turned out to be incredibly buggy when used with ng-repeat. I suppose I could manually write out all 25 of them but I'd rather not.
The other idea is to use jqPlot because you can drag the datapoints. (It seems to be the only chart library where you can drag the datapoints too (please correct me if I'm wrong))
How about an HTML5 range input?
HTML:
<input type="range"
orient="vertical"
ng-repeat="slider in sliders"
ng-model="slider.val" />
CSS (necessary to make it vertical in some browsers):
input[type=range][orient=vertical] {
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* Webkit */
width: 20px;
height: 200px;
}
Works fine with Angular bindings. Here's a Plunker.
Supported browsers look to be IE10+ and most others.
I made an exemple in plunker of how i would use this
I create an array of empty object.
$scope.sliders = [];
for(var i=0; i<5; i++){
$scope.sliders.push({});
}
I display it using a ng-repeat using HTML range inputs
<span ng-repeat="slider in sliders track by $index">
<input ng-init="slider.value = 0" type="range" ng-model="slider.value">
{{slider.value}}
</span>
Maybe not elegant but i just use the rotation from CSS to make it vertical.
Note that you'll have to define a better css selector than "input"
input {
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
width:70px;
height:100px;
}
Hope it helped
I've been researching several different ways to force a facebook comment box plug-in to be fluid/responsive/liquid/whatever-we-call-it (just showing the stupidity of names), and all of them work fine. But also, all of them make the plug-in disappear when accessing from Google Chrome.
I'm using this:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}
Which has the same results (apparently) as:
#fbcomments, .fb-comments, .fb-comments iframe[style], .fb-comments span{
width: 100% !important;
}
Question: How can I fix this strange behavior? (Why does it happen?)
Thanks for your time. Wether you do help me or not, have a nice to-day! :)
this worked for me: Add to the fb-comments div data-width="100%"
<div class="fb-comments" data-href="http://example.com/comments" data-width="100%" data-numposts="5" data-colorscheme="light"></div>
and it will be responsive when you resize the browser.
you can put the fb-comments div inside another div and give that div the width you want.
This is facebook comment part-
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-colorscheme="light"></div>
Just add this CSS bellow the div-
<style>.fb_iframe_widget span[style]{width:100% !important;}</style>
Just Insert data-width="100%" in the div
<div class="fb-comments" data-width="100%"></div>
You could use data-mobile atribute
<div class="fb-comments" data-href="http://example.com/comments" data-numposts="5" data-mobile="true"></div>
So, this is an odd one...
I've got basic pagination code:
<div class="pagination">
< 1 <a class="current">2</a> 3 >
</div>
And I want it all centred, so I'm using inline-block on the anchor tags. Simple enough, stripped down CSS code:
.pagination{text-align:center; margin-bottom:20px;}
.pagination > a{display:inline-block; vertical-align:middle; margin:0 2px 0 1px;}
.ie7 .pagination > a{zoom:1;}
.pagination .next,
.pagination .prev{width:26px; height:38px; text-indent:-9999px; overflow:hidden;
background:url(../images/page-arrows.png) no-repeat;}
.pagination a{width:37px; height:31px; line-height:32px; font-size:15px; font-weight:bold; color:#7e7e7e;
background:url(../images/page-numbers.png) left top no-repeat;}
Problem is that, NOTHING is displaying in IE7 (at least IE7-mode of IE9). I'm well aware of the display-inline bugs that IE7 has, but those only apply to elements that aren't inline by default. I've added in a zoom:1 anyway though for good measure.
If I put a background colour on the .pagination wrapper, that wrapper does indeed show up with the background colour, but the elements inside just aren't showing!
I've tried the usual IE 'fixes' ...position:relative, zoom:1, height:1% on any and every element, but not luck.
What am I missing?!
After some experimenting in JSFiddle I've managed to discover that the problem relates to this particular rule
.pagination .prev {text-indent:-9999px; }
Disabling this fixes the issue but is not ideal as you would then have the text charecter appear on top of your background images.
Interestingly enough your .next does not cause the same issue. with that in mind added an to either side of your paging control (so your center alignment dosnt get skewed) and it seems to of fixed the problem.
<div class="pagination">
< 1 <a class="current">2</a> 3 >
</div>
JSFiddle available here (background images replaced with solid colors for obvious reasons)