I have created a fluid email template that works beautifully everywhere, expect in outlook. The basic structure wraps a outlook only table around my fluid table.
// table to keep everything at 580 for outlook
<!--[if (gte mso 9)|(IE)]>
<table width="580" align="center" cellpadding="20" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0;">
<tr>
<td>
<![endif]-->
// fluid table up to 960px
<table class="content" align="center" cellpadding="20" cellspacing="0" border="0" style="width:100%!important; max-width:960px;border-collapse: collapse; mso-table-lspace:0; mso-table-rspace:0;">
// image is 960px wide
<tr><td><img src="myimage.jpb"></td></tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
The problem I have is outlook does not resize the 960px image to 580px, it simply expands the table and so I get horizontal scrollbars. Is there any way to force the image to be resized to 580px, but only for outlook?
Outlook resizes your images based on its own algorithms and not actually based on your HTML or CSS declarations. As usual Outlook is the mouth-breathing cousin that means well, but just makes things so much harder for everyone else.
Your best bet is to resize the image itself to 580px. This should help minimize the damage Outlook does as it usually references the actual size of the image and not the declared sizes you put in HTML or CSS.
Sometimes setting a defined value to the width or height attribute will work, but you need to do so without quotes (e.g. width=300). Not sure exactly why this works, but sometimes it will constrain it to the right proportions.
Related
I'm trying to use something like <div style="font-family: Helvetica, myFont;"> where myFont is an added custom font. But when I convert it into pdf using doc.html(document.getElementById('to-pdf')), only the Helvetica font is used.
It manages to load properly if I use only the custom font <div style="font-family: myFont;">, so my question is if there is a way to use <div style="font-family: Helvetica, myFont;"> instead. This is because I'm mainly using the custom font to display the glyphs for other languages, and I want the English text to be displayed in Helvetica because it looks better.
I'm using angularchart to create charts in my web application.
I have this pretty standard markup which works fine with firefox and chrome:
<div ng-if="visible">
<canvas height="20%" width="80%" style="width: 80%; height: 20%;" id="line_general" class="chart chart-line" chart-data="lineData" chart-legend="true" chart-colours="colours"
chart-labels="lineLabels" chart-series="lineSeries"/>
</div>
It works on every screen size and if you reduce the screen it automatically resizes.
However, on internet explorer (my version is 10) it doesn't work: it not only does not resize but the resulting graph is also blurred.
How can I solve that?
edit:
interesting enough, it seems the culprit is that ng-if in the outside div! By removing it it seems working fine on ie as well.
Nevertheless, I need that ng-if so simply removing it doesn't solve my problem...
Solved. Apparently it is due to the fact that ng-if actually removes the canvas from the html so, when updating the graph with new data, it somewhat does not update the size.
I created a style with
visibility:hidden;
in it and used the ng-class construct to actually just hide the canvas without actually removing it.
<div ng-class="visible==true ? 'chart-container' : 'chart-hidden'>
<canvas .../>
</div>
So i am playing with the angular Bootstrap directives and am trying to implement the accordion control, with some info showing at the right part of each header.
<accordion-heading>
some text here, on the left side of the header.
<div class="pull-right">
<span>1st info</span>
<span>2nd info</span>
<span>maybe 3rd?</span>
</div>
</accordion-heading>
here's the simplified plunkr: http://plnkr.co/edit/3y0Rq1?p=preview
this shows well on medium to large screens but on smaller ones, the infos go under the header's line, and in some cases, scramble with the left text.
I'm sure there is a css trick to make this scenerio look right, by expanding the borders of the header in smaller screens, but cannot figure it out.
Help, please?
You can do it this way, add a table with two columns in the head. First column has the data = "some text here, on the left side of the header." and the second column has the data = "1st info 2nd info maybe 3rd?"
<table>
<tr>
<td>
some text here, on the left side of the header.
</td>
<td>
<div>
<span>1st info</span>
<span>2nd info</span>
<span>maybe 3rd?</span>
</div>
</td>
</tr>
</table>
I have made changes in the plunker. Now when you make the window size small, the accordion header size increase accordingly. use float: left/right or pull-left/right to make further changes.
Hope it helps
I'm using the Angular.js 'ng-grid' data grid and am trying to make its behavior responsive. When I resize the screen I'd prefer the grid columns to become stackable automatically as opposed to keeping the grid a fixed width.
I've found a few links mentioning a defunct ngGridLayoutPlugin that all lead to a dead end on GitHub. I've also seen other grids like angular-deckgrid but I'm not interested at this point in changing grids.
Is there anyway to make ng-grid responsive?
I found a solution to this that worked nicely. The native Bootstrap table has a class that can be applied named table-responsive (see: http://getbootstrap.com/css/#tables-responsive). The application to a standard Bootstrap table is to wrap it in this class. The responsive nature is one if the screen gets smaller the table itself will get scroll bars but not the entire page.
You can wrap a ng-grid with this same class and achieve the identical behavior:
<div class="table-responsive">
<div class="gridStyle" ng-grid="gridOptions">
</div>
</div>
If you test this with and without the <div> wrapper containing the table-responsive class you can see the difference between the scrollbars wither being just on the table/grid (responsive), or when not using it, the entire page scrolls (not responsive).
I would like to add a link to a title/Caption on the last image in of a Lightbox 2 gallery to point to the next physical page of this particular gallery.
I tried the code below but it didn't work and only displayed the link code above the image in the page.
<td width="177" valign="top"><img src="images/galleries/bath/thumbs/21t.jpg" alt="Remodel Bathroom" width="178" height="123" border="0" /></td>
If you go to http://revdesigndev.com/rc/gallery-bathroom-update.html and click on the last image in the gallery you will see the caption I would like to link from.
Any way to do this?
I can't claim credit for this one, but the answer is already on StackOverflow. You need to edit the if statement as Zenpoy suggests.
turning caption into a link doesn't work in Lightbox 2.51