The `float` property is ignored in a flex container.

*From the flexbox specification:*

&gt; [**3. Flex Containers: the `flex` and `inline-flex` display
&gt; values**](https://www.w3.org/TR/css-flexbox-1/#flex-containers)
&gt; 
&gt; A flex container establishes a new *flex formatting context* for its
&gt; contents. This is the same as establishing a block formatting context,
&gt; except that flex layout is used instead of block layout.
&gt; 
&gt; For example, floats do not intrude into the flex container, and the
&gt; flex container’s margins do not collapse with the margins of its
&gt; contents.
&gt;
&gt; `float` and `clear` do not create floating or clearance of flex item, and do not take it out-of-flow.

Instead, just use flex properties:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    footer {
        display: flex;
        justify-content: flex-end;
    }


&lt;!-- language: lang-html --&gt;

    &lt;footer&gt;
        &lt;span&gt;
           &lt;a&gt;foo link&lt;/a&gt;
        &lt;/span&gt;
    &lt;/footer&gt;


&lt;!-- end snippet --&gt;

If you have more items in the footer, and need other alignment options, then here are two guides:

 - https://stackoverflow.com/q/32551291/3597276
 - https://stackoverflow.com/q/42613359/3597276







It works if you add `margin-left: auto;` like I did here in the jsfiddle: https://jsfiddle.net/dhsgvxdx/3/

    &lt;body&gt;
        &lt;footer style=&quot;display: flex;&quot;&gt;
            &lt;span style=&quot;text-align: right;float: right; margin-left: auto;&quot;&gt;
                &lt;a&gt;foo link&lt;/a&gt;
            &lt;/span&gt;
        &lt;/footer&gt;
    &lt;/body&gt;

If this footer is only to contain a right-aligned item, you can simply apply `justify-content: flex-end` to the flex container. This way, you do not have to add any styles to its children.

    footer {
      display: flex;
      justify-content: flex-end;
    }

[Codepen example](http://codepen.io/anon/pen/AXZaok)

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

```
.item {
  order: 3; /* default is 0 */
}
```

I want to export a piece of html to a pdf file but i do not any compatible nuget package.

When I try to install anyone: &quot;X not compatible with netcoreapp1.0 (.NETCoreApp,Version=v1.0).&quot;

Does anyone know any way to export to a pdf using asp.net core??


Export html to pdf in ASP.NET Core

I want to store sensitive data locally in a React Native app.

Is the data only available to the app that wrote it?

Is React Native&#39;s Async Storage secure?

I want to position text (foo link) in right of the footer element.

I need footer display to remain `flex`.

But when I set it to `flex`, `float:right` for span doesn&#39;t work anymore.  



&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;footer style=&quot;display: flex;&quot;&gt;
         &lt;span style=&quot;text-align: right;float: right;&quot;&gt;
            &lt;a&gt;foo link&lt;/a&gt;
         &lt;/span&gt;
    &lt;/footer&gt;


&lt;!-- end snippet --&gt;

https://jsfiddle.net/dhsgvxdx/

float does not work in a flex container

I want to position text (foo link) in right of the footer element.
I need footer display to remain <code>flex</code>.
But when I set it to <code>flex</code>, <code>float:right</code> for span doesn't work anymore.


<pre><code class="hljs language-css">&#x3C;footer style="display: flex;">
 &#x3C;span style="text-align: right;float: right;">
 &#x3C;a>foo link&#x3C;/a>
 &#x3C;/span>
&#x3C;/footer>
</code></pre>

<a href="https://jsfiddle.net/dhsgvxdx/" target="_blank" rel="noopener noreferrer">https://jsfiddle.net/dhsgvxdx/</a>

When I&#39;m giving input type number the letter `e` and special charecters are also displaying in input field. I want to display only digits. How to block them?

    

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;input type=&quot;number&quot;&gt;

&lt;!-- end snippet --&gt;



How to block +,-,e in input type Number?

Is there a way to make HTML properly treat `\n` line breaks? Or I have to replace them with `&lt;br/&gt;`?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;text&quot;&gt;
      abc
      def
      ghi
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Line break in HTML with &#39;\n&#39;

In ReactJS, is there a way to determine if the website is being viewed on mobile or desktop? Because, depending on which device I would like to render different things.

Thank you

ReactJS: How to determine if the application is being viewed on mobile or desktop browser

I have a page with four images for the user to select. I want the user to be able to preview each image on the site before upload.

The JavaScript code below works for only one image but I would like it to work for multiple images uploaded via `&lt;input type=&quot;file&quot;&gt;`.

What will be the best way to do this?

    function readURL(input) {
        if (input.files &amp;&amp; input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $(&#39;#output&#39;).attr(&#39;src&#39;, e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(&quot;#file-input&quot;).change(function () {
        readURL(this);
    });
	
	
    
 

Preview images before upload

I want to send email with nodemailer using html template. In that template I need to inject some dynamically some variables and I really can&#39;t do that. My code:

    var nodemailer = require(&#39;nodemailer&#39;);
    var smtpTransport = require(&#39;nodemailer-smtp-transport&#39;);

    smtpTransport = nodemailer.createTransport(smtpTransport({
		host: mailConfig.host,
		secure: mailConfig.secure,
		port: mailConfig.port,
		auth: {
			user: mailConfig.auth.user,
			pass: mailConfig.auth.pass
		}
    }));
    var mailOptions = {
		from: &#39;my@email.com&#39;,
		to : &#39;some@email.com&#39;,
		subject : &#39;test subject&#39;,
		html : { path: &#39;app/public/pages/emailWithPDF.html&#39; }
	};
    smtpTransport.sendMail(mailOptions, function (error, response) {
		if (error) {
			console.log(error);
			callback(error);
		}
	});

Let&#39;s say I want in emailWithPDF.html something like this:

    Hello {{username}}!
I&#39;ve found some examples, where was smth like this:

    ...
    html: &#39;&lt;p&gt;Hello {{username}}&lt;/p&gt;&#39;
    ...
but I want it in separate html file. Is it possible?


 

Pass variable to html template in nodemailer

What is the best way to have a global css file in Vuejs for all components? (Default css like bg color, button styling, etc)

 - import a css file in the index.html
 - do `@import` in main component
 - put all the css in the main component (but that would be a huge file)

Best way to have global css in Vuejs

E.g. `@import url(&quot;~./foobar&quot;);`

Saw it [here](https://github.com/izaakschroeder/font-loader/blob/0e6a9c5c4098279cfd7274d018de2609b608e04a/example/test.css#L2), not sure if it&#39;s some package specific thing or if it&#39;s actual CSS syntax.

What does a `~` tilde in a CSS `url()` do?

I&#39;ve just run into a very weird problem that only shows up in Safari 10. I have playing cards, svg images, that are sometimes rotated using `transform:rotate(xdeg)`.

The card I&#39;m using has a red block pattern. When it&#39;s not rotated, or rotated at right angles, i.e. 90, 180, 270, then it looks normal. But, any other angle than that and the background pattern turns blue! I just got a report about this from one of my users and have never seen anything as weird. Other browsers all work normally, Safari 9 does it normally.

I&#39;m guessing this is just a really weird bug in Safari 10, but any ideas about how to work around it? I&#39;ve created a minimal repro at:

https://jsfiddle.net/2zv4garu/1/



SVG changes color when rotated in Safari 10

if I use `-webkit-overflow-scrolling` for a scrolling div, it scrolls perfectly with native momentum. But, div itself sometimes freezes and does not respond my finger moves. After 2-3 seconds later, it becomes again scrollable. 

I don&#39;t know how I am reproducing this problem. But, as I see there are two main behavior creates this situation. 

First, If I wait for a while, for instance, 20 seconds, and touch the div, it does not respond. I wait a couple of seconds, and it becomes working again.

Second, I touch several times quickly, and then, it becomes freezing, and again, after a couple of seconds later, it starts working again.

How can I prevent this freezing?

Div scrolling freezes sometimes if I use -webkit-overflow-scrolling

I&#39;m currently using CSS Modules with React for my styling. So each of my components is importing in it&#39;s component specific css file, like so:

    import React from &#39;react&#39;;
    import styles from &#39;./App.css&#39;;
    
    const example = () =&gt; (
      &lt;div className={styles.content}&gt;
        Hello World!
      &lt;/div&gt;
    );
    
    export default example;

This works fine when styling individual components, but how do I apply global styling (html, body, header tags, divs, etc.) that isn&#39;t component specific? 



How to apply global styles with CSS modules in a react app?

Is it possible to make a flex element ignore a child element so it&#39;s size does not affect the other elements?

For example, I have a wrapper with `display: flex`. It has a header, content, and footer.

    &lt;div class=&quot;wrapper&quot;&gt;
        &lt;header&gt;&lt;/header&gt;
        &lt;article&gt;&lt;/article&gt;
        &lt;footer&gt;&lt;/footer&gt;
    &lt;/div&gt;

I want the wrapper to ignore the header tag (the header will be fixed to the top of the window). The article will be set to `flex: 1` so it takes up the rest of the space, forcing the footer to the bottom of the page. Here is some sample CSS:

    .wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-top: 50px; /* Accounts for header */
    }
    
    header {
        height: 50px;
        position: fixed;
        top: 0;
        width: 100%;
    }
    
    article {
        flex: 1;
    }
    
    footer {
        height: 50px;
    }

I know I could just move the header outside of the wrapper but I have a lot of existing code that will make that a bit more difficult. Is what I am asking even possible?

Make flex element ignore child element

I have flex container with items inside. How to detect flex wrap event? I want to apply some new css to elements that have been wrapped. I suppose that it is impossible to detect wrap event by pure css. But it would be very powerful feature! I can try to &quot;catch&quot; this break point event by media query when element wraps into new line/row. But this is a terrible approach. I can try to detect it by script, but it&#39;s also not very good.

![Look at the picture][1]

I am very surprised, but simple $(&quot;#element&quot;).resize() doesn&#39;t work to detect height or width changes of flex container to apply appropriate css to child elements. LOL.

I have found that only this example of jquery code works
https://stackoverflow.com/questions/18743144/jquery-event-listen-on-position-changed

But still terribly.


  [1]: https://i.stack.imgur.com/9Ctum.jpg

How to detect CSS flex wrap event

I have a container `&lt;div&gt;` with `display: flex`. It has a child `&lt;a&gt;`.  

How can I make the child appear &quot;inline&quot;? 

Specifically, how can I make the child&#39;s width determined by its content, and not expand to the width of the parent?

**What I tried:** 

I set the child to `display: inline-flex`, but it still took up the full width. I also tried all other display properties, but nothing had an effect. 

**Example:** 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .container {
      background: red;
      height: 200px;
      flex-direction: column;
      padding: 10px;
      display: flex;
    }
    a {
      display: inline-flex;
      padding: 10px 40px;
      background: pink;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;Test&lt;/a&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

http://codepen.io/donpinkus/pen/YGRxRY



Make flex items take content width, not width of parent container

I am trying to have a number of items underneath each other in a container with a set height. Items will then carry on next to each other if there&#39;s no space left.

This is the idea:

[![][1]][1]

I am trying to achieve this using flexbox, a container with a set height, direction is set to `column` and `flex-wrap` is `wrap`:

The issue is that there are wide gaps between the columns.

[![enter image description here][2]][2]

I tried setting both `justify-content` and `align-items` to `flex-start`, but that is probably the default value.

Is there any way to solve this?

Here is the code:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    * {
      box-sizing: border-box;
    }
    body {
      font-family: sans-serif;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      height: 300px;
      flex-direction: column;
      background-color: #ccc;
    }
    .items {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: tomato;
      color: white;
      font-size: 60px;
      font-weight: bold;
      text-align: center;
      padding: 15px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;items&quot;&gt;1&lt;/div&gt;
      &lt;div class=&quot;items&quot;&gt;2&lt;/div&gt;
      &lt;div class=&quot;items&quot;&gt;3&lt;/div&gt;
      &lt;div class=&quot;items&quot;&gt;4&lt;/div&gt;
      &lt;div class=&quot;items&quot;&gt;5&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


 [codepen](http://codepen.io/semajtwin/pen/WoXMWJ)


  [1]: https://i.stack.imgur.com/1qL38.jpg
  [2]: https://i.stack.imgur.com/clEIi.png

Remove space (gaps) between multiple lines of flex items when they wrap

I want to make a `div` stick on the top of the screen without any influence to other elements, and its child element in the center.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

     .parent {
       display: flex;
       justify-content: center;
       position: absolute;
     }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;parent&quot;&gt;
      &lt;div class=&quot;child&quot;&gt;text&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

When I add the `position: absolute` line, `justify-content: center` becomes invalid. Do they conflict with each other and, what&#39;s the solution?

**EDIT**

Thanks guys it&#39;s the problem of parent width. But I&#39;m in React Native, so I can&#39;t set `width: 100%`. Tried `flex: 1` and `align-self: stretch`, both not working. I ended up using [Dimensions][1] to get the full width of the window and it worked.

**EDIT**

As of newer version of React Native (I&#39;m with 0.49), it accepts `width: 100%`.


  [1]: https://facebook.github.io/react-native/docs/dimensions.html

Content Type	Original Author	Original Content on Stackoverflow
Question	mlibre	View Question on Stackoverflow
Solution 1 - Html	Michael Benjamin	View Answer on Stackoverflow
Solution 2 - Html	D.Soderberg	View Answer on Stackoverflow
Solution 3 - Html	alanbuchanan	View Answer on Stackoverflow
Solution 4 - Html	user8331407	View Answer on Stackoverflow

float does not work in a flex container

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Is React Native's Async Storage secure?

Export html to pdf in ASP.NET Core

Attributions