I'm using mjml to create HTML emails, and it looks like the default container width is set to 600px. I need this to be wider, is it possible to either override the 600px default, or setup a wrapper or container div where I can adjust the width?
According to their documentation, you can add the width attribute:
width="400"
I ran a test in their editor and it seemed to work - https://mjml.io/try-it-live
<mjml>
<mj-body width="400">
<mj-section>
<mj-column>
<mj-text>This is a header</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#e7e7e7">
<mj-column>
<mj-social>
<mj-social-element name="facebook" />
</mj-social>
</mj-column>
</mj-section>
</mj-body>
</mjml>
Related
I'm trying to figure out how to get this text (!) to show up. Even though it's smaller than the circle it's in, it still gets cut off about 1/3 of the way in to the circle.
I would like to use this for Outlook specifically.
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:20px;v-text-anchor:middle;width:20px;" arcsize="50%" stroke="f" fillcolor="#ffcb05">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">!</center>
</v:roundrect>
Anyone have any ideas? I've tried overflow:visible on the circle to no avail.
More information
Using a macro to get test html into Outlook.
It is most definitely some sort of margin or padding on the v:roundrect element. After importing the HTML, I can right click, go to Format Shape, then Layout & Properties, which gives me the 4 "margin" options. Setting them to zero gives me the desired effect. The issue is that I cannot then grab this HTML, and I have no idea what property this is correlating to.
Latest code:
<v:roundrect style="height:30px;width:30px;margin:0 !important;padding:0 !important; mso-margin-bottom-alt:0 !important;mso-margin-top-alt:0 !important;mso-margin-right-alt:0 !important;mso-margin-left-alt:0 !important;mso-padding-bottom-alt:0 !important;mso-padding-top-alt:0 !important;mso-padding-right-alt:0 !important;mso-padding-left-alt:0 !important;" arcsize="50%" strokeweight="2px" strokecolor="#FFFFFF" fillcolor="#ffcb05" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;margin:0 !important;padding:0 !important;mso-margin-bottom-alt:0 !important;mso-margin-top-alt:0 !important;mso-margin-right-alt:0 !important;mso-margin-left-alt:0 !important;mso-padding-bottom-alt:0 !important;mso-padding-top-alt:0 !important;mso-padding-right-alt:0 !important;mso-padding-left-alt:0 !important;">!</center>
</v:roundrect>
I've attempted using different elements (span, p, etc..) instead of center.
Textbox with zeroed inset is the key. I had tried it before, but without nested html. Text directly input in the v:textbox element does not appear to work, so I used a center element to encapsulate text and set styles.
<v:roundrect style="height:20px;width:20px;" arcsize="50%" strokeweight="2px" strokecolor="#FFFFFF" fillcolor="#ffcb05" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word">
<v:textbox inset="0,0,0,0">
<center style="font:300 14px/15px Impact, Sans-serif;color:#FFFFFF;mso-line-height-rule:exactly;">!</center>
</v:textbox>
</v:roundrect>
It might help to solve your problem: https://buttons.cm/
You might try adding line-height: 16px; mso-line-height-rule: exactly; to the center style attributes. Outlook, particularly later versions, tends to tack on a lot of extra spacing above and below text, and won't follow your line height unless you force it.
I am new to ZK frame work. I wanted to have a layout where one Window should fit the
enitre width of div component. I tried to add width=100% but it does not work.
how do I do that? Please see the code below
<zk>
<div style="background:yellow;">
<hlayout sclass="z-valign-top" style="background:red;">
<window width="100%" title="win" border="normal"/>
</hlayout>
<separator/>
</div>
</zk>
Using relative sizes (percent) are by my experience often counter-productive. Use hflex/vflex instead.
<zk>
<div style="background:yellow;">
<hlayout sclass="z-valign-top" style="background:red;">
<window hflex="1" title="win" border="normal"/>
</hlayout>
<separator/>
</div>
</zk>
I'm trying to use the GWT grid component in uibinder. It works fine until I want to set the width of the columns. The following is what I've tried to do but it doesn't seem to work.
<g:Grid width="100%">
<g:row>
<g:customCell width="20%">
<g:FlowPanel width="">
</g:FlowPanel>
</g:customCell>
<g:customCell width="80%">
<g:FlowPanel width="">
</g:FlowPanel>
</g:customCell>
</g:row>
</g:Grid>
You can write some java code in order to do that, example:
grid.getColumnFormatter().setWidth(0, "10%");
grid.getColumnFormatter().setWidth(1, "10%");
Only styleName is taken into account on g:row, g:cell and g:customCell elements.
If you can (i.e. if your grid content is mostly static), avoid using Grid and prefer an HTMLPanel containing an HTML <table>, this gives you much more flexibility.
http://code.google.com/p/google-web-toolkit/source/browse/tags/2.4.0/user/src/com/google/gwt/uibinder/elementparsers/GridParser.java
I need a Scroll bar for GWT CellTable. The following is my ui.xml,
<gwt:SplitLayoutPanel>
<gwt:west size="200">
<gwt:VerticalPanel>
<gwt:HTMLPanel>
<table>
<tr>
<td>
<gwt:Label>xxxx</gwt:Label>
</td>
</tr>
<tr>
<td>
**Here i need a CellTable with Vertical Scrollbar**
</td>
</tr>
</table>
</gwt:HTMLPanel>
</gwt:VerticalPanel>
</gwt:west>
<gwt:center>
<gwt:VerticalPanel />
</gwt:center>
</gwt:SplitLayoutPanel>
I tried with ScrollPanel --> VerticalPanel --> CellTable. But i'm not getting ScrollBar. Can anyone help me?
Thanks in advance,
Gnik
What's the point in using of the VerticalPanel in this situation? Replace it by the ScrollPanel in your UiBinder xml-file. Set the width and the height in pixels for this ScrollPanel(this is very important!) and put in it your CellTable:
<g:ScroollPanel pixelSize="200, 400">
<c:CellTable ui:field="myCellList" />
</g:ScroollPanel>
200 - the width of panel in pixels, 400 - height.
At that the size of the CellTable list must necessarily larger than the size of ScrollPanel. Otherwise, a scroll does not appear.
Or set the width in 100% if you need a vertical scrolling:
<g:ScrollPanel width="100%" height ="400px">
If you are using Gwt 2.4, then replacing the CellTable Object with a DataGrid Object will give you the needed result with no need for a Scrollapanel.
You can see the difference between the celltable and the datagrid in the gwt Showcase (under cell widgets).
The below code worked for me -
<g:HTMLPanel>
<g:VerticalPanel>
<g:TabLayoutPanel barHeight="2" barUnit="EM" width="790px"
height="500px">
<g:tab>
<g:header>Sample</g:header>
<g:DockLayoutPanel>
<g:center>
<g:ScrollPanel>
<p1:CellTable ui:field="cellSampleTable" />
</g:ScrollPanel>
</g:center>
</g:DockLayoutPanel>
</g:tab>
</g:TabLayoutPanel>
</g:VerticalPanel>
</g:HTMLPanel>
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.