CODEWITHSUNDEEP
htmlcssflexbox
Kyle Calica-St
Kyle Calica-St

Reputation: 2933

Flexbox align a child element with it's parent's sibling

Not a huge deal but posed an interesting question for me so curious how I can do it I have a basic form here:

[![enter image description here][1]][1] [1]: https://i.sstatic.net/7HAnU.png

As you can see my error messages's left side does not line up with the edge of the input labels. How can I get a child element to align with it's parent's sibling using flexbox?

Here's a simplified version of the issue:

<div class="flex-container"> 
  <div class="inputs"> 
    <label> input1 </label> 
     <input />
  <div> 
  <ul> <li> errors </i> </ul> 
  <div class="inputs"> 
    <label> input1 </label> 
     <input />
  <div> 
<div>

where:

.flex-container {
  display: flex;
  flex-direction: column; 
  margin: auto; 
}
.inputs {
  margin: auto; 
}

Now as you can see the ul actually does align BUT the internal items li do not align. I'm trying to do this without pixel pushing (manually moving using margin or padding). But I also have no choice in how the errors come out meaning I have to use <ul> and <li> elements.

I am using Django templates and this is my code:

<style>
    .errorlist {
        list-style-type: none;
        display: flex;
        padding: 0;
        justify-content: space-around;
    }
</style>
<div style="padding:25px;text-align: center;">

<p>{% translate "Please enter your new password twice so we can verify you typed it in correctly." %}</p>

<form method="post">{% csrf_token %}
<fieldset class="module aligned" style="margin-bottom:15px;margin-left:auto;margin-right:auto">
    <input style="display: none;" class="hidden" autocomplete="username" value="{{ form.user.get_username }}">
    <div style="margin:auto;display:flex;flex-direction: column;">

        <div class="form-row field-password1" style="display:block;">
            <div style="text-align:left;color:red;list-style-type: none;">{{ form.new_password1.errors }}</div>
            <div>
              <label for="id_new_password1">{% translate 'New password:' %}</label>
             {{ form.new_password1 }}
            </div>
        </div>

        <div class="form-row field-password2" style="display:block;">
            <div style="text-align:left;color:red;list-style-type: none;">{{ form.new_password2.errors }}</div>
            <div>
                <label for="id_new_password2">{% translate 'New password:' %}</label>
               {{ form.new_password2 }}
            </div>
        </div>

         <input style="display: block; width: 200px;margin-top:25px;margin:auto;color:white;" type="submit" value="{% translate 'Change my password' %}">
    </div>
</fieldset>
</form>

Upvotes: 1

Views: 1276

Answers (1)

David Sainez
David Sainez

Reputation: 6956

Flexbox can only align flex items, which are defined as the direct children of a flexbox container:

The direct children of a Flex Container (elements with display: flex or display: inline-flex set on them) become flex items.

The spacing issue in this case is a product of ul styling, not flexbox. Since you have no control over the list, you can remove any offsets it introduces:

ul.errors {
    padding: 0;
    list-style-type: none;
}

where your error list would look something like this:

<ul class="errors>
    <li> error1 </li>
    <li> error2 </li>
</ul>

Upvotes: 1

Related Questions