I have a custom theme for CM, important part is just this:
.CodeMirror, .CodeMirror * {
font-family: "Roboto Mono" !important;
font-size: 14px;
}
Using this theme causes the text to be measured incorrectly at first render, but it looks good after the editor updates:
Is there any way I could force the Editor/Doc to re-measure the text? Couldn't find any API methods.
I've added the CSS that you provided and it works very fine.
Just you don't need to use the .CodeMirror *
I think that your problem may be due to something else.
Try to call editor.refresh(); after the page loaded.
I am writing an iPhone app that has some Xpages included in the app. In Xpages I am using the Single Application Page and then Application Pages. They work fairly slick.
However, in my first page I am getting a 44px space that I do not want. I noticed that there is CSS that causes this:
.mblView {
padding top: 44px !important;
}
I have a picture of how it looks here:
http://www.flickr.com/photos/28998410#N06/
How can I override that css so that I don't get that horrible looking bar at the top.
Any help would be greatly appreciated.
Bryan
The 44px padding is there because the design expects a heading before the content. The heading needs 44px space. Here's a simple example where the heading is included:
<xe:appPage id="appPage1" pageName="homePage" resetContent="false">
<xe:djxmHeading id="homePageHeading" label="Heading"></xe:djxmHeading>
<xe:djxmRoundRectList id="djxmRoundRectList1">
Content
</xe:djxmRoundRectList>
</xe:appPage>
You can create your own custom css with the following content and add it as a stylesheet resource to your XPage. This should override the standard CSS:
.mblView {
padding-top: 0px !important;
}
I'm making a website and I've got it working on the Mac and the iPad. When I see it on the iPhone, one of the pages doesn't place the background-image correctly.
I'm using 2 background images on the of the website and I've already set it's height to around 1200px. When I see the same page on the iPhone, all the text wraps up and makes the page longe. My footer image stays in the same position and the text overlaps it. Shouldn't it work as the iPad since I've got all the text wrapped inside a ?
I'm noticing that the problem is that the image is set on the body and as it's not a , it will not follow the increased length of the text.
How can I specify a height of that background-image specifically for the Mac + iPad and another one for the iPhone?
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#333;
background:#000;
margin: 0px auto;
background-image:url(images/gradcinza_top.png), url(images/gradcinza_bot.png);
background-repeat:repeat-x, repeat-x;
background-position:0px 115px, 0px 950px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
On the iPad and the Mac, those 950px put the footer image on the exact place I want it. In the iPhone, since I have less area to present the text it simply makes it longer. I need something to say to the website to put the background-image on on position while it's being viewed on the Mac and iPad and another condition to specify a new position for the iPhone.
Thank you.
read some Responsive Web Design Guidelines..Use CSS Media Queries for this...
e.g.:-
http://www.w3.org/TR/css3-mediaqueries/#media0
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
I am creating a responsive website, and have just noticed a strange behaviour in my content pages when viewed on the iPhone. It scales correctly when loaded in portrait mode, and also when rotated to landscape. However, when rotating back to portrait the page seems to shift left, or not zoom correctly, and there is a strip of white space down the right-hand side. This white space also seems to be present on first loading in portrait as the user can swipe the page left
Rather than complicating the explanation any further, here's a link to a sample page where this behaviour is occurring. Have a look on an iPhone, then have a look at the home page which does not have this issue.
If you need to see anything further, just me know :)
Fixed it! The issue was coming from one particular div - to find it, it was a process of deleting the different elements until the issue went away.
To fix it I needed to add overflow-x: hidden to that div and it sorts it out! Hope this is useful to others with a similar issue.
I had the same problem, I fixed it by setting:
html, body { width:100%; overflow:hidden; }
This problem occurs when width of any division is greater than the width of iPAD's screen.
In my case, some divisions were having size of 1000px, so I just went for width:auto and it works. overflow-x:hidden also does the same thing, but is not a preferred way.
I don't have an iphone to test this on but I have come across something similar with websites I've created in the past. In my case its because there was a bug in safari mobile that messed with the scale when going from port to land.
The following code fixed it for me (can't remember where I got it from at the moment)
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
Using "overflow-x: hidden" solves part of the problem, but screws the scroll, acting with strange behaviors (as Jason said).
Sometimes, the hardest part is to discover what is causing the problem. In my case, after a few hours, if found that the problem was in Twitter's Bootstrap:
If you're using Twitter's Bootstrap with "control-group" zones for your forms, the problem could be there. In my case i solved the problem with:
.control-group .controls {
overflow-x: hidden
}
Now the white space on the right was gone :)
I'd like to add to Navneet Kumar's solution because it worked for me. Any div tag styled with width=100% cannot also have left or right padding. The mobile browsers (I noticed the problem on iPhone and Android devices) interpret the div as having a width greater than 100%, thereby creating the extra space on the right side. (I knew this regarding fixed widths, but not percentage widths.) Instead, use width=auto in conjunction with padding.
I know it's a while since this topic was opened but I came across a similar situation and found it was because I had an element with the following properties right: -999999px; position: absolute; hidden off screen.
Changing the above to left: -999999px; position: absolute; solved the same issue the OP had (white screen to the right and ability to swipe right).
I'm using Bootstrap 3.3. I tried all of these solutions, and nothing worked. Then, I changed my <div class="container"> to <div class="container-fluid"> in the section that I was having trouble with. This solved the problem.
I tried all what has been suggested here, nothing works. Then I've relized that it connect with scale of page. So then I added <meta name="viewport" content="width=device-width, initial-scale=1.0"> to header.php in my main theme's folder and it 's fixed problem.
Seems as though results are varying for different circumstances but a sitewide
html, body { width:100%; x-overflow:hidden; }
seems to have worked for me!
Fixed!
Had a similar problem. Fixed it by setting the width to a current device width.
body, html {
max-width: 100vw;
margin: 0 auto;
overflow-x: hidden;
}
SOLVED ¡¡
Since installing protostar joomla template 3.X and start adding content in the module K2 I noticed that annoying scroll with a blank space on the right side, visible especially in iphones.
A correct partial answer was gave for Eva Marie Rasmussen, adding to the body tag in the file template.css these values:
width: auto;
overflow-x: hidden;
But this solution is only partial.
Search div class or label that is causing this problem and once detected add to that class in the file templete.css the same values:
width: auto;
overflow-x: hidden;
In my case add to the class "span" these two lines to finally look like this:
[Class * = "span"] {
float: left;
min-height: 1px;
margin-left: 20px;
width: auto;
overflow-x: hidden;
And it´s working now¡¡
Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?
capture of the problem, http://i.stack.imgur.com/pTLki.png
TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:
http://www.apinkdoor.com/show/
TravisO, you should get rid of the img styling in your css!
If you use only this:
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-color: #f00;
text-align: center;
}
</style>
it should render properly on your iPhone!
This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).
The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.
The following CSS, added to the problematic div with a specified background-image, is what fixed it for me. Anything less than 3px would still show light artifacts at some Safari zoom levels.
margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */
I found changing the background colour of the element with the 'grey border' around it worked for me.
Adding an initial-scale value to the viewport metatag resolved this issue for me.
<meta name="viewport" content="initial-scale=1.0">
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;