For iOS email I'd like to have a fixed position banner.
I am using:
{ position: -webkit-sticky !important; top: 10px !important; }
But in the iOS 7 email app the fixed position function & Sticky function are not working.
Is there any way to solve this?
this is Ros from Campaign Monitor - we've been testing position: -webkit-sticky; position: sticky; with no luck so far. Overall, position: fixed remains the answer in email clients other than Apple iOS & Mail, however we hope this will change to extend to iOS 7 Mail in time.
Try using position fixed and declare the top/left/right etc:
position: fixed; top:0; left: 0; right: 0;
Related
As you can see from the image, the iframe content is too big and it hides the X button + Sources bar.
Is there any option to make it's content a bit smaller?
This css seems to be the problem:
##media only screen and (min-width: 767px) {
#uw-glamor-396 .css-5anb0a, #uw-glamor-396 [data-css-5anb0a] {
position: absolute;
top: 50%;
left: 50%;
width: 767px;
height: 610px;
transform: translate(-50%, -50%);
border-radius: 5px;
}
}
If the height would be 450px instead of 610px it would fix the issue.
This fiddle raises the issue, open it with your laptop and expand a little bit the result window to get the Drag and Drop box.
This is how it looks like without the bookmark tab in my laptop with 100%, I use Chrome:
Unfortunately, it isnt possible to change this currently. Its a known issue but up until now there havent been any complaints that i know of. Typically apps that host the widget are in desktop resolutions so there's enough vertical space or its in mobile res and then the widget switches to the mobile layout.
Ill look into promoting this issue internally.
In the meantime, can you share some details about your app, how does it display the widget? What makes it not have enough vertical space?
I have long Msg and they are the same except the last part. As you can see below - i can't tell the difference: - they are actually different.
I've open up the debugger with chrome and i saw this:
But this doesn't work on page reload as you might expect. It reverts back to 30 ch.
Question:
Where are this styles kept? So that by modifying them i always have this debugger-sidebar at 70 ch.
Or is there a better way to do this?
Node: It would be even better if i can make it resizable instead of fixed at 70 ch. But this is enough for now.
You are not alone, there is a Github issue for this.
As #Simon H pointed out this is not fixed yet . But until then - to have a resizable debugger-sidebar you can do this:
Go into:
elm-stuff/packages/elm-lang/VirtualDom/Debug.elm
Do a search for the class: .debugger-sidebar
and then add:
.debugger-sidebar {
display: block;
float: left;
width: 30ch;
height: 100%;
color: white;
background-color: rgb(61, 61, 61);
/* add this 2 lines */
overflow-x: auto;
resize: horizontal;
}
It works on save with elm-live also. But if you delete the elm-stuff folder for some reason it will get back to normal - because elm-stuff is build on the fly.
I've taken this from #rtfeldman pull-request here
Hope that helps:)
EDIT:
There has been some improvements recently (model stays open during updates.. awesome !!:D ) and stuff was moved around. If you want this:
My gif recorder only does 600px - can't record the hole thing. To change the styles:
step 1. go to:
elm-stuff/packages/elm-lang/virtual-dom/ < your version number ex 2.0.4 > /src/VirtualDom/Debug.elm - and open up Debug.elm
step 2.
Find styles function, and inside, locate:
#debugger {
width: 100%
height: 100%;
font-family: monospace;
display: flex; -- add display flex here.
}
step 3. find:
.debugger-sidebar {
display: block;
float: left;
width: 30ch;
height: 100%;
color: white;
background-color: rgb(61, 61, 61);
width: 30%; -- add this 3 lines - maybe you want more width then 30%.
overflow-x: auto;
resize: horizontal;
}
Don't delete elm-stuff folder - if you do all this steps need to be done again.
For webpack users.
And also make sure you restart webpack build after doing this - because webpack-dev-server is working form the unchanged elm-stuff folder in memory - and will not pick up this change without a restart.
I have a problem to display the superscript value in the Safari (iOS 8).
In the IE/Chrome browser:
But Safari iOS8 iPad Air confusing:
I have tried the below two options to display the superscript value, but both of them cannot fix the issue in iOS8.
Option 1: use the sup element.
<span>6<sup>7</sup></span>
Option 2: use css to implement the superscript.
.sup
{
font-size: 75%;
line-height: 0;
vertical-align: super;
}
So any suggestion?
Thanks a lot.
We have had the same problem. We tested with iOS 8.1 beta and it appears to be fixed, so you may just have to wait for its release!
This example works for me:
span.sup {
font-size: 75%;
position: relative;
bottom: 1ex;
}
Please refer to the image below:
It's cutting off some of the table data because of the width. My table width is more than 1000 px. I know The default document size for ABCpdf is 612 by 792.
Using the code below to set document width and height
double w = doc.MediaBox.Width;
double h = doc.MediaBox.Height;
double l = doc.MediaBox.Left;
double b = doc.MediaBox.Bottom;
doc.Transform.Rotate(90, l, b);
doc.Transform.Translate(w, 0);
doc.Rect.Width = h;
doc.Rect.Height = w;
I want to display all tabular data. Do I need to modify my table size? Or do I need to modify the document page size of the pdf?
How could i resolve this issue?
Thanks,
Siva
After reviewing the HTML, I think that I can give you a few tips on how to resolve your issue:
1- Use the Gecko Engine for PDF Rendering:
doc.HtmlOptions.Engine = WebSupergoo.ABCpdf9.EngineType.Gecko;
The Gecko Engine provides better Css compliance when rendering in ABCPdf.
2- In your Css you have overflow-x set to scroll for the inner-container. This causing the behavior that you are seeing. I would add the following Css to the bottom of the Css:
#media print
{
.outer-container {
background-color: #ccc;
position: absolute;
top:0;
left: 0;
right: 300px;
bottom:40px;
overflow: visible;
width: 100%;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
overflow-x: visible;
}
table
{
width: 100%;
}
}
Notice the #media print which makes the css only effective during print and would not affect that way it shows on the screen.
3- Finally, you can try playing with the browser width:
doc.HtmlOptions.BrowserWidth = 1200;
The only problem with the BrowserWidth property is that it will affect the zoom on the document. All the text fonts will appear smaller.
Good luck...
You haven't specified if you are converting an HTML page to PDF- but I assume you are. If that is the case, have you looked at the browser width property? Look into the XHTMLOptions object properties- it will help you fine tune the rendering:
http://www.websupergoo.com/helppdfnet/source/5-abcpdf/xhtmloptions/
many old mobile brwoser do not support position:fixed, I tried writing a sloution myself,it works, but not smooth enough.
I googled, no luck for now.
so I would like to know if there is "smooth" solution for this, thanks.
i think it would be better to mention the browsers that you have problems with. for example I assume you have problems with IE6. I will try to answer your question according to my assumptions. So the 100% height on the body and html stuff is in case you want to do fixed positioning along the bottom edge of the browser window.
like so:
* { margin:0; padding:0; }
html, body {
height: 100%;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
top: 0;
right: 0;
}
#page-wrap {
width: 600px;
margin: 0 auto;
font: 16px/2 Georgia, Serif;
}
hope this will help please also check this site when having problems related to CSS
http://css-tricks.com/snippets/css/fixed-positioning-in-ie-6/