I have a series of "cards" displayed inside of a container using ngRepeat as follows
<div class="flip-container">
<div style="display:inline-block" ng-repeat="c in vm.car">
<my-car-card car='c'></my-car-card>
</div>
where <my-car-card> is a custom directive. Adding to a previous example I had, I wanted to try and flip these cards on certain events (here just using a button click. I have been following an example from another post, which points to this fiddle, but I just cannot get it working in my case. I have tried to use this method as at this plunk.
I have copied the css into style.css and renamed the class flip1 to flip-container, and stripped out some of the size and color, so they do't override any of my existing styles I will have for the 'card'.
The "parent container" in main.html is in the snippets shown above, and the rest is in the car.html..
<div class="card car-card" ng-class="{'flipped':isFlipped}"
style="padding: 5px;margin:5px;background-color:wheat">
<div class="face front">
<div class="cartitle">
<div class="cartext" >{{car.title}}</div>
</div>
<div class="carul" ng-repeat="p in properties" animate-on-change="p.text">{{p.text}}</div>
</div>
<div class="face back">
Back of card
</div>
and I am setting the 'flipped' at the line _scope.flipped = !_scope.flipped; in car.js as below.
function onChange(msg, data) {
if (_scope.car.title === "CAR 001"){
_scope.properties[0].text = data + (i++);
_scope.flipped = !_scope.flipped;
}
}
the onChange is called on the button click, I am setting one other property in there just so I can see it is being called)
As can be seen, at the plunk, it is not working for me at all, and the display is totally messed up (removing the line position: absolute; .flip-container .card .face { allow the display to be fixed).
Hoping someone who knows and understands this css trick better than myself can point t what I am doing wrong in attempting to transfer this over into my scenario, I Just cannot see what is wrong and how to move forward.
Thanks in advance for any help here!
Change a few things:
add height and width to style: ".flip-container .card"
add this to HTML 'card' tag: ng-click="isFlipped=!isFlipped"
Change this css:
.flip-container .card .back {
-webkit-transform: rotatex(-180deg);
}
Here's your modified plunk:
http://plnkr.co/edit/xaznyVXJvfa7UDcSlB2e?p=preview
Oh, and you need to set "isFlipped" - NOT "flipped" in your function. like this:
scope.isFlipped = !scope.isFlipped;
I updated that in the plunk as well
Related
I'm trying to replicate the default settings of ag-grid which paints every other rows background in a slightly different color. But when I try to reorder columns clicking on headerColumn the background colors doesn't reorder.
This is my current approach that isn´t working
cellStyle(params) {
let backgroundColor = #FFFFFF;
if (params.node.rowIndex % 2 === 1) backgroundColor = #E04F00;
}
https://plnkr.co/edit/bHLEmECLNby3obIT, this example shows the desired behavior.
Is there a way to acces and change those default colors?
I found out that the default themes of ag-grid already did what I wanted, the thing is that the theme I'm using has two colors that are very similar, what I really needed was to change that default color.
I was able to achieve that by overriding theme's variable
.ag-theme-balham {
--ag-odd-row-background-color: #E04F00;
}
.ag-theme-balham .ag-row-odd {
background-color: var(--ag-odd-row-background-color);
}
I followed their documentation, first here https://www.ag-grid.com/javascript-grid-styling/, that took me to https://github.com/ag-grid/ag-grid-customise-theme, where I discovered which variable I should edit.
Checking the working example you are showing here, each .ag-row div has an additional class .ag-row-odd or .ag-row-even. So basically those classes mimic the behavior you could achieve by using .ag-row:nth-child(odd) and .ag-row:nth-child(even).
What might be happening in this case is that when you reorder the .ag-row elements the classes are not being updated, instead just moved around. What that would represent is something like this:
<!-- Default //-->
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
<!-- Sorted //-->
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-odd"></div>
<div class="ag-row ag-row-even"></div>
<div class="ag-row ag-row-odd"></div>
So in this case what I would recommend is either to change the styles to:
.ag-row:nth-child(odd) {
background-color: #fcfcfc;
}
.ag-row:nth-child(even) {
background-color: #ffffff;
}
If that's not an option than you should review the script that reorders the .ag-row elements as it's probably not changing the classes accordingly.
UPDATE
I think I found your issue. I checked this example
And while inspecting elements I saw that when you reorder, each row has these two attributes.
<div row-index="3" aria-rowindex="7"></div>
From what I was able to determine even if you change your sort parameters, those two attributes don't actually change. So if you base your row styles on them, like you do with the row-index parameter, you'll never get a correct order, because sometimes you get:
<div row-index="3" aria-rowindex="7"></div>
<div row-index="5" aria-rowindex="9"></div>
<div row-index="7" aria-rowindex="11"></div>
As this is not incorrect, the styles are applied, but not in the order you would prefer. The script is doing its job as intended, it's just that your condition for the colors is not working.
The solution to this I think would be 100% css and for you to remove the cellStyle definition, because I think the problem lies there.
CSS is going to be the easiest solution to this. I don't see your html, but essentially you will want to reference the html table's rows, and then add a css nth-child(even) and nth-child(odd) to them. Here is an example:
p:nth-child(odd)
{
background: #ccc;
}
p:nth-child(even)
{
background: #fff;
}
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
And here are some more examples from w3:
Depending on what your specific code looks like, there may be different ways of doing this. I noticed you have js in your question, but since there was the css tag, I gave a css answer.
I am having a problem and can't seem to find the solution.
I have a header tag nested inside a few divs - here's how it looks:
<div class="card">
<div class="layout-left">
<div class="card-header">
<h5> I am supposed to be a straight vertical line </h5>
</div
</div>
... (other divs)
</div>
And essentially my problem is that i'm trying to make my h5 tag be vertical, so i did a
transform: rotate(-90deg);
however it seems to stay at the width that the parent div is at so my letters instead of spacing out they bunch up. I did leave out some content within the divs to cut down on the code, so that's why some divs are flex box's and whatnot.
Here is a jfiddle so you can see what I mean.. If the solution must be in Javascript or JQuery library i'm totally fine with it, but if there's a css solution I prefer it.
Thank you for your help :)
Remove width:100% and add white-space:nowrap.
https://jsfiddle.net/c2xm1jog/
.card-header h5 {
color: white;
transform: rotate(-90deg);
white-space: nowrap;
}
I have a Windows Phone app using HTML5 and Javascript.
I am using WinJS.Utilities.empty(); to clear the DIV element and then WinJS.UI.Pages.render(); to load pages in to the same DIV:
On one of the pages that is loaded in, I am trying to use a Pivot Control, I am using it declaritively like this:
<div id="MyAccountPivot" data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'MyAccount'}">
<div data-win-control="WinJS.UI.PivotItem"
data-win-options="{ header: 'current' }">
<div id="current">
Lorum Ipsum...
</div>
</div>
</div>
When the page is loaded in, the Pivot control loads and renders, and the PivotItem headers render correctly. But when the content has been rendered, it is not visible. I have used the DOM explorer in Visual Studio to interrogate the markup and styling to find the issue. It appears that the container DIV elements for the PivotItem contents are out of place and are hidden behind the DIV that contains the PivotItem headers...
When I have tried using this markup in the parent page (rendered without using the WinJS.UI.Pages.render();) it works exactly as expected.
I have also tried creating the Pivot and its Items programmatically, but this produces the same results.
Any help would be greatly appreciated.
Getting me same issue while showing content without template, make some changes in css and it's works for me.
HTML
<div class="myPivot">
<div data-win-control="WinJS.UI.Pivot">
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'one' }">
-- item content---
</div>
</div>
</div>
CSS
.myPivot {
}
.myPivot div.win-pivot-item {
left:0px !important;
visibility: visible;
width:100%;
}
.myPivot .win-pivot .win-pivot-surface {
width: 100%;
position: fixed;
}
I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.
django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.
A tooltip library is copying the dom node to insert the html inside a tooltip.
I need to target the element inside the tooltip, but the javascript is always applied to the original element.
<a class="tooltip">Open</a>
<div class="tooltip-html" style="display:none;">
<div id="main-content" class="scroll">
<div class="Content">
<div class="blue">
</div>
</div>
</div>
I have tried using the enter callback of the tooltip, this was not working. And applying things before the html is copied by the tooltip only cosmetically works, the javascript is still looking at the original. I even tried changing the class before I apply anymore javascript. Figuring if I changed the class the original element would no longer be accessible. The class changed, but the javascript was not applied to what was inside the tooltip.
Is there a good way remove a div once it has been copied, or a better method of finding/targeting the correct element.
$(this).find("div.scroll").test();
EDIT:
...Before...
<div id="main-content" class="scroll">
<div class="Content">
...After...
<div id="tiptip_holder" style="max-width: 230px; margin: 23px 0pt 0pt 999px; display: none;" class="tip_left_bottom">
<div id="tiptip_arrow" style="margin-left: 220px; margin-top: -12px;">
<div id="tiptip_content">
<div id="main-content" class="scroll">
<div class="Content">
....
The this was a part of the enter callback for the tooltip library:
var tip_html = $('.tooltip-html').html();
$('.tooltip').tipTip({ content: tip_html, enter: function(){
$(this).find("div.scroll").test();
}
Also tried using,
$("#main-content.scroll", "#tiptip_content").test();
UPDATE:
As people mentioned naming the parent div like I was should of worked, here's an example of how i'm not able to target inside the tooltip.
jsfiddle.net/mstefanko/pUm5V/24
//$("#main-content", "#tooltip-content").css("background", "red");
$("#main-content", "#tiptip_content").css("background", "blue");
Blue doesn't work, red does. I feel like both lines should work.
Found the main cause of my issue. The following lines in the plugin:
function active_tiptip(){
opts.enter.call(this);
tiptip_content.html(org_title);
the enter call was being called before any of the tooltip content was in the DOM, as much as the wrappers for the tooltip existed, calling main-content when it wasn't in the tooltip yet will obviously fail to work. Not sure i've completely solved my issue, but reversing these lines fixes the question at hand.