Is there any way I can change the UI of DartPad from Dark to Light or vice-versa?
I didn't find any button on the DartPad to do so.
There is no lightmode for DartPad, even though there are some requests.
Also see this issue.
I've just installed the chrome extension 'Invert!' which worked. Not wonderful colouring but better than black for me.
It seems that they support specifying a theme when embedding via iframe.
So if you want light theme, you can create local dartpad.html (or whatever .html) file and place this code into it:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
iframe {
display: block;
border: none;
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<iframe src="https://dartpad.dev/embed-dart.html?theme=light"></iframe>
</body>
</html>
I also placed the same file to GitHub Pages, so you just can use this link: https://ivanzoid.github.io/dartpad-light/
Related
I am creating an ordered list within a webview and I want to remove the indentation from the list, i.e. have the list aligned with the first paragraph. Here's HTML:
<body style="font-family: arial""font-size:18">
<p>First paragraph.</p>
<p>
<ol style="margin-left:0px">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
Notice that with the margin-left:0px, the webview still indents the list by about 17 points. If I say margin-left:-17px, I can make it work with a hack but would rather not as it seems more like I'm doing something wrong with the construction of my HTML.
Can anyone see any problems with it?
Updated HTML - Still doesn't work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
ol {
padding-left: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<p>
<ol>
<li>List item 1.</li>
<li>List item 2.</li>
<li>List item 3.</li>
</ol>
</p>
</body>
</html>
I'm using iOS 5.1 on iPhone 3GS
You can archive style like that with :
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Try This....
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
.flush-left {
padding-left: 25px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>
<ol class="flush-left">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
</html>
A couple of other pointers. Test your stuff out in test files in html on your desktop and load them into Safari and the iOS Simulator (Drag html file onto safari open in simulator).
But then you can use Regular Safari Debug tools to examine the html and css. or Firebug in Firefox.
Also, when in doubt www.w3schools.com ... :)
Perhaps I'm a bit late for your needs – I just came across this.
I only noticed this on my iPhone, and not my iPad, nor Safari on the Mac. I found that a bit strange that this issue would only be in the one version of Safari, and not all. I wasn't happening in Chrome either.
When looking in the Chrome developer tools, I noticed that the user agent stylesheet had added a number of -webkit prefixed styles, all to do with margin and padding:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
When I first saw that, I was wondering if that was the issue, but, it was late, and I had to take a sleep break. Today, I tackled it again, but forgot about these styles. I looked around, and came across #Remover's question. But, setting a specific pixel-based margin or padding didn't sit well with me.
At some point, I decided to narrow my browser window in Chrome, and low and behold the issue was there as well, only when I narrowed it to be close to the width of an iPhone. So, this isn't just an iOS issue. It's webkit.
I looked again at the styles in the dev tools, and saw again the -webkit styles, and the 40px on -webkit-padding-start. I played around with my css, and that was indeed the culprit.
I then added the following to my stylesheet:
ol {
-webkit-padding-start: 2em;
-ms-padding-start: 2em;
-moz-padding-start: 2em;
-o-padding-start: 2em;
padding-start: 2em;
}
I did some quick research, and it looks like only -webkit and -moz are using padding-start, but I added the rest, just in case they pick it up – though, now that Opera has switched to webkit, -o probably isn't needed.
In my case, I used 2em, as that worked with my style. Not sure if 2em will work across the board or not.
Edit
I should have also mentioned that it probably only shows up on small screens because it's set at 40px. In my design, my base font-size at full screen is 23px, and at 480px and below is 10px, which is quite a bit of a difference.
If you merely assign a padding of zero, the bullets go off the screen. I found that the following worked perfectly for my webview
ul,ol {padding-left: 20px;}
li {padding-left:2px;}
isn't it
<ul><li></li></ul>
not <ol> ?
also it looks the you might have a syntax error on your style for your body tag
:)
~ Dan
I am working on this wordpress blog http://www.taranmarlowjewelry.com/?page_id=7 (looks fine on a normal web broswer) I tried to edit the CSS so it looks good on an iphone...I added these lines in my iphone css file
.wrapper{
position:relative;
width:840px;
margin:0 auto;
}
.blog #page{
width:840px !important;
}
.blog #main{
width:840px !important;
}
.blog #primary {
width:220px !important;
}
.blog #content {
width: 220px !important;
}
.blog #secondary {
width:200px !important;
float:right !important;
}
but there is a massive space between the blog and the sidebar and the width of this page is too wide, while my home, about page look good with the .wrapper at a width of 840px;
What is going wrong here?
Have you tried using initial scale?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Add that in and adjust your CSS accordingly.
The correct way is to use a responsive theme, so you'd be including a base.css stylesheet for all frame-formats and then adding style sheets for each new frame-format. Something like:
http://yourdomain.com/library/css/style.css' type='text/css' media='(min-width:481px)' />
Then you can use functions within that stylesheet to apply more styles to larger frame-formats. Bones Theme (by themble) is a great place to start learning about responsive web design.
Failing that - Sean is right, start with the meta viewport settings and adjust from there. There's a great answer on iPad and iPhone screen sizes here iPad browser WIDTH & HEIGHT standard
Andy
I'm trying fade out the bottom of the UIWebView in my detailView. It's more like fading last 20-40 px. I'm using CSSTricks code for "ReadMoreFade" (link). My simplified version is pasted below.
My problem is when I start scrolling in my UIWebView, faded area stays there like a block. I'm attaching a screenshot that shows this. Any suggestions or hints? Thank you.
SCREENSHOT:
http://i51.tinypic.com/2rmxsfp.png
<!DOCTYPE html>
<html>
<head>
<title>Fade bottom</title>
<style>
body{background:#FFF}
p {
color:#000;
margin:0 auto;
text-align:justify;
text-indent:30px;
width:600px;
}
#fadeBottom {
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,0.7)));
bottom:0;
height:50px;
left:0;
position:fixed;
width:100%;
}
</style>
</head>
<body>
<p>Some long text here. Lorem ipsum?</p>
<div id="fadeBottom"></div>
</body>
</html>
For this situation, I'd just make a white image with a transparent gradient and overlay it on top of that UIWebView as needed. It's going to be a lot quicker than trying to debug browser stuff...
Whether you use an image or a CSS3 gradient, I'm afraid position:fixed doesn't work on iOS.
http://api.jquery.com/animate/
On this page, they give a demo where they have a gray div move across the screen with the click of a button.
Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.
I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.
However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.
I don't want you to be able to see the block. I want it hidden until you hit button again.
Anyone know what the heck is going on?
Here is a pic of the issue:
Here is my code:
div {
position:absolute;
background-color:#abc;
width:100%;
height:100%;
margin:0px;
max-width:100%;
}
body {
margin:0px;
padding:0px;
}
* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});
$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});
</script>
Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!
Thank you in advance!
Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;
Like this:
<div class="wrapper">
<div class="block"></div>
</div>
Also add the appropriate styling:
<style type="text/css">
...
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
</style>
Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.
Hope that helps.
Alternative to
overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}
The simple HTML below displays differently in Firefox and WebKit-based browsers (I checked in Safari, Chrome and iPhone).
In Firefox both border and text have the same color (#880000), but in Safari the text gets a bit lighter (as if it had some transparency applied to it).
Can I somehow fix this (remove this transparency in Safari)?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
input:disabled{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<input type="text" value="disabled input box" disabled="disabled"/>
</form>
</body>
</html>
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */
Phone and Tablet webkit browsers (Safari and Chrome) and desktop IE have a number of default changes to disabled form elements that you'll need to override if you want to style disabled inputs.
-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */
UPDATED 2021:
Combining ideas from this page into a "set and forget" reset that makes all disabled text the same as normal text.
input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
-webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
opacity: 1; /* 2. correct opacity on iOS */
}
it's an interesting question and I've tried plenty of overrides to see if I can get it going, but nothing's working. Modern browsers actually use their own style sheets to tell elements how to display, so maybe if you can sniff out Chrome's stylesheet you can see what styles they're forcing on to it. I'll be very interested in the result and if you don't have one I'll spend a little time myself looking for it later when I have some time to waste.
FYI,
opacity: 1!important;
doesn't override it, so I'm not sure it's opacity.
You could change color to #440000 just for Safari, but IMHO the best solution would be not to change looks of button at all. This way, in every browser on every platform, it will look just like users expect it to.
for #ryan
I wanted my disabled input box to look like a normal one. This is the only thing that would work in Safari Mobile.
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
background: white;
You can use the readonly attribute instead of the disabled attribute, but then you will need to add a class because there isn't a pseudo-class input:readonly.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>
Beware that a disabled input and readonly input aren't the same.
A readonly input can have focus, and will send values on submit. Look at w3.org
If you want to fix the problem for all the disabled inputs, you can define -webkit-text-fill-color to currentcolor, so the color property of the input will be used.
input[disabled] {
-webkit-text-fill-color: currentcolor;
}
See that fiddle on Safari
https://jsfiddle.net/u549yk87/3/
This question is very old but I thought that I would post an updated webkit solution.
Just use the following CSS:
input::-webkit-input-placeholder {
color: #880000;
}
Can you use a button instead of an input?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button:disabled{
border:solid 1px #880000;
background-color:#ffffff;
color:#880000;
}
</style>
</head>
<body>
<form action="">
<button type="button" disabled="disabled">disabled input box</button>
</form>
</body>
</html>