'how can i make the field looks mandatory using HTML and CSS

I want to make a field mandatory but the *required in red color is coming below the field name which i want just beside to field name

here is the HTML code

<div class="span12" id="propertytype">
    {% for field1 in propertytypeform %}   
    <p>
        <label> {{ field1.label_tag }}
            {% if field1.field.required %}
            <span class="required-field">*Required</span>
            {% endif %}
        </label>
        &nbsp;&nbsp;&nbsp; {{ field1 }} <br />
        { field1.errors }}
    </p>
    {% endfor %}                            
</div>

CSS file

.required-field{
    color:red;  
    font-size:8px;
    /*position:absolute;
    top:-50;*/
}
htmlcssdjango


Solution 1:[1]

<div class="field">
  <div class="fieldname">UserName<span class="mandatory">*</span></div></div>

Now you write the css code for class name mandatory

<style>
   .mandatory{color:red;}</style>

Solution 2:[2]

The render of : {{ field1.label_tag }} is made by a <p> tag. A <p> tag is a block tag in HTML so it take 100% of the width of the page. So there is no place next to the field {{ field1.label_tag }} and so it displays the rest on the next line.

It's only a CSS issue.

What you can do is :

<span class="field">{{ field1.label_tag }}</span>

.field p {
  width: 200px;
}

This is for the example but I recommand you to use <div> to adjust the width of <p>

Solution 3:[3]

You can also use display:flex to get all the content in a same line inside a tag. So can you once use a following code I hope it will help you.

#propertytype p label {
    display: flex;
}

And if you want to learn more about flex property then visit here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Prabin Sapal

Related Questions