Css clean-up for Wappler Design panel display bug ✅

My php code seems correct with the right set of <div> but my search bar is displayed outside its container.

Not sure what exactly are you reporting here? What is displayed outside exactly and why do you think it’s displayed outside?
Can you provide a link to your page where we can check this? Or paste your code here, much better than a screenshot of the code …

Is the class of the div meant to be container or container-md?

@bpj I removed md but still the search input field is displayed outside its container in Wappler design view mode.
@Teodor the live page looks good, but I just can’t work on fine tuning the css with a wrong display on wappler. The search bar appears outside its searchBar container. Here is the code (after removing md from the container):

<div class="container mt-3" id="searchBar">
            <div class="row mt-lg-3 style1 align-items-center justify-content-xxl-center justify-content-sm-center justify-content-center">
                <div>
                    <form id="searchTerm"><input id="searchInput" class="form-control rounded-pill mt-4" placeholder="Search a skill" is="dmx-autocomplete" type="text" name="search" noresultslabel=" Sorry no such keyword..." dmx-bind:data="keywordListServconn.data.qryFullKeywordList" optionvalue="keyword" optiontext="keyword" dmx-on:change="submitCheckboxes.reset()"></form>
                </div>
            </div>
    </div>
    

    <div class="mt-3 container-sm" id="checkbox">
            <div class="row">
                <div class="col">
                    <p class="text-xxl-center text-center text-light mb-0">Examples</p>
                </div>
            </div>
            <div class="row justify-content-center text-dark">
                <div>
                    <form id="submitCheckboxes">
                        <div id="input1_group" is="dmx-checkbox-group">
                            <legend></legend>
                            <div class="form-check form-check-inline" dmx-repeat:repeatcheckbox="keywordListServconn.data.qryRandKeywordList">
                                <input class="form-check-input" type="checkbox" dmx-bind:id="'checkbox' + $index" name="inputCheckbox[]" dmx-bind:value="keyword" dmx-on:click="searchTerm.reset()">
                                <label class="form-check-label col-form-label-sm pt-sm-0 pb-sm-2 pt-0" dmx-bind:for="'checkbox' + $index" id="checkboxLabel">{{keyword}}</label>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
    </div>

I see no issues in design view with this code.
Probably you have some custom styles applied / messing up with the design.

Looks OK here too - as @Teodor suggests it’s most likely something else on the page

Or any custom style applied.

Indeed I do have a style.css with plenty of customization and it all worked well yesterday.
Adding a column to a separate container this morning wrecked havoc everything. Insane.

.btn-primary {
  min-width: 130px !important;
  height: 35px !important;
  color: #fff !important;
  padding: 5px 10px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  display: inline-block !important;
  outline: none !important;
  border: none !important;
  vertical-align: middle !important;
  line-height: 1.5 !important;
  background-size: 120% auto !important;
  background-image: linear-gradient(10deg, #005987 0%, #68FBD0 100%) !important;
}
.btn-secondary {
  min-width: 130px !important;
  height: 35px !important;
  color: #fff !important;
  padding: 5px 10px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  display: inline-block !important;
  outline: none !important;
  border: none !important;
  vertical-align: middle !important;
  line-height: 1.5 !important;
  background-size: 120% auto !important;
  background-image: linear-gradient(10deg, #0093B8 0%, #07E0B5 100%) !important;
}
.btn-primary:hover {
  background-position: right center !important;
}
.btn-primary:active {
  top: 2px !important;
}
.bg-light {
  background-color: #ffffff00 !important; /* bg of checkbox window */
}
body {
  background: rgb(18, 29, 87);
  background: radial-gradient(
    circle,
    rgba(18, 29, 87, 1) 10%,
    rgba(5, 8, 25, 1) 50%
  ) !important; /* page bg color */
}
i.fas.fa-pen-square {
  color: blue;
}
.text-dark {
  color: #ffffffb0 !important; /* darker font */
}
.text-light {
  color: #FAFAFA !important; /* title font */
}

.bodyloggedin {
  /* for Dashboards Messaging */
  background-color: #ffffff1a;
  border-radius: 8px;
  width: 80%;
  padding: 0 5px 5px;
  float: right;
  clear: right;
}

.bodyother {
  /* for Dashboards Messaging */
  background-color: #ffffff2d;
  border-radius: 8px;
  width: 80%;
  padding: 0 5px 5px;
  float: left;
  clear: left;
}

.offer {
  /* for Dashboards Messaging */
  background-color: rgba(0, 172, 0, 0.411);
  border-radius: 8px;
  margin: 0;
  padding: 5px;
  clear: both;
}

.footer {
  background-color: rgba(18, 29, 87, 1);
}

@media (min-width: 1400px) {

.text-light {
    position: fixed;
  }
}

.style1 {
  float: right;
  margin-top: -160px;
}
  .style1 {
      float: right;
      margin-top: -160px;
    }

this float thing is breaking the layout.
Why are you using a float there? What are you trying to achieve?

BTW it’s also “broken” in the browser because of this float, not only in design view.

2 Likes

You’re the best, that’s why I’m bugging you. But you’ll be proud in the end! :wink: