I would like to increase the width of the ipython notebook in my browser. I have a high-resolution screen, and I would like to expand the cell width/size to make use of this extra space.
Thanks!
EDIT / ANSWER : 5/2017
I now use jupyterthemes: https://github.com/dunovank/jupyter-themes
and this command:
jt -t oceans16 -f roboto -fs 12 -cellw 100%
which sets the width to 100% with a nice theme.
If you don't want to change your default settings, and you only want to change the width of the current notebook you're working on, you can enter the following into a cell:
from IPython.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))
That div.cell solution didn't actually work on my IPython, however luckily someone suggested a working solution for new IPythons:
Create a file ~/.ipython/profile_default/static/custom/custom.css (iPython) or ~/.jupyter/custom/custom.css (Jupyter) with content
.container { width:100% !important; }
Then restart iPython/Jupyter notebooks. Note that this will affect all notebooks.
To get this to work with jupyter (version 4.0.6) I created ~/.jupyter/custom/custom.css containing:
/* Make the notebook cells take almost all available width */
.container {
width: 99% !important;
}
/* Prevent the edit cell highlight box from getting clipped;
* important so that it also works when cell is in edit mode*/
div.cell.selected {
border-left-width: 1px !important;
}
It's time to use jupyterlab
Finally, a much-needed upgrade has come to notebooks. Jupyterlab uses the full width of your window like any other full-fledged native IDE by default.
All you have to do is:
pip install jupyterlab
# if you use conda
conda install -c conda-forge jupyterlab
# to run
jupyter lab # instead of jupyter notebook
Here is a screenshot from blog.Jupyter.org
What I do usually after new installation is to modify the main css file where all visual styles are stored. I use Miniconda but location is similar with others C:\Miniconda3\Lib\site-packages\notebook\static\style\style.min.css
With some screens these resolutions are different and more than 1. To be on the safe side I change all to 98% so if I disconnect from my external screens on my laptop I still have 98% screen width.
Then just replace 1140px with 98% of the screen width.
#media (min-width: 1200px) {
.container {
width: 1140px;
}
}
After editing
#media (min-width: 1200px) {
.container {
width: 98%;
}
}
Save and restart your notebook
Update
Recently had to wider Jupyter cells on an environment it is installed, which led me to come back here and remind myself.
If you need to do it in virtual env you installed jupyter on. You can find the css file in this subdir
env/lib/python3.6/site-packages/notebook/static/style/stye.min.css
This is the code I ended up using. It stretches input & output cells to the left and right. Note that the input/output number indication will be gone:
from IPython.core.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))
display(HTML("<style>.output_result { max-width:100% !important; }</style>"))
display(HTML("<style>.prompt { display:none !important; }</style>"))
You can set the CSS of a notebook by calling a stylesheet from any cell. As an example, take a look at the 12 Steps to Navier Stokes course.
In particular, creating a file containing
<style>
div.cell{
width:100%;
margin-left:1%;
margin-right:auto;
}
</style>
should give you a starting point. However, it may be necessary to also adjust e.g div.text_cell_render to deal with markdown as well as code cells.
If that file is custom.css then add a cell containing:
from IPython.core.display import HTML
def css_styling():
styles = open("custom.css", "r").read()
return HTML(styles)
css_styling()
This will apply all the stylings, and, in particular, change the cell width.
(As of 2018, I would advise trying out JupyterHub/JupyterLab. It uses the full width of the monitor. If this is not an option, maybe since you are using one of the cloud-based Jupyter-as-a-service providers, keep reading)
(Stylish is accused of stealing user data, I have moved on to using Stylus plugin instead)
I recommend using Stylish Browser Plugin. This way you can override css for all notebooks, without adding any code to notebooks.
We don't like to change configuration in .ipython/profile_default, since we are running a shared Jupyter server for the whole team and width is a user preference.
I made a style specifically for vertically-oriented high-res screens, that makes cells wider and adds a bit of empty-space in the bottom, so you can position the last cell in the centre of the screen.
https://userstyles.org/styles/131230/jupyter-wide
You can, of course, modify my css to your liking, if you have a different layout, or you don't want extra empty-space in the end.
Last but not least, Stylish is a great tool to have in your toolset, since you can easily customise other sites/tools to your liking (e.g. Jira, Podio, Slack, etc.)
#media (min-width: 1140px) {
.container {
width: 1130px;
}
}
.end_space {
height: 800px;
}
For Chrome users, I recommend Stylebot, which will let you override any CSS on any page, also let you search and install other share custom CSS. However, for our purpose we don't need any advance theme. Open Stylebot, change to Edit CSS. Jupyter captures some keystrokes, so you will not be able to type the code below in. Just copy and paste, or just your editor:
#notebook-container.container {
width: 90%;
}
Change the width as you like, I find 90% looks nicer than 100%. But it is totally up to your eye.
I made some modification to #jvd10's solution. The '!important' seems too strong that the container doesn't adapt well when TOC sidebar is displayed. I removed it and added 'min-width' to limit the minimal width.
Here is my .juyputer/custom/custom.css:
/* Make the notebook cells take almost all available width and limit minimal width to 1110px */
.container {
width: 99%;
min-width: 1110px;
}
/* Prevent the edit cell highlight box from getting clipped;
* important so that it also works when cell is in edit mode*/
div.cell.selected {
border-left-width: 1px;
}
Note that if you do this the old way, you'll now get a deprecation warning. This uses the newer submodule naming:
from IPython.display import HTML
HTML("<style>.container { width:100% !important; }</style>")
I tried everything and nothing worked for me, I ended up using displaying my data frame as HTML as follows
from IPython.display import HTML
HTML (pd.to_html())
For Firefox/Chrome users, a nice way to achieve 100% width is to use a custom TamperMonkey script.
The benefits are
configure this once in your browser, no need to modify the server configuration.
works with multiple jupyter servers.
TamperMonkey is trusted, maintained, and stable.
Lots of additional customization is possible via javascript.
This script works for me https://gist.githubusercontent.com/mrk-andreev/2a9c2538fad0b687c27e192d5948834f/raw/6aa1148573dc20a22fca126e56e3b03f4abf281b/jpn_tmonkey.js
adding to answers by #jdv10 and #gerenuk
The best option is to add and tweak the custom.css file. Below I am
sharing my CSS file contents which I use to squeeze out the maximum
screen area in a Jupyter Notebook.
Since it targets the vanilla CSS codes of the rendered page, it is supposed to work for all types of
language used for coding on the Notebook.
/* Notebook styling */
body, p, div.rendered_html {
color: #93a1a1;
font-family: 'PT Serif', Georgia, Times, 'Times New Roman', serif;
font-size: 11pt;
}
body { background-color: #eee8d5 !important; }
/* the following controls aspects which are around the cells */
#notebook {
background-color: #073642 !important;
box-shadow: inset 20px 36px 20px -35px black !important;
margin: 1px !important;
padding: 1px !important;
}
#notebook-container {
padding: 2px !important;
}
/* Make the notebook cells take almost all available width */
.container {
width:99.5% !important;
/*margin:.5% !important;*/
/*color: #93a1a1 !important;*/
color: black !important;
background-color: lightblue !important;
}
/* Cell output */
.rendered_html pre, .rendered_html code {
color: inherit !important;
background-color: inherit !important;
}
.rendered_html table, .rendered_html td, .rendered_html th {
border: 1px solid #586e75 !important;
}
div.cell {
width:100% !important;
margin: 5px !important;
/* margin-left:2px !important; */
/* margin-right:2px !important; */
padding: 2px !important;
/* the following overrides the background color of the input area */
/* background-color: yellow !important; */
/* border-color: black !important; */
}
/* Prevent the edit cell highlight box from getting clipped; * important so that it also works when cell is in edit mode*/
div.cell.selected {
border-left-width: 5px !important;
border-right-width: 1px !important;
border-top-width: 2px !important;
border-bottom-width: 2px !important;
border-color: red !important;
}
/*this is for the area to the left of the editor or input area*/
div.run_this_cell {
width: auto !important;
color: green !important;
padding: 0 !important;
padding-top: 5px !important;
padding-left: 5px !important;
font-weight: bold !important;
font: 2em sans-serif;
}
div.input_area {
border-color: green !important;
background-color: #ffffdd !important;
}
.prompt {
line-height: 1em !important;
}
div.prompt {
min-width: auto;
background-color: white;
}
div.input_prompt {
color: #268bd2 !important;
color: #000000 !important;
font-weight: bold !important;
border: 1px solid #ff9900 !important;
background-color: greenyellow;
padding-right: 0px !important;
text-align: center !important;
width: auto !important;
font-size: 10px !important;
}
div.output_area {
color: #000000 !important;
background-color: #e2e2ff !important;
font-size: 0.9em !important;
}
/* Syntax highlighting */
.cm-s-ipython span.cm-comment {
/*color: #6c71c4 !important;*/
color: midnightblue !important;
color: rgb(100, 100, 170) !important;
font-style: italic !important;
}
.cm-s-ipython span.cm-string {
color: rgb(100, 20, 29) !important;
}
Related
I created a responsive html email using the media queries method mentioned in this article. It works perfectly on outlook mobile app and its mentioned that it should work on iOS mail but it doesn't, any ideas how to fix that? This is the media queries part of the code:
#media screen and (max-width: 375px) {
*[class="padding"] td, .padding td {
padding: 24px !important;
}
*[class="mobile_scale"], .mobile_scale {
width:100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
*[class="shorten_space"], .shorten_space {
height: 16px !important;
line-height: 16px !important;
}
*[class="mobile_scale"] img, .mobile_scale img {
width:100% !important;
height: auto;
}
*[class="mobile_center"], .mobile_center {
align-items: center !important;
text-align: center !important;
margin: 0 auto !important;
}
*[class="sub_button"], .sub_button {
align-items: left !important;
text-align: left;
padding-top: 16px;
}
}
Campaign Monitor's articles on email are very dated, unfortunately.
You don't need these at all: *[class="shorten_space"]. I believe from memory that was a hack to get classes working for Yahoo webmail, and they've updated years back so we don't need that anymore.
Just use the standard css, i.e. .shorten_space
(For all of them)
That would be a reason why it wouldn't on Gmail apps, though, not iOS. That's because Gmail removes all style blocks that it doesn't agree with.
I'd say the reason why it wasn't working for iOS, though, is becaues of the 375px limit. iPhones tend to be larger these days. Try bumping that up to 450px or so.
As the title says, I have a weird css error on my hands. I've built a rails app using bootstrap and some custom css, testing the whole thing in chrome initially. I started checking it out in firefox and my user sign in form-fields don't seem to respond to clicking on them or typing. You can't see the placeholder value nor what you're typing. Has anyone heard of this before? Any ideas what causes it?
To illustrate I made a jsfiddle (my first). I was kind of heavy handed and just copied the css right out of my inspector so it's a little bit of a mess. Open it in firefox and the form cannot be typed into. In chrome it's fine. The offending line on this fiddle appears to be 28, the -mox-box-sizing rule.
http://jsfiddle.net/vRF3F/
.row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: left;
margin-left: 2.12766%;
min-height: 30px;
width: 100%;
}
Ok, I think I have found the cause:
If you remove this line:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
border-radius: 4px 4px 4px 4px;
color: #555555;
display: inline-block;
font-size: 14px;
/* height: 20px;*/
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
}
it will work. Setting the height property will cause the parent div to collapse so you won't see the input box anymore, hence it appear to not work. The padding alone should be fine to give it a height.
See updated fiddle here:
http://jsfiddle.net/AbdiasSoftware/vRF3F/3/
Bootstrap CSS does include the box-sizing property with all vendor prefixes in that selector, I don't know why you are only getting the -moz
.row-fluid [class*="span"] {
...
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
...
}
Try updating your CSS with that and you will note that your inputs are now smaller in height so just set a specific value for height and I think you'll be good to go
.new-user input[type="text"],.new-user input[type="password"]{
height: 60px;
}
I'm using fancybox 2 and I can get rid of the padding around the outside of the frame, but then I lose the border-radius that it comes with.
What I want is a border-radius around the main content inside the frame. So I tried going into the css and adding a border-radius to the fancy-box inner selector and it won't work. How can I give the frame a rounded corner without a border?
If anyone can help me with this that would be great!
Try this code it worked for me
Add custom classes after fancy box on complete method.
Ex.
HTML
Login
JS
$(document).ready(function(e) {
$(".signin-ovr").fancybox({
afterLoad : function(){
$("#fancybox-content").addClass('fancybox-content-cust');
$(".fancybox-bg").addClass('fancybox-bg-cust');
$("#fancybox-outer").addClass('fancybox-outer-cust');
}
});
});
CSS
.fancybox-content-cust {
overflow: visible !important;
border: 10px solid #FFFFFF;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.fancybox-bg-cust{
display: none;
}
.fancybox-outer-cust {
background: transparent !important;
}
Then you will get border radius to the overlay box.
for fancybox v2 round borders
.fancybox-outer, .fancybox-inner, .fancybox-skin {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 10px!important;
}
CSS3 has a border radius property ironically enough entitled border-radius there are a few specific variations ie, Firefoxes moz-border-radius.
It is used like so:
#div-id .specific-class {
border-radius: 10px;
}
If you only want one rounded it has the ability to be modified like so
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
I hope this answers your question.
I'm trying to make this website: http://501commons.org render the same on iPhone as on other browsers. On Android it works just fine. I have already added the -webkit-text-size-adjust: 100%; to the body style, which helped a little. What is still not working are the following pieces, and I can't figure out why mobile safari is not displaying them properly:
the top left logo just plain won't show up
the search box in the top right is way too far to the left
the red slogan in the header "A Resource for Nonprofits etc" is too large, too low, and extends beyond the right border
the font of the three nav menu items (Explore the Commons, Volunteer, Invest) is too large
Everything else seems ok, at least on the home page. What's weird is that all four problems above occur in the header.
Any help would be hugely appreciated!
Thanks!
I figured it out:
Top left logo
The logo not showing up was due to a strange non-cascading issue. The logo is an <img> tab inside an <a id="portal-logo" ...>. The #portal-logo has a display: inline-block; rule in the next-to-last stylesheet that applies to it, but not in the last one. In other words, this is what we have:
#portal-logo { /* in the last CSS file */
margin-bottom: 0;
}
#portal-logo { /* in the next-to-last CSS file */
display: inline-block;
margin: 1.375em 0;
}
Adding display: inline-block; to the last stylesheet magically makes the logo appear. Then I had to also fiddle with margins, position, top, etc to make it appear in the right place, but all these are in a CSS file that is loaded conditionally only on mobile browsers, so it's ok. It's just really strange that Safari on iOS does not cascade the display: inline-block; style!
Search box
I made the search box be rendered in the proper place by adding text-align:right; to its container, even though an earlier rule for the same container with text-align:left; makes it work just fine in every other browser.
Slogan
The slogan required the most tweaking. It's contained in a <div id="slogan">. Here is the old rule:
#slogan {
color: #EE3524;
float: right;
font-size: 110%;
font-weight: bold;
margin-right: -190px;
padding-top: 60px;
position: relative;
z-index: 1;
}
And here is the new rule that works on mobile safari:
#slogan {
-webkit-text-size-adjust: 100%;
clear:right;
color:#ee3524;
font-size:17.6px;
font-weight: bold;
float:right;
margin-right:0px;
padding-bottom:50px;
padding-top:0px;
position:relative;
text-align:right;
z-index:1;
}
One of the key differences is the absolute font-size in px, instead of as a % value.
Menu Items font
Likewise, specifying the font-size in px instead of % seemed to be the key here:
Old:
#portal-globalnav li a {
background-color: transparent;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold;
min-width: 3em;
padding-bottom: 11px;
}
New:
#portal-globalnav li a {
background-color:transparent;
color:#fff;
font-size:15.4px;
font-weight:bold;
padding-bottom:11px;
min-width:3em;
}
YMMV!
I have a Telerik tree and drag & drop node move is in action. But then I applied a theme (bought from somewhere) to the overall design of my site, and now, the hint are gone.
When you drag a node, some horizontal hint lines appear, so that you can understand that if you release your node (drop it) where it would be dropped.
Try adding the following CSS to the page. It will force the styles upon the TreeView drop hint.
.rtDropAbove, .rtDropBelow {
border: 1px dotted black !important;
font-size: 3px !important;
height: 3px !important;
line-height: 3px !important;
margin-top: -1px !important;
}
.rtDropAbove {
border-bottom: 0 !important;
}
.rtDropBelow {
border-top: 0 !important;
}
Something's z-index property is messing up with Telerik's RadTree. It's all z-index stuff.