You could use `margin-left: auto` on `right` element instead. Also when you use `display: flex` on parent element `display: inline-block` on child elements is not going to work.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .row {
      border: 1px solid black;
      display: flex;
      align-items: center;
    }
    .left,
    .right {
      background-color: yellow;
    }
    .right {
      margin-left: auto;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;row&quot;&gt;
      &lt;!--&lt;div class=&quot;left&quot;&gt;left&lt;/div&gt;--&gt;
      &lt;div class=&quot;right&quot;&gt;right&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



I am new to Django and didn&#39;t find any reference regarding this issue. I am getting this error when i use many to many field in Django model (`models.py`). I guess the issue is assigning m2m field in view(`views.py`) from form(`forms.py`). 

How to assign m2m field in view?
(`Django version 2.0`, `python - 3.5`)

**models.py**
   
    class User(AbstractUser):
     username=models.CharField(max_length=20)
     email = models.EmailField(_(&#39;email address&#39;), unique=True)
 

    class Setupuser(models.Model):
     organization=models.CharField(max_length=200,blank=False,null=True)
     emails_for_help = models.ManyToManyField(User)


**views.py**
    
    class Set_user(FormView):
     template_name=&quot;pkm_templates/set_up_user.html&quot;
     form_class = Set_User_Form
     success_url = &#39;/thanks/&#39;

     def form_valid(self, form):
        org = form.cleaned_data.get(&#39;organization&#39;)
        emails = form.cleaned_data.get(&quot;emails_for_help&quot;)
        instance = Setupuser(organization=org,emails_for_help=emails)
        instance.save()
        return redirect(&quot;/&quot;)
**forms.py**

    class Set_User_Form(ModelForm):
      emails_for_help = forms.ModelMultipleChoiceField(
        queryset=User.objects.all(),
        widget=forms.CheckboxSelectMultiple
      )
     
      class Meta:
        model = Setupuser
        fields = [&quot;organization&quot;,&quot;emails_for_help&quot;]



Direct assignment to the forward side of a many-to-many set is prohibited. Use emails_for_help.set() instead

The following is what I want to disable: 

[![\[js\] File is a CommonJS module; it may be converted to an ES6 module.][1]][1]

I can&#39;t find it in settings.  
Help appreciated as this is really annoying.  


  [1]: https://i.stack.imgur.com/Xo2sA.png

How do I disable: [js] File is a CommonJS module; it may be converted to an ES6 module

I have a layout where *sometimes* the &#39;left&#39; item is missing. In such cases, I still want the &#39;right&#39; item to be right-aligned.

I thought I could do this with `justify-self` but that doesn&#39;t appear to be the case.

Is there a flexbox property for right-aligning one&#39;s self?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .row {
      border: 1px solid black;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .left,
    .right {
      display: inline-block;
      background-color: yellow;
    }

    .right {
      justify-self: flex-end;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;row&quot;&gt;
      &lt;!--&lt;div class=&quot;left&quot;&gt;left&lt;/div&gt;--&gt;
      &lt;div class=&quot;right&quot;&gt;right&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



flexbox justify-self: flex-end not working?

I have a layout where sometimes the 'left' item is missing. In such cases, I still want the 'right' item to be right-aligned.
I thought I could do this with <code>justify-self</code> but that doesn't appear to be the case.
Is there a flexbox property for right-aligning one's self?


<pre><code class="hljs language-scss">.row {
 border: 1px solid black;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.left,
.right {
 display: inline-block;
 background-color: yellow;
}

.right {
 justify-self: flex-end;
}
</code></pre>

<pre><code class="hljs language-php-template">&#x3C;div class="row">
 &#x3C;!--&#x3C;div class="left">left&#x3C;/div>-->
 &#x3C;div class="right">right&#x3C;/div>
&#x3C;/div>
</code></pre>

I have two grids nested within a grid. Unfortunately the right nested grid `.grid-3` sets the height of the rows so that both the left and right grid are the same height, the extra space is shared among the divs with the class `.right`. How can I set the rows of the right nested grid to adjust to the size of the content, so they are the same height as the left nested rows? 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div {
      border: 1px dotted black;
    }
    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows auto;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-rows auto;
    }

    .left {
      background-color: red;
    }
     
    .right {
      background-color: green;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;grid-2&quot;&gt;
          &lt;div class=&quot;grid-2&quot;&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
            &lt;div class=&quot;left&quot;&gt;L&lt;/div&gt;
         &lt;/div&gt;
         &lt;div class=&quot;grid-3&quot;&gt;
             &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
            &lt;div class=&quot;right&quot;&gt;R&lt;/div&gt;
         &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



CSS Grid - Auto height rows, sizing to content

I am wondering why the browser shows double open quotes only for the first element. The second element has single quotes instead.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    a::before {
      content: open-quote;
    }

&lt;!-- language: lang-html --&gt;

    &lt;a href=&quot;http://www.google.com&quot;&gt;Google&lt;/a&gt; &lt;br&gt;
    &lt;a href=&quot;http://www.amazon.com&quot;&gt;Amazon&lt;/a&gt;

&lt;!-- end snippet --&gt;



Why are double quotes shown only for the first element?

Consider the following SCSS:

    $color-black: #000000;

    body {
        --color: $color-black;
    }


When it is compiled with node-sass **version 4.7.2**, it produces following CSS:

    body {
        --color: #000000; 
    }

When I compile the same SCSS with version **4.8.3 or higher**, it produces following:

    body {
        --color: $color-black; 
    }

**What am I missing?** I checked release logs, but could not found anything useful. Also, I wonder if this change is genuine why does it have only minor version change? Should it not be a major release?

Also, **what is my alternative?** Should I use **Interpolation**?

Unable to set SCSS variable to CSS variable?

I am trying to learn material ui. I want to enlarge the text field on my page. However, the styles i embed with the field changes height, width and other properties except the size. Following is my code:

    const styles = {
    container: {
        display: &#39;flex&#39;,
        flexWrap: &#39;wrap&#39;,
    },
    textField: {
        // marginLeft: theme.spacing.unit,
        // marginRight: theme.spacing.unit,
        width: 300,
        margin: 100,
        fontSize: 50 //??? Doesnt work
    }
    }

Following is the stateless component(React):

    const Searchbox = (props) =&gt; {
        
        const { classes } = props;

        return (
            &lt;TextField
                onKeyDown={props.onKeyDown}
                id=&quot;with-placeholder&quot;
                label=&quot;Add id&quot;
                placeholder=&quot;id&quot;
                className={classes.textField}
                margin=&quot;normal&quot;
                autoFocus={true}
                helperText={&quot;Add an existing id or select &quot;}
            /&gt;
        );
    };

    export default withStyles(styles)(Searchbox);

I totally understand there is no rocket science as its a straightforward CSS in JS approach of applying styles.

However, I cannot override the base font size for my text field. Any help will be appreciated




Cannot change font size of text field in material ui

How can I use *cursor: not-allowed* on ***button*** or ***a***? I tried the following:

    .not-allowed {
         pointer-events: auto! important;
         cursor: not-allowed! important;
    }

My button looks like this:

    &lt;a class=&quot;btn btn-primary btn-lg disabled not-allowed&quot; href=&quot;https://www.example.com&quot; role=&quot;button&quot;&gt;Test&lt;/a&gt;

Without the pointer-events is activated, the cursor can not be changed. But if ***pointer-events: auto***, the ***button*** or ***a*** is clickable. If the ***pointer-events: none*** the cursor doesn&#39;t change.

Please help me, I despair!

How can I change cursor for disabled &lt;button&gt; or &lt;a&gt; in Bootstrap 4?

When I use the css property `align-items`, I cannot see any visual difference with the value of `flex-end` or value of `end`.

What is the difference between `align-items: end` and `align-items: flex-end`?

Difference between flex-end and end?

This is only an issue in Safari and looks like a Safari bug to me. Here is a [**fiddle**](https://jsfiddle.net/0scrgd9j/) with a simplified version of the issue.

When an image is in a nested flexbox element with a width set and `height: auto` it is being stretched... the auto height is not working. Does something extra need to be added for this to work in Safari?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .container {
      display: flex;
      flex-direction: column;
    }

    .container section:first-child {
      display: flex;
      margin-bottom: 25px;
    }

    .container img {
      width: 125px;
      height: auto;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;section&gt;
        &lt;img src=&quot;https://via.placeholder.com/250&quot;&gt;
      &lt;/section&gt;
      &lt;section&gt;
        &lt;img src=&quot;https://via.placeholder.com/150&quot;&gt;
      &lt;/section&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

I expect the height of the image to automatically be adjusted to maintain aspect ratio. This works in all browsers except Safari. In Safari the image is stretched and the auto height does not work.

Content Type	Original Author	Original Content on Stackoverflow
Question	mpen	View Question on Stackoverflow
Solution 1 - Css	Nenad Vracar	View Answer on Stackoverflow

flexbox justify-self: flex-end not working?

Css Problem Overview

Css Solutions

Solution 1 - Css

How do I disable: [js] File is a CommonJS module; it may be converted to an ES6 module

Direct assignment to the forward side of a many-to-many set is prohibited. Use emails_for_help.set() instead

Attributions