I couldn't find anywhere (if it's possible) how to resize the whole like button (not it's iframe or the container, but the button itself with the writing and everything).
Google+ offers several versions of it's +1 button, the smallest being 15px.
For design purposes I need to change (scale) the size of the FB like button to match the layout of the site (in this particular case... scale down to 15px).
(according to FB terms and conditions scaling is permitted.)
Although you say not the iframe, if you do scale the iframe with CSS3 it will increase the size of the button. It would probably be best to give the iframe a ID or class but something like this would work if it was the only iframe on the page:
iframe
{
transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}
Here is an example http://www.tinydesign.co.uk/like/
Related
I've a md-list with a few md-list-item like this codepen.
Two icon in the md-list have this CSS.
.icon-transform{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
When I try to click over the icon, if it have transform porperty, icon becomes not clickable.
I need the behavior to be like the last md-list-item.
Thnaks.
add pointer events to the icon transform prevents all click events from happening on the element.
.icon-transform{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
pointer-events: none;
}
I can't seem to find a way to style the page buttons on a dashboard table. I want to make the page buttons at the bottom of the table bigger if that is possible?
you can try increasing the font-size
add the following CSS...
.google-visualization-table-page-number {
font-size: 16px !important;
}
If I have a list of "simple" cards that is rendered using ng-repeat,
what would be the recommended way to do a transition to a detailed view of one of those cards?
Does such a transition imply that the same HTML / DOM element needs to stay on screen and its content needs to change?
Does such a transition imply that the collection upon which ng-repeat is based needs to change so that it only includes that single item that we are transitioning to or does the rendering of the rest of the items should use some version of ng-if="item.id=focused_item_id"?
It doesn't need to be the same DOM element, and arguably shouldn't be. Animating width or height will cause repaints/reflows and will greatly hinder performance.
You could use ng-animate (https://docs.angularjs.org/api/ngAnimate) with a single detail element that gets populated with the relevant details from whatever object was clicked.
Something like this:
HTML
<div class="item" ng-repeat="el in elems track by $index" ng-click="getDetails(el)">
<div>Summary</div>
</div>
<div class="details" ng-if="showDetails">
<div>Details for {{currentItem}}</div>
</div>
CSS
.details {
position: fixed;
width: 100%;
transition: all 1s ease-out;
}
.details.ng-enter,
.details.ng-leave-active {
opacity: 0;
transform: scale(0.8);
}
.details.ng-enter-active,
.details.ng-leave {
opacity: 1;
transform: scale(1);
}
So getDetails() would do something like set $scope.showDetails = true; and set $scope.currentItem = el; Then you could have a close button that resets those two scope variables and destroys the detail element.
Hope that helps!
I have done what you are describing using CSS transitions on the DOM element in question. I have a list of elements, and when you click on one, the backing object has an 'expand' property set to true, which makes extra content visible and adjusts the size.
HTML
<div ng-repeat="el in elems" ng-class="{expand: el.expand}" class="element">
<div ng-click="el.expand = !el.expand">Summary</div>
<div ng-if="el.expand">Details</div>
</div>
CSS
div.element {
transition: 0.5s linear all;
height: 200px;
}
div.element.expand {
height: 500px;
}
Try clicking on 'Summary 1' or 'Summary 2' in the plunkr
https://plnkr.co/cDkuNjTbE83L5bDJccsJ
I have a fixed menu, I always want it at the top of my page:
.fixed-menu{
position: fixed;
height: 75px;
width: 100%;
background: tomato;
}
I also want an off canvas menu.
The problem I am having is that when you open the off canvas menu, the fixed menu is no longer fixed.
After playing with the issue, it's something to do with 3d transform, but I cannot find a fix.
Here is a JSFiddle
If you do it this way, the page is essentially locked when the menu is open http://codepen.io/rafibomb/pen/hApKk
Basically wrapping the content and making it overflowY: scroll;
article {
overflow-y: auto;
}
i need to get this little gray rectangle (red circle) to be displayed both on top n bottom of a div that coitains thumbnails (btw this div might aswell cointain 2 or 3 rows of thumbnails)
Picture:
here is my code for how it looks atm:
.jq_thumbnails {
background: url("/site_media/static/coffee_small_top.png") top left no-repeat;
overflow: auto;
height: 100%;
}
Is it possible to achieve this effect easily? I thought of making ifequal tag that would check the length of thumbnails list and use a certain background picture accordingly, but maybe it is possible to achieve this using html/css only?
You can leverage CSS3 Multiple Background Images:
.jq_thumbnails {
background-image: url(../images/bg-top.png), url(../images/bg-bottom.png);
background-position: 0 0, 0 bottom;
}
Set the background-repeat property to suit your particular scenario:
background-repeat: repeat-x, repeat-x;
This is supported in all current versions of the major browsers:
Of course you can make an outer div and an inner one that covers the background, so you can repeat-y the background ;)