It&#39;s because of the user-agent stylesheets of every browser.
You should always reset all attributes in your css as your first step.

**Short solution:**

    * {
      margin: 0;
      padding: 0;
    }

    /* your styling */

**Longer solution:**

http://meyerweb.com/eric/tools/css/reset/

for firefox:
&lt;pre&gt;-moz-padding-start: 0px;&lt;/pre&gt;


I&#39;m creating a simple `REST API` for uploading files. From other API&#39;s I found they use &quot;`multipart/form-data`&quot; content type. But for me, it looks like &quot;`application/octet-stream`&quot; is much simpler.

If I don&#39;t intend to send any more form data with the file is there any reason to use &quot;`multipart/form-data`&quot; and not &quot;`application/octet-stream`&quot; ?

multipart/form-data vs application/octet-stream

When I use the command:

    pyinstaller.exe --icon=test.ico -F --noconsole test.py

All icons do not change to test.ico. Some icons remain as the pyinstaller&#39;s default icon.

Why?


All icon change in 
- windows 7 32bit
- windows 7 64bit (make an exe file OS)

Some remain default
- windows 7 64bit (other PC)

Pyinstaller setting icons don&#39;t change

I am working on adding a menu to a map. The menu is working fine except I noticed there is always a padding to the left no matter what CSS applied to the menu. The padding seems to be originated from (-webkit-padding-start: 40px;) and it does not want to go away. I tried to override it with `0 !important;` that didn&#39;t do anything.


After Googling found this:

[-webkit-padding-start: 40px; What it should be for IE and Firefox?][1]

However could not find anything else on how to override or make this go away. I need to have items in the menu all the way to the left. 

![enter image description here][2]


Attached is a screenshot, green area is what I am talking about and under styles you can see -webkit-padding-start: 40px;


  [1]: https://stackoverflow.com/questions/12549591/webkit-padding-start-40px-what-it-should-be-for-ie-and-firefox
  [2]: http://i.stack.imgur.com/BQ4CN.png

Get rid of -webkit-padding-start: 40px

I am working on adding a menu to a map. The menu is working fine except I noticed there is always a padding to the left no matter what CSS applied to the menu. The padding seems to be originated from (-webkit-padding-start: 40px;) and it does not want to go away. I tried to override it with <code>0 !important;</code> that didn't do anything.
After Googling found this:
<a href="https://stackoverflow.com/questions/12549591/webkit-padding-start-40px-what-it-should-be-for-ie-and-firefox" target="_blank" rel="noopener noreferrer">-webkit-padding-start: 40px; What it should be for IE and Firefox?</a>
However could not find anything else on how to override or make this go away. I need to have items in the menu all the way to the left.
<img src="http://i.stack.imgur.com/BQ4CN.png" alt="enter image description here">
Attached is a screenshot, green area is what I am talking about and under styles you can see -webkit-padding-start: 40px;

I am using [MarkEd](https://github.com/chjj/marked) which implements [GitHub flavoured markdown](https://help.github.com/articles/github-flavored-markdown/).

I have some working markdown:

    ## Test heading
    a paragraph.
    ## second heading
    another paragraph

Which creates:

	&lt;h2 id=&quot;test-heading&quot;&gt;Test heading&lt;/h2&gt;
	&lt;p&gt;a paragraph.&lt;/p&gt;
	&lt;h2 id=&quot;second-heading&quot;&gt;second heading&lt;/h2&gt;
	&lt;p&gt;another paragraph&lt;/p&gt;

I would like to wrap that markdown section in a div, eg:

    &lt;div class=&quot;blog-post&quot;&gt;
    ## Test heading
    a paragraph.
    ## second heading
    another paragraph
    &lt;/div&gt;

However this returns the following HTML:

    &lt;div class=&quot;blog-post&quot;&gt;
    ## Test heading
    a paragraph.
    ## second heading
    another paragraph
    &lt;/div&gt;

Eg, no markdown, literally &#39;## Test heading&#39; appears in the HTML.

**How can I properly wrap my markdown in a div?**

I have found the following workaround, however it is ugly and not an actual fix:

    &lt;div class=&quot;blog-post&quot;&gt;
    &lt;div&gt;&lt;/div&gt;

    ## Test heading
    a paragraph.
    ## second heading
    another paragraph

    &lt;/div&gt;

How can I wrap my markdown in an HTML div?

The first example didn&#39;t work. I need to have always a list to disable links? Or what is wrong with my first demo?

    &lt;a class=&quot;disabled&quot; href=&quot;#&quot;&gt;Disabled link&lt;/a&gt;
    
--------------
    &lt;ul class=&quot;nav nav-pills&quot;&gt;
      ...
      &lt;li role=&quot;presentation&quot; class=&quot;disabled&quot;&gt;&lt;a href=&quot;#&quot;&gt;Disabled link&lt;/a&gt;&lt;/li&gt;
      ...
    &lt;/ul&gt;

https://jsfiddle.net/7y0u2amy/

Disable a link in Bootstrap

Recently I found that there is, possibly, a new way of commenting in HTML5.

Instead of the typical `&lt;!-- --&gt;` multi-line commenting I&#39;ve read about,  I *thought* I noticed that my IDE made a regular `&lt;!div &gt;` commented out. So I tested it out, and to my surprise Chrome had commented out that tag. It *only* commented out the tag and not the contents of the div, so I had to comment out the closer `&lt;!/div&gt;` to avoid closing other divs.

I tested another and it appears that generally putting an exclamation marker in front of the opening of any tag, this symbol `&lt;`, makes that tag commented out.

Is this actually new? Is it bad practice? It is actually very convenient, but is it practical yet (if not new)?

**Extra details:**

Although a syntax error or misinterpretations of this particular syntax is a good reason, how come Chrome *actually* renders them as full comments?

**The code is written as**:

```lang-none
&lt;!div displayed&gt; some text here that is still displayed &lt;!/div&gt;
```

**And then it is rendered as**:

```lang-none
&lt;!--div displayed--&gt; some text here that is still displayed &lt;!--/div--&gt;
```




Does HTML5 change the standard for HTML commenting?

  **What I have :**
A C++ application server running, Ready to send data to client which is supposed to a HTML5 page or app.

**What I want :** Is there any way to communicate using udp port with HTML5 given both c++ server and HTML5 app are local to system ?

**What I know :** 

 - Because of Security Concern, JS doesn&#39;t allow UDP port communication from browser.
 - Have read in many places, Answer is no. But answers are old.

Is the answer still &#39;NO&#39; ?

Is there any work-around possible ?

Any lead is appreciated.




How to talk to UDP sockets with HTML5?

I&#39;m using a flex box to display 8 items that will dynamically resize with my page. How do I force it to split the items into two rows? (4 per row)?

Here is a relevant snip:

(Or if you prefer jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .parent-wrapper {
      height: 100%;
      width: 100%;
      border: 1px solid black;
    }
    .parent {
      display: flex;
      font-size: 0;
      flex-wrap: wrap;
      margin: -10px 0 0 -10px;
    }
    .child {
      display: inline-block;
      background: blue;
      margin: 10px 0 0 10px;
      flex-grow: 1;
      height: 100px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;body&gt;
      &lt;div class=&quot;parent-wrapper&quot;&gt;
        &lt;div class=&quot;parent&quot;&gt;
          &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;child&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;

&lt;!-- end snippet --&gt;



Flexbox: 4 items per row

I am trying to create a responsive grid of squares. The squares should resize to fit the viewport&#39;s width. The squares should not resize when changing the viewport&#39;s height.

I got how to adjust the width of each square, but I don&#39;t know how to make the elements square and how to scale their height when the viewport width changes. 

In the example at the fiddle below the seven squares should always fit horizontally, and they should scale as squares. I do not care how many rows are visible.

Fiddle here http://jsfiddle.net/gonyhvz8/11/

    &lt;body&gt;
    &lt;div class=&quot;flex-container&quot;&gt;
        &lt;div class=&quot;flex-item&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;3&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;4&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;5&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;6&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;7&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flex-container&quot;&gt;
        &lt;div class=&quot;flex-item&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;3&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;4&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;5&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;6&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;7&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flex-container&quot;&gt;
        &lt;div class=&quot;flex-item&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;3&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;4&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;5&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;6&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;7&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flex-container&quot;&gt;
        &lt;div class=&quot;flex-item&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;3&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;4&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;5&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;6&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;7&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flex-container&quot;&gt;
        &lt;div class=&quot;flex-item&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;3&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;4&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;5&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;6&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;7&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flex-container&quot;&gt;
        &lt;div class=&quot;flex-item&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;3&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;4&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;5&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;6&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;7&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;flex-container&quot;&gt;
        &lt;div class=&quot;flex-item&quot;&gt;1&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;2&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;3&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;4&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;5&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;6&lt;/div&gt;
        &lt;div class=&quot;flex-item&quot;&gt;7&lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

    .flex-container {
      padding: 0;
      margin: 0;
      list-style: none;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-flow: row;
      justify-content: space-around;
      height: 50px;
      line-height:30px;
    }

    .flex-item {
      background: tomato;
      margin: 5px;
      color: white;
      font-weight: bold;
      font-size: 1.5em;
      text-align: center;
      flex: 1 0 0px;
      height: auto;
    }

css grid of squares with flexbox

I do not know what is going on but in the browser console I can see 3 errors related to font-awesome

     GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff2?v=4.3.0 
     GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.woff?v=4.3.0
     GET http://www.desktop.just4bettors.mobi/fonts/fontawesome-webfont.ttf?v=4.3.0 

I know it is ridiculous I can not figure out this by myself, but everything seems to be OK, in my index.html I have something like this

    &lt;link rel=&quot;stylesheet&quot; href=&quot;bower_components/font-awesome/css/font-awesome.css&quot; /&gt;

and that&#39;s all I have related to the font-awesome thing, I already check the path and I am not wrong with that.

Is this happening with any of you guys ?

![enter image description here][1]


  [1]: http://i.stack.imgur.com/X0ylj.png


**UPDATE**

this is the NGINX part where I load some content in the headers

    add_header Content-Security-Policy &quot;style-src &#39;self&#39; &#39;unsafe-inline&#39;
    https://fonts.googleapis.com
    https://fonts.gstatic.com
    https://themes.googleusercontent.com
    https://assets.zendesk.com;
    font-src &#39;self&#39; https://themes.googleusercontent.com
    https://fonts.gstatic.com;&quot;;

Font-Awesome error 404 on fonts

[This exception occurs in here.][1] You can reproduce it in IE11. So far I have not found the cause of the issue. Any ideas why this is being caused?

![enter image description here][2]

&gt; CSS3114: @font-face failed OpenType embedding permission check.
&gt; Permission must be Installable. File:
&gt; 53d9eae5-63b4-48d7-a5b8-3419455028bb.ttf

The web site is running on Azure Websites platform and is using ASP.NET MVC 5.


  [1]: http://itmcup-stg.azurewebsites.net/
  [2]: http://i.stack.imgur.com/jpmqs.png

@font-face failed OpenType embedding permission check. Permission must be Installable

Say I have a component with a render like this:

    &lt;View style={jewelStyle}&gt;&lt;/View&gt;

Where jewelStyle = 

      {
        borderRadius: 10,
        backgroundColor: &#39;#FFEFCC&#39;,
        width: 20,
        height: 20,
      },

How could I make the background colour dynamic and randomly assigned? I&#39;ve tried 

      {
        borderRadius: 10,
        backgroundColor: getRandomColor(),
        width: 20,
        height: 20,
      },

But this makes all instances of View have the same colour, I want each one to be unique.

Any tips?

Can I make dynamic styles in React Native?

I&#39;m trying to add a night theme for my app and I&#39;ve wasted nearly three hours just trying to make the text and icons in my navigation drawer turn white along with the dark background. Here is the way I&#39;m trying to go about doing this in `onCreate()` in `MainActivity.java`:

    navigationView = (NavigationView) findViewById(R.id.navigation_view);
    navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

        // This method will trigger onItemClick of navigation menu
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {

            // Checking if the item is in checked state or not, if not make it in checked state
            if (menuItem.isChecked())
                menuItem.setChecked(false);
            else menuItem.setChecked(true);

            if (nightMode == 0) {
                SpannableString spanString = new SpannableString(menuItem.getTitle().toString());
                spanString.setSpan(new ForegroundColorSpan(Color.WHITE), 0, spanString.length(), 0); // fix the color to white
                menuItem.setTitle(spanString);
            }

The `nightMode` boolean is irrelevant because it works. When night mode is set to on (0), whatever menu item is selected in the navigation drawer turns white. However, that only happens when each item is selected which is obviously inconvenient. Here is my drawer_dark.xml:

        &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
    &lt;menu xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
        &lt;group
            android:checkableBehavior=&quot;single&quot;&gt;
            &lt;item
                android:id=&quot;@+id/unitone&quot;
                android:checked=&quot;true&quot;
                android:icon=&quot;@drawable/one_white&quot;
                android:title=&quot;Classical Period&quot; /&gt;
            &lt;item
                android:id=&quot;@+id/unittwo&quot;
                android:checked=&quot;false&quot;
                android:icon=&quot;@drawable/two_white&quot;
                android:title=&quot;Postclassical Period&quot; /&gt;
            &lt;item
                android:id=&quot;@+id/unitthree&quot;
                android:checked=&quot;false&quot;
                android:icon=&quot;@drawable/three_white&quot;
                android:title=&quot;Early Modern Era&quot; /&gt;
            &lt;item
                android:id=&quot;@+id/unitfour&quot;
                android:checked=&quot;false&quot;
                android:icon=&quot;@drawable/four_white&quot;
                android:title=&quot;Dawn of Industrial Age&quot; /&gt;
            &lt;item
                android:id=&quot;@+id/unitfive&quot;
                android:checked=&quot;false&quot;
                android:icon=&quot;@drawable/five_white&quot;
                android:title=&quot;Modern Era&quot; /&gt;
        &lt;/group&gt;
    &lt;/menu&gt;

I&#39;m using white icons on a transparent background for each item, yet they show up as black on the black background of the navigation drawer. I&#39;ve tried looking for an xml solution to changing the color of the text and I&#39;m scratching my head because I don&#39;t know why this was overlooked.

Can someone offer me a dynamic solution in getting what I&#39;m trying to achieve? All help is appreciated, thank you!

EDIT: I am not using a third party library, it&#39;s the NavigationView provided in the support library. Here&#39;s the XML layout:

    &lt;android.support.v4.widget.DrawerLayout
        xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
        xmlns:tools=&quot;http://schemas.android.com/tools&quot;
        xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
        android:id=&quot;@+id/drawer&quot;
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;match_parent&quot;
        android:elevation=&quot;7dp&quot;
        tools:context=&quot;.MainActivity&quot;
        android:fitsSystemWindows=&quot;true&quot; &gt;
    
        &lt;FrameLayout
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;match_parent&quot;
            android:orientation=&quot;vertical&quot;&gt;
    
            &lt;FrameLayout
                android:id=&quot;@+id/container&quot;
                android:layout_width=&quot;match_parent&quot;
                android:layout_height=&quot;match_parent&quot;
                android:background=&quot;@color/ColorDark&quot; /&gt;
    
            &lt;include layout=&quot;@layout/toolbar&quot; /&gt;
    
        &lt;/FrameLayout&gt;
    
        &lt;android.support.design.widget.NavigationView
            android:id=&quot;@+id/navigation_view&quot;
            android:background=&quot;#000&quot;
            android:layout_height=&quot;match_parent&quot;
            android:layout_width=&quot;match_parent&quot;
            android:layout_gravity=&quot;start&quot;
            app:headerLayout=&quot;@layout/header&quot;
            app:menu=&quot;@menu/drawer&quot; /&gt;
    
    &lt;/android.support.v4.widget.DrawerLayout&gt;

Changing text color of menu item in navigation drawer

&lt;p&gt;Google and some other developers have introduced us to what some have called the
hamburger menu button and now the 3 vertical dots button or vertical ellipsis. 
What is the official name of these buttons/icons?

&lt;p&gt;It would be nice if developers could consistently use a particular icon for menus.
It would also be nice to know what to tell novice users to press.

&lt;p&gt;&lt;b&gt;Background Info:&lt;/b&gt;

&lt;p&gt;Horizontal Ellipsis	… `&amp;#8230; &amp;#x2026; &amp;hellip;`
&lt;br&gt;Apple uses the horizontal ellipsis and calls it the 
&lt;a href=&quot;https://support.apple.com/en-us/HT204839&quot; target=&quot;_blank&quot;&gt;[More Options][1]&lt;/a&gt; icon.
&lt;br&gt;According to https://design.google.com/icons/ the icon is called &quot;more horiz&quot;.

&lt;p&gt;Vertical Ellipsis &amp;#8942; `&amp;#8942; &amp;#x22EE; &amp;vellip;` 
&lt;br&gt;Google+ for desktop seems to use this as a menu for communities. The Google+ app
uses this icon as a standard menu icon.
&lt;br&gt;According to https://design.google.com/icons/ the icon is called &quot;more vert&quot;.

&lt;p&gt;Identical To &amp;#8801; `&amp;#8801; &amp;#x2261; &amp;equiv;`
&lt;br&gt;Google Chrome uses an image similar to Identical To and calls it the 
&lt;a href=&quot;https://support.google.com/chrome/answer/95414?hl=en&quot; target=&quot;_blank&quot;&gt;[Chrome menu][2]&lt;/a&gt;.
&lt;br&gt;It has also been called the &quot;hamburger&quot; icon, &quot;hotdog&quot; icon, Options menu, Menu button,
Overflow menu, Side menu, Menu drawer...
&lt;br&gt;According to https://design.google.com/icons/ the icon is called &quot;menu&quot;.


  [1]: https://support.apple.com/en-us/HT204839
  [2]: https://support.google.com/chrome/answer/95414?hl=en

What is the hamburger menu icon called and the three vertical dots icon called?

I want to change Options menu&#39;s dots color to white. I tried to add image for this but dose not work. How to do this?

[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/uP6sq.png


menu xml :

     &lt;menu xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
        xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
        xmlns:tools=&quot;http://schemas.android.com/tools&quot;
        tools:context=&quot;com.example.siddhi.timetablelayout.Main2Activity&quot;&gt;

        &lt;item android:id=&quot;@+id/action_settings&quot; android:title=&quot;@string/action_settings&quot;
            android:orderInCategory=&quot;100&quot; app:showAsAction=&quot;never&quot;
            android:icon=&quot;@drawable/ic_more_vert_white_48dp&quot;/&gt;
    &lt;/menu&gt;

Thank you.


How to change Options menu dots color?

I have an application that extends JavaScript via JavaScriptCore, in a webkit-gtk browser. Right now I have several classes that I add to the global context like so:

    void create_js(gpointer context, char* className, JSClassDefinition clasDefinition) {
        JSClassRef classDef = JSClassCreate(&amp;clasDefinition);
        JSObjectRef classObj = JSObjectMake(context, classDef, context);
        JSObjectRef globalObj = JSContextGetGlobalObject(context);
        JSStringRef str = JSStringCreateWithUTF8CString(className);
        JSObjectSetProperty(context, globalObj, str, classObj, kJSPropertyAttributeNone, NULL);
        JSStringRelease(str);
    }

Now, I&#39;d like to also add those classes to the WebWorker&#39;s context, so I can call them from workers instantiated in JS.

I&#39;ve tried getting the `Worker` object like so:

    JSStringRef workerStr = JSStringCreateWithUTF8CString(&quot;Worker&quot;);
    JSObjectRef worker = JSObjectGetProperty(context, globalObj, workerStr, NULL);
    JSObjectSetProperty(context, worker, str, classObj, kJSPropertyAttributeNone, NULL);
    JSStringRelease(workerStr);

But that adds it to the `WorkerConstructor` object, and when a `new Worker()` is called, the classes are not available.

How to Add a new native class to WebWorker&#39;s context in JavaScriptCore?

while getting cookies from `UIWebView` seems straightforward by using `NSHTTPCookieStorage.sharedHTTPCookieStorage()`, it seems `WKWebView` stores the cookies somewhere else.

I did some research, and I was able to get some cookies from the grabbing it from `NSHTTPURLResponse` object. this, however, does not contain all the cookies used by `WKWebView`:

    func webView(webView: WKWebView, decidePolicyForNavigationResponse navigationResponse: WKNavigationResponse, decisionHandler: (WKNavigationResponsePolicy) -&gt; Void) {
    
      if let httpResponse = navigationResponse.response as? NSHTTPURLResponse {
        if let headers = httpResponse.allHeaderFields as? [String: String], url = httpResponse.URL {
          let cookies = NSHTTPCookie.cookiesWithResponseHeaderFields(headers, forURL: url)
          
          for cookie in cookies {
            logDebug(cookie.description)
            
            logDebug(&quot;found cookie &quot; + cookie.name + &quot; &quot; + cookie.value)
          }
        }
      }
    }


Strangely, there&#39;s also a class `WKWebsiteDataStore` in ios 9 that responsible for managing cookies in `WKWebView`, however, the class does not contain a public method to retrieve the cookies data:

    let storage = WKWebsiteDataStore.defaultDataStore()
      
    storage.fetchDataRecordsOfTypes([WKWebsiteDataTypeCookies], completionHandler: { (records) -&gt; Void in
      for record in records {
        logDebug(&quot;cookie record is &quot; + record.debugDescription)
          
        for dataType in record.dataTypes {
          logDebug(&quot;data type is &quot; + dataType.debugDescription)
            
          // get cookie data??
        }
      }
    })


Is there a workaround for getting the cookie data?

Getting all cookies from WKWebView

I want to have a vertical menu with a specific height.

Each child must fill the height of the parent and have middle-aligned text.

The number of children is random, so I have to work with dynamic values.

Div `.container` contains a random number of children (`.item`) that always have to fill the height of the parent. To achieve that I used flexbox.  

For making links with text aligned to the middle I am using `display: table-cell` technique. But using table displays requires using a height 100%.

My problem is that `.item-inner { height: 100% }` is not working in webkit (Chrome).  

1. Is there a fix for this problem?   
2. Or is there a different technique to make all `.item` fill the height of the parent with text vertical aligned to middle?

[Example here jsFiddle, should be viewed in Firefox and Chrome][1]

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .container {
      height: 20em;
      display: flex;
      flex-direction: column;
      border: 5px solid black
    }
    .item {
      flex: 1;
      border-bottom: 1px solid white;
    }
    .item-inner {
      height: 100%;
      width: 100%;
      display: table;
    }
    a {
      background: orange;
      display: table-cell;
      vertical-align: middle;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;item&quot;&gt;
        &lt;div class=&quot;item-inner&quot;&gt;
          &lt;a&gt;Button&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;item&quot;&gt;
        &lt;div class=&quot;item-inner&quot;&gt;
          &lt;a&gt;Button&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class=&quot;item&quot;&gt;
        &lt;div class=&quot;item-inner&quot;&gt;
          &lt;a&gt;Button&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


  [1]: http://jsfiddle.net/y8mboo2s/

Chrome / Safari not filling 100% height of flex parent

I&#39;m having trouble finding documentation for this. Is it Safari specific?

There was a recent bug in iOS 9 ([here][1]), the solution to which is adding `shrink-to-fit=no` to the viewport meta. 

What does this code do?


  [1]: http://kihlstrom.com/2015/shrink-to-fit-no-fixes-zoom-problem-in-ios-9/

What does the shrink-to-fit viewport meta attribute do?

I have created a responsive layout for an app using Flexbox.
The layout calls for a collapsible menu on the left, a block with a header and body in the middle and a toggleable help-pane on the right (there&#39;s more to it but that&#39;s the basic structure).

The left menu has two states: 180px wide or 80 px wide. The help pane is either hidden, or takes 180px. The middle box takes the rest of the space. Flexbox works like a charm.

The trouble starts when I make a scrolling div using `white-space: nowrap`. I have a bunch of items that need to be displayed in a horizontal scroller, so I have a list div with the items, set to `overflow:auto` and `white-space: nowrap`. 

Usually this works like a charm, but now it breaks my flex layout. Instead of taking the width of the parent (flex) div, the scroller makes the div wider, which in turn pushes the help-pane out of bounds.

---

The following fiddle illustrates this issue:

http://jsfiddle.net/PieBie/6y291fud/

You can toggle the help-pane by clicking _toggle help_ in the menu bar. **Recreate the issue by clicking _list whitespace toggle_ in the menu, this toggles the `white-space: no-wrap` CSS property of the list. If the help-pane is open, you can see it gets pushed out of bounds.**

The bottom list is what I want to achieve, but I want it to be full width of its parent.

I can recreate the issue in Chrome, Firefox, Opera, Vivaldi and Edge. Internet Explorer 11 plays nice (&#176;_&#176;). I would prefer a pure CSS solution (SCSS is also an option), but if need be I can use JS.


----------


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(&#39;#nav-toggle&#39;).on(&#39;click&#39;,function(){
    	$(this).parent().toggleClass(&#39;collapsed&#39;);
    });
    $(&#39;#help-toggle&#39;).on(&#39;click&#39;,function(){
    	$(&#39;#help-pane&#39;).toggleClass(&#39;visible&#39;);
    });
    $(&#39;#list-toggle&#39;).on(&#39;click&#39;,function(){
    	$(&#39;#list&#39;).toggleClass(&#39;nowrap&#39;);
    });

&lt;!-- language: lang-css --&gt;

    body,html{width:100%;height:100%;overflow:hidden;}

    #body{
      display:flex;
      flex-flow:row nowrap;
      position:absolute;
      top:0;
      left:0;
      margin:0;
      padding:0;
      width:100%;
      height:100%;
      background-color:#abc;
      overflow:hidden;
    }

    #shell{
      flex: 1 1 auto;
      display:flex;
      flex-flow:row nowrap;
      position:relative;
      width:100%;
      min-height:100%;
    }

      #left{
        flex: 0 0 180px;
        min-height:100%;
        min-width: 0;
        background:lightblue;
      }
      #left.collapsed{
        flex: 0 0 80px;
      }
      
      #mid{
        flex: 1 1 auto;
        min-height:100%;
        min-width: 0;
        display:flex;
        flex-flow:column nowrap;
        align-items:stretch;
        align-content:stretch;
        position:relative;
        width:100%;
        min-height:100vh;
        min-width: 0;
        background:purple;
      }
          #mid-top{
            flex: 0 0 auto;
            min-height:100px;
            background:green;
          }
          #mid-bottom{
            min-height:calc(100% - 100px);
            flex: 1 1 auto;
            background:lightgreen;
          }
          #list{
            overflow: auto;
            width: 100%;
            max-width: 100%;
          }
          #list.nowrap{
            white-space: nowrap;
          }
          #secondlist{
            overflow: auto;
            max-width: 250px;
            white-space: nowrap;
          }
          .list-item{
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 2px;
            background: purple;
          }
          .list-item.odd{
            background: violet;
          }
          
    #help-pane{
      display:none;
      flex: 0 0 0px;
      background:red;
    }
    #help-pane.visible{
      display:inherit;
      flex:0 0 180px;
    }




&lt;!-- language: lang-html --&gt;

    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;div id=&quot;body&quot;&gt;
     &lt;div id=&quot;shell&quot;&gt;
          &lt;div id=&quot;left&quot;&gt;
              &lt;div id=&quot;nav&quot;&gt;
                - menu -
              &lt;/div&gt;
              &lt;div id=&quot;help-toggle&quot;&gt;
                help toggle
              &lt;/div&gt;
              &lt;div id=&quot;nav-toggle&quot;&gt;
                nav toggle
              &lt;/div&gt;
              &lt;div id=&quot;list-toggle&quot;&gt;
                list whitespace toggle
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id=&quot;mid&quot;&gt;
              &lt;div id=&quot;mid-top&quot;&gt;
                    - mid top -
              &lt;/div&gt;
              &lt;div id=&quot;mid-bottom&quot;&gt;
                   - mid bottom- &lt;br&gt;&lt;br&gt;
                   &lt;div id=&quot;list&quot;&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                   &lt;/div&gt;
                   &lt;hr&gt;
                   &lt;div id=&quot;secondlist&quot;&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item&quot;&gt;&amp;nbsp;&lt;/div&gt;
                     &lt;div class=&quot;list-item odd&quot;&gt;&amp;nbsp;&lt;/div&gt;
                   &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id=&quot;help-pane&quot; class=&quot;visible&quot;&gt;
       - help-pane -
     &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Content Type	Original Author	Original Content on Stackoverflow
Question	user1930845	View Question on Stackoverflow
Solution 1 - Html	sqe	View Answer on Stackoverflow
Solution 2 - Html	Sanuich	View Answer on Stackoverflow

Get rid of -webkit-padding-start: 40px

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Pyinstaller setting icons don't change

multipart/form-data vs application/octet-stream

Attributions