[Resolved] Search Field Size reduced after using DIV tag

[Author]

Posts

[annaB-6]

Tell us what you are trying to do?

Question 2: I am facing problem using DIV tag on the Search field after using div it is getting shrunk. how to restore its 100% size. I am unable to increase search field width,

Code:
<----------------------------------------------------------------------------------------------------------------->
[wpv-filter-start hide="false"]
[wpv-filter-controls]

<div class="form-group">

<div class="form-group1">
<label class="label_name" for="wpv-post-search">[wpml-string context="wpv-views"]Search by Full Name [/wpml-string]</label>
[wpv-filter-search-box placeholder="Full Name" output="bootstrap" style="width: 100%;"]
<div class="btn_gap">[wpv-filter-submit output="bootstrap" class="btn-secondary"]</div>

</div>

<div class="form-group2">
<label class="label_name" for="wpv-wpcf-company-name">[wpml-string context="wpv-views"]Search by Company Name [/wpml-string]</label>
[wpv-control-postmeta type="textfield" field="wpcf-company-name" url_param="wpv-wpcf-company-name" placeholder="Company Name" style="width: 100%;"]
<div class="btn_gap">[wpv-filter-submit output="bootstrap" class="btn-secondary"]</div>
</div>

</div>

[wpv-filter-end]

<----------------------------------------------------------------------------------------------------------------->

CSS Code
<----------------------------------------------------------------------------------------------------------------->
.label-name {
color: white;
margin: auto;
}
.form-group {
display: flex;
align-items: stretch;
justify-content: center;

}

.form-group > div {
margin: 50px;
}

.form-group1 {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 15px;
}

.form-group1 > .label_name {
margin : 15px;
color: white;
}

.form-group1 > .btn_gap {
margin : 15px;
}

.form-group2 {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 15px;
}

.form-group2 > .label_name {
margin : 15px;
color: white;
}

.form-group2 > .btn_gap {
margin : 15px;
}

<----------------------------------------------------------------------------------------------------------------->

Please help me out where I am wrong.

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?
nalstudentloanadvisory.org

[Christian Cox]

I think we can close this duplicate ticket since I already split off a separate ticket: https://toolset.com/forums/topic/make-search-input-100-width/