I noticed that there is no option for align self for flexbox containers within flexbox containers. This would be super helpful to have.
I am sorry, but I do not understand the statement. The image, that has been highlighted is a flex item within a flex container. As per Bootstrap:
Use
align-selfutilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis ifflex-direction: column). Choose from the same options asalign-items:start,end,center,baseline, orstretch(browser default).
That is exactly what is offered by Wappler:
Hi Ben, I was trying to align a flex container within a flex container. The image element itself is not relevant to the post, I just had to select it in order to show the flex item setting.
When I go to the flex container itself, it does not have the flex item properties such as align self
I have a faint suspicion that you are approaching this in a wrong direction. Is it possible to explain what you are trying to achieve? Possibly showing the code or a diagram?
Here I have a flex container with 2 texts - "Not a member yet?" and "Sign up." This flex container has a parent flex container that contains the rest of the elements. I added "align-self-center" class in the code to get the child flex container to show up in the center. However, the "align self" property is nowhere to be found in Wappler's flex container properties
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="wflogin" appConnect="local" -->
<div class="d-flex h-100">
<div class="d-flex left-wrapper flex-column">
<button id="btn1" class="btn text-white fit-content align-self-end mb-3"><i class="fas fa-home"></i> HOME</button>
<p class="welcome-text">WELCOME TO OUR PLATFORM</p>
<p class="text-white headline-text">Paragraph</p>
<div class="d-flex"><img src="/assets/images/wf-logo-login.png" class="img-fluid"></div>
</div>
<div class="d-flex align-items-center right-wrapper justify-content-center">
<div class="d-flex login-form-wrapper flex-column"><img src="/assets/images/Screenshot%202024-11-19%20121134.png" class="img-fluid align-self-center" width="152" height="41">
<p>Login</p>
<form id="form1">
<div class="form-group mb-3 row">
<label for="input1" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input1" name="input1" aria-describedby="input1_help" placeholder="Enter some text">
</div>
</div>
</form><button id="btn2" class="btn login-button">Next</button>
<div class="d-flex fit-content align-self-center">
<p class="fit-content align-self-start">Not a member yet?</p>
<p class="fit-content align-self-start fw-bold text-success">Sign up</p>
</div>
</div>
</div>
</div>
<meta name="ac:route" content="/wf-login">
This flex container here is the one that is missing the align self property in Wappler's settings
Try the following:
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-6">
<img src="/assets/images/Screenshot%202024-11-19%20121134.png" class="img-fluid d-block m-auto" width="152" height="41">
<h1 class="h5 mb-3">Login</h1>
<form id="frmLogin">
<div class="form-group mb-3 row">
<label for="input2" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input2" name="input2" aria-describedby="input2_help" placeholder="Enter some text">
</div>
</div>
<div class="d-flex justify-content-center mb-4">
<button id="btnSubmit" class="btn btn-primary">Next</button>
</div>
</form>
<p class="text-center mb-1">Not a member yet?</p>
<div class="d-flex justify-content-center">
<button id="btnSignup" class="btn btn-secondary">Sign Up</button>
</div>
</div>
</div>
</div>
Sorry, I don't think I was clear enough. The screenshot I added was how I wanted the site to look; I don't have a problem getting my site to look the way I want it to.
The problem is that I would like to click 1 time within the flex items section to speed up development time, rather than typing out "align-self-center" every time in the class section of the properties.
^ This property does not exist for flex containers. I would like to have this for flex containers, which is what the feature request is about
1 click is much faster than 1 click + typing, so that's why I added "'self-align' section in the flex containers" as a feature request, so all I would have to do is click once
Here I would have to click once to focus on the "class" input, then type "align-self-container" which is very time consuming when doing this hundreds or thousands of times
I am sorry to say, that the method that you are using, does not follow Bootstrap rules. I am not saying that it is incorrect, it is not Bootstrap.
Have a look at this document:
1 Like
Am I using Wappler wrong for using flex containers for everything? 
The problem with the paragraph is the auto added margin, you can inspect it and you can see theres mb=1px
If that is what you want to do, then you are wasting your money on Wappler. You are much better off using VSCode with its extensions.
The point of using Wappler, is its ability to (nearly automatically) create a semantic document that is readable by assistive technology and SEO. The core CSS framework is Bootstrap.
Have a look at this HTML5 outliner:
and compare that with what you have created.
Just saying.
Edit: To see an example of a top-level structured page, see:
I thought the point of Wappler was to have the speed of a visual development platform, but more control than a no-code platform
Something like this
I thought that would be their unique selling proposition, rather than readable assistive technology and SEO? 
Also, I don't understand what the HTML5 outliner has to do with what I made?
You’re absolutely right! Wappler does position itself as a powerful visual development tool that combines the speed of a no-code platform with the flexibility and control of hand-coding. This dual advantage is indeed one of Wappler’s unique selling propositions.
However, embracing semantic tags and considering accessibility and SEO doesn't take away from that core value. In fact, it enhances it:
- Enhanced Control: Semantic HTML gives developers more control over the structure and behavior of their web pages.
- Professionalism: Proper SEO and accessibility practices are part of delivering high-quality, professional web projects.
- User Experience: A well-structured website is easier for everyone to use, including those with disabilities.
So, while Wappler’s primary appeal is its blend of visual speed and coding flexibility, considering accessibility and SEO helps deliver a superior product that meets broader standards and provides a better user experience.
It’s all about leveraging these tools to create robust, accessible, and high-performing websites quickly and effectively.
Think about this: