Search code examples
htmliosmfmailcomposeviewcontroller

Remove MFMailComposeViewController HTML right margin?

I am trying to send an HTML email from my app with MFMailComposeViewController, but I'm running into an issue where there is odd padding to the right.

Here is the HTML I'm using:

</br>
</br>
<a href='itms-apps://itunes.apple.com/app/id444395321'>
<img src='http://brianensorapps.com/whirlworld/wwad.png' height='80' width='320' style='position:relative;left:-10px;margin-right:0px;padding-right:0px;'/>
</a>

I'm not sure which right CSS tags are necessary. Neither are working now. The position and left tag are for eliminating the left margin.

Here is a picture of the situation I'm trying to avoid where the user can scroll to the right past my banner: Issue

It has also been requested that I post the code for presenting the MFMailComposeViewController:

sharingVC = [[MFMailComposeViewController alloc] init];
sharingVC.mailComposeDelegate = self;
sharingVC.navigationBar.tintColor = [UIColor lightGrayColor];
[sharingVC setSubject:@"Check out this app"];
[sharingVC setMessageBody:[NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"sharingEmail.html"] usedEncoding:nil error:nil] isHTML:YES];
[self presentViewController:sharingVC animated:YES completion:nil];
Solution

  • You are setting the left margin to -10px, which moves everything to the left (giving you a right margin of 10px)

    In the style attribute, change left: -10px to say left:0px so your html code looks like this:

    </br>
</br>
<a href='itms-apps://itunes.apple.com/app/id444395321'>
<img src='http://brianensorapps.com/whirlworld/wwad.png' height='80' width='320' style='position:relative;left:0;margin-right:0px;padding-right:0px;'/>
</a>

    I think what you are really looking for though would be to set the position absolute and left to 0, like this:

    </br>
</br>
<a href='itms-apps://itunes.apple.com/app/id444395321'>
<img src='http://brianensorapps.com/whirlworld/wwad.png' height='80' width='320' style='position:absolute; left:0px' />
</a>

    In my testing, that shows the image going from the left of the screen all the way to the right with no horizontal scrolling.