If you have an `@page` size declaration in the print CSS, this will override (and hide) the orientation on the print dialog. To override a declaration that is set elsewhere (e.g. Bootstrap 4 does this) you can add:

    @page {
      size: auto;
    }

Just a quick addition to the accepted answer..

For those who are unable to edit the css of the page you&#39;re trying to print, you can install the Chrome extension called &#39;**Stylus**&#39; ([link here][1]), and create a new style with just the above suggestion:

    ​​​@page {
      size: auto;
    }

This will enable the missing options from the print dialog on any/every web page..

  [1]: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

I created a table with an interactive slider that allows me to toggle between different periods on my table. It was working for the past few days, until today, when I re-ran the notebook, the slide bar doesn&#39;t show anymore. No error messages appear. The code seem to run just fine, as the table appears, but the slide bar just doesn&#39;t appear. I didn&#39;t change my code either, as I was working on a separate part of my notebook. 

I tried many approaches, including searching in this space but was still unable to come up with a solution. I was wondering if anyone faced a similar issue, and have any solution to this.

Below is my code snippet. Anything before was solely to get my data into the desired form for tabulation. 

    from IPython.display import display
    from ipywidgets import widgets, interactive
    v = interactive(by_q, quarter=([&#39;q1y2015&#39;, &#39;q2y2015&#39;, &#39;q3y2015&#39;, &#39;q4y2015&#39;]), days=(1, 180))
    display(v)


IPython Notebook ipywidgets does not show

I am using python and plotly to product interactive html report. [This post][1] gives a nice framework.

If I produce the plot(via plotly) online, and insert the url into the html file, it works but refreshing the charts takes a long time. I wonder if I could produce the chart offline and have it embedded in the html report, so that loading speed is not a problem.

I find plot offline would generate a html for the chart, but I don&#39;t know how to embed it in another html. Anyone could help?


  [1]: http://moderndata.plot.ly/generate-html-reports-with-python-pandas-and-plotly/

python save plotly plot to local file and insert into html

I&#39;ve been creating a website and a portion of the site is designed to be printed on tabloid paper in portrait mode. The problem I&#39;m having is when the print dialog comes up in Chrome it&#39;s missing the &quot;Layout&quot; options.

In this screen shot, the left side shows how my dialog box looks vs. how it looks when I print other websites. The ironic thing is even other sites I&#39;ve created have the option as shown on the right, which is the desired behavior.

[![print dialog example][1]][1]

My question is, what controls this behavior? How do I correct it? In searching the web the only mention I&#39;ve see of this is when Chrome is displaying PDF files, but I&#39;m displaying a web page.

Any insight you can give would be greatly appreciated.

Thanks in advance


  [1]: http://i.stack.imgur.com/OLoyI.jpg

Chrome printing website, missing layout options

I've been creating a website and a portion of the site is designed to be printed on tabloid paper in portrait mode. The problem I'm having is when the print dialog comes up in Chrome it's missing the "Layout" options.
In this screen shot, the left side shows how my dialog box looks vs. how it looks when I print other websites. The ironic thing is even other sites I've created have the option as shown on the right, which is the desired behavior.
<a href="http://i.stack.imgur.com/OLoyI.jpg" target="_blank" rel="noopener noreferrer"><img src="http://i.stack.imgur.com/OLoyI.jpg" alt="print dialog example"></a>
My question is, what controls this behavior? How do I correct it? In searching the web the only mention I've see of this is when Chrome is displaying PDF files, but I'm displaying a web page.
Any insight you can give would be greatly appreciated.
Thanks in advance

Say I&#39;m doing 3 flex columns, first one 50%, the other two auto adjust.

    .half {
        flex: 0 0 auto ;
        width: 50% ;
    }
or

    .half {
        flex: 0 0 50%;
    }
These seem to be functionally the same.  Are they?

Specifing width of a flexbox flex item: width or basis?

Im working on a project and im using some ul and li&#39;s.

But i cant seem to figure out how to remove those pesky black dots that come with those lists.

Can any of you help me with this?

Edit: i completely forgot to search this site if there was already an answer (derp) turns out there was! Marked this as a duplicate, thanks for helping me everyone!

Removing black dots from li and ul

Is there a CSS selector for element without any class? For example in HTML

&lt;!-- language: lang-html --&gt;

    &lt;section&gt;Section A&lt;/section&gt;
    &lt;section class=&quot;special&quot;&gt;Section B&lt;/section&gt;
    &lt;section class=&quot;&quot;&gt;Section C&lt;/section&gt;

I would like to select Section A (or maybe Section A and Section C, it does not matter that much), by saying something like

&lt;!-- language: css --&gt;

    section:not(.*) { color: gray } 

I understand that I could define it to section and reset it back in all particular classes, like in 

&lt;!-- language: css --&gt;

    section { color: gray } 
    section.special { color: black } 

but this is not what I want, because it is not very manageable once the styles get complex and in some cases it is hard to do the &quot;reset&quot; properly (of course not in this simplified example).

Is there a CSS selector for element without any class?

I want a div to slide in from the right in angular 2 using css.

      &lt;div class=&quot;note&quot; [ngClass]=&quot;{&#39;transition&#39;:show}&quot; *ngIf=&quot;show&quot;&gt;
        &lt;p&gt; Notes&lt;/p&gt;
      &lt;/div&gt;
      &lt;button class=&quot;btn btn-default&quot; (click)=&quot;toggle(show)&quot;&gt;Toggle&lt;/button&gt;

I works fine if i only use [ngClass] to toggle class and utilise opacity.
But li don&#39;t want that element to be rendered from the beginning so I &quot;hide&quot; it with ngIf first, but then the transition wont&#39;t work.

    .transition{
      -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
      -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
      -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ;
      -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
      transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
      margin-left: 1500px;
      width: 200px;
      opacity: 0;
    }
    
    .transition{
      opacity: 100;
      margin-left: 0;
    }



angular 2 ngIf and CSS transition/animation

I&#39;m trying to implement the card-deck feature in bootstrap 4 to make all of my cards the same height.

The examples that bootstrap provides show 4 nice cards, but it&#39;s 4 cards on the row, no matter the viewport. See the codeply [here][1].

This doesn&#39;t make sense to me since, I would assume, that you&#39;d want a minimum size for your card to shrink to in order for your content to still look good.

I then tried adding in some viewport classes to break on screen sizes, but as soon as that div gets added, the card-deck doesn&#39;t apply anymore, thus not making the cards equal height.

How can I get this accomplished? Is this a missing feature that will be addressed in the full release of Bootstrap 4?

Here&#39;s the fiddle: https://jsfiddle.net/crrm5q9m/

    &lt;div class=&quot;card-deck-wrapper&quot;&gt;
      &lt;div class=&quot;card-deck&quot;&gt;
        &lt;div class=&quot;card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1&quot;&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;blockquote class=&quot;card-blockquote&quot;&gt;
              &lt;p&gt;It&#39;s really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.&lt;/p&gt;
              &lt;footer&gt;Makes flexible layouts &lt;cite title=&quot;Source Title&quot;&gt;Faster&lt;/cite&gt;&lt;/footer&gt;
            &lt;/blockquote&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1&quot;&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;blockquote class=&quot;card-blockquote&quot;&gt;
              &lt;p&gt;The Bootstrap 3.x element that was called &quot;Panel&quot; before, is now called a &quot;Card&quot;.&lt;/p&gt;
              &lt;footer&gt;All of this makes more &lt;cite title=&quot;Source Title&quot;&gt;Sense&lt;/cite&gt;&lt;/footer&gt;
            &lt;/blockquote&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1&quot;&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;blockquote class=&quot;card-blockquote&quot;&gt;
              &lt;p&gt;There are also some interesting new text classes for uppercase and capitalize.&lt;/p&gt;
              &lt;footer&gt;These handy utilities make it &lt;cite title=&quot;Source Title&quot;&gt;Easy&lt;/cite&gt;&lt;/footer&gt;
            &lt;/blockquote&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1&quot;&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;blockquote class=&quot;card-blockquote&quot;&gt;
              &lt;p&gt;If you want to use cool icons in Bootstrap 4, you&#39;ll have to find your own such as Font Awesome or Ionicons.&lt;/p&gt;
              &lt;footer&gt;The Glyphicons are not &lt;cite title=&quot;Source Title&quot;&gt;Included&lt;/cite&gt;&lt;/footer&gt;
            &lt;/blockquote&gt;
          &lt;/div&gt;
        &lt;/div&gt;
            &lt;div class=&quot;card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1&quot;&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;blockquote class=&quot;card-blockquote&quot;&gt;
              &lt;p&gt;It&#39;s really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.&lt;/p&gt;
              &lt;footer&gt;Makes flexible layouts &lt;cite title=&quot;Source Title&quot;&gt;Faster&lt;/cite&gt;&lt;/footer&gt;
            &lt;/blockquote&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1&quot;&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;blockquote class=&quot;card-blockquote&quot;&gt;
              &lt;p&gt;The Bootstrap 3.x element that was called &quot;Panel&quot; before, is now called a &quot;Card&quot;.&lt;/p&gt;
              &lt;footer&gt;All of this makes more &lt;cite title=&quot;Source Title&quot;&gt;Sense&lt;/cite&gt;&lt;/footer&gt;
            &lt;/blockquote&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1&quot;&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;blockquote class=&quot;card-blockquote&quot;&gt;
              &lt;p&gt;There are also some interesting new text classes for uppercase and capitalize.&lt;/p&gt;
              &lt;footer&gt;These handy utilities make it &lt;cite title=&quot;Source Title&quot;&gt;Easy&lt;/cite&gt;&lt;/footer&gt;
            &lt;/blockquote&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1&quot;&gt;
          &lt;div class=&quot;card-block&quot;&gt;
            &lt;blockquote class=&quot;card-blockquote&quot;&gt;
              &lt;p&gt;If you want to use cool icons in Bootstrap 4, you&#39;ll have to find your own such as Font Awesome or Ionicons.&lt;/p&gt;
              &lt;footer&gt;The Glyphicons are not &lt;cite title=&quot;Source Title&quot;&gt;Included&lt;/cite&gt;&lt;/footer&gt;
            &lt;/blockquote&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;


  [1]: http://www.codeply.com/render/KrUO8QpyXP

Bootstrap 4 card-deck with number of columns based on viewport

Can I use `ngIf` without an extra container element?

    &lt;tr *ngFor=&quot;...&quot;&gt;
      &lt;div *ngIf=&quot;...&quot;&gt;
        ...
      &lt;/div&gt;
      &lt;div *ngIf=&quot;!...&quot;&gt;
        ...
      &lt;/div&gt;
    &lt;/tr&gt;

It doesn&#39;t work in a table because that would make invalid HTML.

Using ngIf without an extra element in Angular 2

Let&#39;s say I have the following div that gets focus after a certain condition is met:

    &lt;div id=&quot;myID&quot; tabindex=&quot;-1&quot; &gt;Some Text&lt;/div&gt;

I want to create a handler that checks whether or not that div has focus, and when it evaluates to true/focus is on the div, do something (in the example below, print a console log):

    if (document.getElementById(&#39;#myID&#39;).hasFocus()) {
                $(document).keydown(function(event) {
                    if (event.which === 40) {
                        console.log(&#39;keydown pressed&#39;)
                    }
                });
            }
I&#39;m getting an error message in the console that says:

 TypeError: Cannot read property &#39;hasFocus&#39; of null

Any idea what I&#39;m doing wrong here? Maybe the way I&#39;m passing the div Id?

How can I check if my Element ID has focus?

I&#39;m debugging a visual composer plugin that broke after I updated WordPress to 4.5 and I can&#39;t figure out why it is throwing a TypeError.

The error message in the console:

    JQMIGRATE: Migrate is installed, version 1.4.0              load-scripts.php?....
    Uncaught TypeError:     $template.get is not a function     composer-view.js?ver=4.1.1.1:73

The only occurrences of `$template` are found in the code below. I understand that this isn&#39;t very much context to go off of but, how can I resolve this error?

    /**
     * Convert html into correct element
     * @param html
     */
    html2element: function(html) {
      var attributes = {},
        $template;
      if (_.isString(html)) {
        this.template = _.template(html);
        $template = $(this.template(this.model.toJSON()).trim());
      } else {
        this.template = html;
        $template = html;
      }
      _.each($template.get(0).attributes, function(attr) { // **errors on this line**
        attributes[attr.name] = attr.value;
      });
      this.$el.attr(attributes).html($template.html());
      this.setContent();
      this.renderContent();
    },

&lt;br&gt;

Update:

It looks like this might be a problem with jQuery. WordPress 4.5 includes jQuery 1.12 which fixed a bug that allowed certain code to be run with incorrect syntax. I assume that the plugin code must have had incorrect syntax but ran nonetheless until now.

https://wordpress.org/support/topic/read-this-first-wordpress-45-master-list#post-8271654

Plugin throwing TypeError after WordPress 4.5 update

I&#39;m trying a demo on vuejs. Now I want the html title to bind a vm field.

The below is what I tried:

`index.html`

    &lt;!DOCTYPE html&gt;
    &lt;html id=&quot;html&quot;&gt;
    &lt;head&gt;
        &lt;title&gt;{{ hello }}&lt;/title&gt;
        &lt;script src=&quot;lib/requirejs/require.min.js&quot; data-main=&quot;app&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    {{ hello }}
    &lt;input v-model=&quot;hello&quot; title=&quot;hello&quot; /&gt;
    &lt;/body&gt;
    &lt;/html&gt;

`app.js`

    define([
        &#39;jquery&#39;, &#39;vue&#39;
    ], function ($, Vue) {
        var vm = new Vue({
            el: &#39;html&#39;,
            data: {
                hello: &#39;Hello world&#39;
            }
        });
    });

But the title seemed not bounded, how to make it work?

How can I bind the html &lt;title&gt; content in vuejs?

I&#39;m developing a google chrome **packaged** app, when I put Sandbox in the `manifest.json`:

     {
      &quot;manifest_version&quot;: 2,
      &quot;name&quot;: &quot;WM32216&quot;,
      &quot;version&quot;: &quot;2.1&quot;,
      &quot;minimum_chrome_version&quot;: &quot;23&quot;,
      &quot;permissions&quot;:[&quot;webview&quot;, &quot;https://ajax.googleapis.com/*&quot;],
      &quot;sandbox&quot;:{
          &quot;pages&quot;:[&quot;index.html&quot;]
      },
      &quot;app&quot;: {
        &quot;background&quot;: {
          &quot;scripts&quot;: [&quot;main.js&quot;]
        }
      }
    }

An `onclick` event on my anchor tag works, and the flow of the app is complete EXCEPT THAT, icons from a CSS stylesheet don&#39;t load.

I got an `error` from the console that 

`File not found` ,

but those are just **fonts** so it&#39;s fine with me, 

The big problem is that, the video in the iframe doesn&#39;t play and I got additional error prior to the Font which are: 

&gt; VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. 
&gt;
&gt; Not allowed to load local resource: blob:null/b818b32c-b762-4bd9-...
 
When I remove the sandbox in the manifest.json file, everything is good no errors in the console about the font, 

BUT when I **hit/click my anchor tag** that has a click event to load a new function in the js  I&#39;m getting the following **Console Error** :

&gt; Refused to execute inline event handler because it violates the following Content Security Policy directive: &quot;default-src &#39;self&#39; blob: filesystem: chrome-extension-resource:&quot;. Either the &#39;unsafe-inline&#39; keyword, a hash (&#39;sha256-...&#39;), or a nonce (&#39;nonce-...&#39;) is required to enable inline execution. Note also that &#39;script-src&#39; was not explicitly set, so &#39;default-src&#39; is used as a fallback.


Sorry for the very long detail,

I just need help with this because I&#39;m stuck here for 3 days already.

Refused to execute inline event handler because it violates CSP. (SANDBOX)

I noticed today that Chrome 49 no longer outputs `NaN` when you type `{}+{}` into the console. Instead it outputs the string `[object Object][object Object]`. 

Why is this? Did the language change?

Why is {} + {} no longer NaN in Chrome console?

I made a website where if the user clicks, it plays a sound. To prevent the sound from overlapping, I had to add the code: 

    n.pause();
    n.currentTime = 0;
    n.play();

But that causes the error:
`The play() request was interrupted by a call to pause()`
&lt;br /&gt; To come up each time the sound event is triggered right after another trigger. The sounds still plays fine, but I want to prevent this error message constantly popping up. Any ideas?



How to prevent &quot;The play() request was interrupted by a call to pause()&quot; error?

Sinсe Google Chrome was updated to 50.x version, it become impossible to work with DevTools. This issue reproduced mostly in &quot;Network&quot; tab. Every time when you click on &quot;request&quot; it takes about 30-40 sec. after that chrome can crash. Tried to delete all extensions, clear cache, and reinstall, but didn&#39;t help. Does anybody know how to fix this issue?

I&#39;m running Chrome 50.0.2661.87 m

UPD: The problem may be occurs because of long headers. Try to close response and request headers.

Google Chrome developer tools works very slow

In Google Chrome&#39;s developer tools, when I select an element, I see     `==$0` next to the selected element. What does that mean?

[![Screenshot][1]][1]

  [1]: http://i.stack.imgur.com/C2eGI.jpg


What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?

I want to send the file I&#39;m currently editing to a printer, like I did in Notepad++ for example.
I havn&#39;t found any hint on a print command. Is it not possible ?

How to print a file from VsCode?

I need to print some str to console (Android Studio) using Kotlin.
I&#39;ve tried the:

    Log.v() 
    Log.d() 
    Log.i() 
    Log.w() 
    Log.e() 
methods. But it seems to work only on Java.
What should I use to print using Kotlin?
Thanks

Kotlin Android print to console

This might be a simple question but because of clear understanding between print() and debug() print in swift I am unable to understand where to use each one. 

print() vs debugPrint() in swift

Note: This question is for informational purposes only. I am interested to see how deep into Python&#39;s internals it is possible to go with this.

Not very long ago, a discussion began inside a certain [question](https://stackoverflow.com/q/49271187/4909087) regarding whether the strings passed to print statements could be modified after/during the call to `print` has been made. For example, consider the function:

    def print_something():
        print(&#39;This cat was scared.&#39;)

Now, when `print` is run, then the output to the terminal should display:

    This dog was scared.

Notice the word &quot;cat&quot; has been replaced by the word &quot;dog&quot;. Something somewhere somehow was able to modify those internal buffers to change what was printed. Assume this is done without the original code author&#39;s explicit permission (hence, hacking/hijacking).

This [comment](https://stackoverflow.com/questions/49271187/how-to-change-a-string-in-a-function-when-calling-a-function/49271219?noredirect=1#comment85545706_49271219) from the wise @abarnert, in particular, got me thinking:

&gt; There are a couple of ways to do that, but they&#39;re all very ugly, and
&gt; should never be done. The least ugly way is to probably replace the
&gt; `code` object inside the function with one with a different `co_consts`
&gt; list. Next is probably reaching into the C API to access the str&#39;s
&gt; internal buffer. [...]

So, it looks like this is actually possible.

Here&#39;s my naive way of approaching this problem:

    &gt;&gt;&gt; import inspect
    &gt;&gt;&gt; exec(inspect.getsource(print_something).replace(&#39;cat&#39;, &#39;dog&#39;))
    &gt;&gt;&gt; print_something()
    This dog was scared.

Of course, `exec` is bad, but that doesn&#39;t really answer the question, because it does not actually modify anything _during when/after_ `print` is called.

How would it be done as @abarnert has explained it?



Content Type	Original Author	Original Content on Stackoverflow
Question	ThrowBackDewd	View Question on Stackoverflow
Solution 1 - Css	omnichad	View Answer on Stackoverflow
Solution 2 - Css	Peter	View Answer on Stackoverflow

Chrome printing website, missing layout options

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

python save plotly plot to local file and insert into html

IPython Notebook ipywidgets does not show

Attributions