Hi there,
Is it possible to remove the outline around the containers (marked in red)?
Thank you.
Can you post your code for your container? Looks like you might have a background color set to bg-danger or something.
1 Like
Thank you Brad for your help and for the Teodor tip about posting code.
The red line was drawn by me to show the outline.
<!doctype html>
<html>
<head>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>su_x</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css" />
<script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
</head>
<body is="dmx-app" id="index">
<header class="bg-dark fixed-top shadow-sm mb-4">
<div class="container bg-dark shadow-none">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid ps-2 pe-2">
<a class="navbar-brand me-4" href="#">
<img src="assets/images/logo_base_lx.svg" class="img-fluid" width="400"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active pb-1" aria-current="page" href="#">Início</a>
</li>
<li class="nav-item">
<a class="nav-link pb-1" href="#">Utilizador</a>
</li>
<li class="nav-item">
<a class="nav-link pb-1" href="#">FAQS</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2 style5 form-control-sm" type="search" placeholder="Processo nº" aria-label="Search">
<button class="btn btn-outline-secondary pt-1 pb-1 style4" type="submit">Consultar</button>
</form>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
<main class="mt-xxl-4 pt-xxl-5">
<div class="container">
<div class="row">
<div class="col">
<img src="assets/images/caixa.jpg" class="img-fluid">
</div>
</div>
</div>
<div class="container">
<div class="row mt-0 mb-0">
<div class="col mt-3 mb-0 pt-0 pb-0">
<nav class="navbar navbar-expand-lg navbar-light mt-0 mb-0 pt-0 pb-0 ps-0 pe-0 bg-primary">
<div class="container-fluid border-0 rounded-0 mt-n5 mb-0 ms-0 me-0 pt-0 pb-0 ps-0 pe-0">
<span class="navbar-text mt-0 mb-0 ms-auto">
<img src="assets/images/pipe.JPG" height="35" width="1" class="mt-0 mb-0">
</span><span class="navbar-text small text-light style9 mt-0 mb-0 ms-1 me-2 pt-0 pb-0 ps-2 pe-2"><i class="fas fa-question"></i></span>
<span class="navbar-text mt-0 mb-0">
<img src="assets/images/pipe.JPG" height="35" width="1" class="mt-0 mb-0">
</span>
<span class="navbar-text d-none d-sm-block d-md-block small text-light style8 mt-0 mb-0 ms-2 me-0 pt-0 pb-0 ps-1 pe-1"><i class="fas fa-search"></i>
</span>
<span class="navbar-text mt-0 mb-0 pt-0 pb-0">
<img src="assets/images/pipe.JPG" height="35" width="1" class="mt-0 mb-0 pt-0 pb-0">
</span><span class="navbar-text d-none d-sm-block d-md-block small text-light style7 mt-0 mb-0 me-1 pt-0 pb-0 ps-1 pe-1"><i class="fas fa-user"></i> </span>
<span class="navbar-text mt-0 mb-0 pt-0 pb-0">
<img src="assets/images/pipe.JPG" height="35" width="1" class="mt-0 mb-0 pt-0 pb-0">
</span><span class="navbar-text d-none d-sm-block d-md-block small text-light style6 mt-0 mb-0 me-2 pt-0 pb-0 ps-1 pe-1">
<i class="fas fa-times"></i> </span>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row mt-0 mb-0">
<div class="col mt-3 mb-0 pt-0 pb-0">
<nav class="navbar navbar-expand-lg navbar-light mt-0 mb-0 pt-0 pb-0 ps-0 pe-0 bg-primary">
<div class="container-fluid border-0 rounded-0 mt-n5 mb-0 ms-0 me-0 pt-0 pb-0 ps-0 pe-0">
<span class="navbar-text mt-0 mb-0 ms-auto">
<img src="assets/images/pipe.JPG" height="35" width="1" class="mt-0 mb-0">
</span><span class="navbar-text small text-light style9 mt-0 mb-0 ms-1 me-2 pt-0 pb-0 ps-2 pe-2"><i class="fas fa-question"></i></span>
</div>
</nav>
</div>
</div>
</div>
<div class="ps-3 container">
<hr class="my-5" />
</div>
</main>
<footer class="wappler-block bg-primary">
<div class="container bg-primary mt-3">
<div class="row bg-primary">
<div class="col bg-primary mt-4 mb-5 pb-4">
<nav class="navbar navbar-expand-lg navbar-light p-0 bg-primary">
<div class="container-fluid ps-3">
<span class="navbar-text p-2 d-none d-sm-block d-md-block small text-light"><img src="assets/images/logo_footer_lox.SVG" class="img-fluid" width="400" wappler-command="updateImage"></span>
<span class="navbar-text p-2 d-none d-sm-block d-md-block small ms-auto text-light">© Copyright 2022. All Rights Reserved.</span>
</div>
</nav>
</div>
</div>
</div>
</footer>
<script src="bootstrap/5/js/bootstrap.min.js"></script>
</body>
</html>
Thank you Teodor for the tip.
The red line was drawn by me to show the outline.
So the red line was drawn by you? I’m not sure what outline you are meaning then. Can you provide a link to the page? Does the outline show up in a browser or just in Wappler?
1 Like
As i explained in my post - the outlines and help lines can be controlled in the General settings > Design View.
1 Like
Sorry are you talking about the help lines in Design view or something else?
1 Like
Select your container and set your padding settings to 0.
1 Like
I tried this Brad. Maybe I´m not doing it right.
Something else Teodor. I tried to remove the Margins to allow the vertical white lines to contact the borders.
Maybe provide a link to your page where we can see what do you mean.
You missed a padding 0 on one of your Navbar texts with an image inside and the very first Navbar text also is the same
1 Like
This is the container inside the Navbar if you are struggling to find the padding you can try just copy paste this:
<div class="container-fluid border-0 rounded-0 mt-n5 mb-0 ms-0 me-0 pt-0 pb-0 ps-0 pe-0">
<span class="navbar-text mt-0 mb-0 ms-auto pt-0 pb-0">
<img src="assets/images/pipe.JPG" height="35" width="1" class="mt-0 mb-0">
</span><span class="navbar-text small text-light style9 mt-0 mb-0 ms-1 me-2 pt-0 pb-0 ps-2 pe-2"><i class="fas fa-question"></i></span>
<span class="navbar-text mt-0 mb-0 pt-0 pb-0">
<img src="assets/images/pipe.JPG" height="35" width="1" class="mt-0 mb-0">
</span>
<span class="navbar-text d-none d-sm-block d-md-block small text-light style8 mt-0 mb-0 ms-2 me-0 pt-0 pb-0 ps-1 pe-1"><i class="fas fa-search"></i>
</span>
<span class="navbar-text mt-0 mb-0 pt-0 pb-0">
<img src="assets/images/pipe.JPG" height="35" width="1" class="mt-0 mb-0 pt-0 pb-0">
</span><span class="navbar-text d-none d-sm-block d-md-block small text-light style7 mt-0 mb-0 me-1 pt-0 pb-0 ps-1 pe-1"><i class="fas fa-user"></i> </span>
<span class="navbar-text mt-0 mb-0 pt-0 pb-0">
<img src="assets/images/pipe.JPG" height="35" width="1" class="mt-0 mb-0 pt-0 pb-0">
</span><span class="navbar-text d-none d-sm-block d-md-block small text-light style6 mt-0 mb-0 me-2 pt-0 pb-0 ps-1 pe-1">
<i class="fas fa-times"></i> </span>
</div>
1 Like
The navbar-text elements you are using have default padding top and bottom:
.navbar-text {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
so you can override this in your custom css css/style.css:
.navbar-text {
padding-top: 0;
padding-bottom: 0;
}
make sure to include it after the bootstrap css in the page head tags.
1 Like
Thank you for the tip Sorry_Duh
Great Tip Teodor.
Thank you for your great help. Problem fixed su_x (atomdel.pt)
In DW it was easy find the bootstrap defaults. In Wappler this part isn´t indented…
Do you have any suggestions?
Thank you all for the effort to help me to give this first steps.
