So I'm struggling to keep items within an LI element inline. each
when the label is too long, the text wraps to the next line. I've tried different display display properties with no luck.
Heres an e.g. of what i'm going for
here's a pen of my attempts so far.
Thanks so much for the help it's really appreciated
and yes I'm struggling to get this snippet working... please excuse this
Here the follwing code:
<!DOCTYPE html>
<html>
<head>
<title>Gateshead Maps</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<style>
input[type=checkbox],
input[type=radio] {
/* keeping layer checkboxes and patches inline */
vertical-align: middle;
position: relative;
bottom: .08em;
/* this is a better value for different fonts! */
left: 5px;
right: 5px;
width: 15px;
height: 15px;
}
svg {
vertical-align: middle;
position: relative;
bottom: .08em;
margin-left: 20px;
}
label {
padding-left: 12px;
font-weight: 600;
color: #383636;
flex-wrap: wrap;
display: inline;
position: center;
text-align: center;
margin-left:
}
.overflow {
padding-right: 10px;
}
.btn-toggle {
display: inline-flex;
align-items: center;
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
background-color: transparent;
}
.btn-toggle:hover,
.btn-toggle:focus {
color: rgba(0, 0, 0, .85);
background-color: #e3e4e4;
}
.btn-toggle::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg
xmlns='http://www.w3.org/2000/svg'width='16'height='16'viewBox='0 0 16 16'%3e%3cpath fill='none'stroke='rgba%280,0,0,.5%29'stroke-linecap='round'stroke-linejoin='round'stroke-width='2'd='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
transform-origin: .5em 50%;
}
.btn-toggle[aria-expanded="true"] {
color: rgba(0, 0, 0, .85);
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
}
.btn-toggle-nav a {
display: inline-flex;
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: 1.25rem;
text-decoration: none;
}
.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
background-color: #cac9c9;
}
.btn-toggle-nav a {
width: 200px;
}
html, body {
overflow:hidden;
}
.fw-semibold {
font-weight: 600;
}
.lh-tight {
line-height: 1.25;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!-- sidebar start -->
</head>
<body>
<i class="bi bi-layers" style="font-size: 1.5em; padding-right:10px"></i>
<span class="fs-5 fw-semibold">Layers</span>
<ul class="list-unstyled ps-0">
<li class="border-top my-0"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false"> Natural Environment </button>
<div class="collapse show" id="dashboard-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li>
<svg width="25" height="15">
<rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(25, 67, 207)" />
</svg>
<input class="list_item" data-id="78" type="checkbox">
<label> SSSI </label>
</li>
<li>
<svg width="25" height="15">
<rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(2, 68, 32)" />
</svg>
<input class="list_item" data-id="78" type="checkbox">
<label> Local Nature Reserve </label>
</li>
<li>
<svg width="25" height="15">
<rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(7, 155, 86)" />
</svg>
<input class="list_item" data-id="78" type="checkbox">
<label> Green Corridors </label>
</li>
<li>
<svg width="25" height="15">
<rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(14, 146, 54)" />
</svg>
<input class="list_item" data-id="78" type="checkbox">
<label> Woodland </label>
</li>
<li>
<svg width="25" height="15">
<rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(75, 143, 12)" />
</svg>
<input class="list_item" data-id="78" type="checkbox">
<label> Woodland CAST</label>
</li>
<li>
<svg width="25" height="15">
<rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(10, 131, 64)" />
</svg>
<input class="list_item" data-id="78" type="checkbox">
<label> Wildlife Sites </label>
</li>
<li>
<svg width="25" height="15">
<rect width="25" height="15" style="fill:rgb(245, 244, 244);stroke-width:5;stroke:rgb(6, 43, 7)" />
</svg>
<input class="list_item" data-id="78" type="checkbox">
<label> Woodland Creation Sites long for test </label>
</li>
</ul>
</div>
</li>
<li class="border-top my-0"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false"> Orders </button>
<div class="collapse show" id="orders-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li>
<a href="#" class="link-dark rounded">New</a>
</li>
<li>
<a href="#" class="link-dark rounded">Processed</a>
</li>
<li>
<a href="#" class="link-dark rounded">Shipped</a>
</li>
<li>
<a href="#" class="link-dark rounded">Returned</a>
</li>
</ul>
</div>
</li>
<li class="border-top my-0"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false"> Account </button>
<div class="collapse show" id="account-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li>
<a href="#" class="link-dark rounded">New...</a>
</li>
<li>
<a href="#" class="link-dark rounded">Profile</a>
</li>
<li>
<a href="#" class="link-dark rounded">Settings</a>
</li>
<li>
<a href="#" class="link-dark rounded">Sign out</a>
</li>
</ul>
</div>
</li>
<li class="border-top my-0"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#histenv-collapse" aria-expanded="false"> Historic Environment </button>
<div class="collapse show" id="histenv-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li>
<svg width="20" height="13">
<rect width="20" height="13" style="fill:rgb(151, 16, 16);stroke-width:5;stroke:rgb(255,153,0)" />
</svg>
<input class="list_item" data-id="78" type="checkbox"> Commercial and i like to be crazy indeed woith it test </label>
</li>
<li>
<a href="#" class="link-dark rounded">Weekly</a>
</li>
<li>
<a href="#" class="link-dark rounded">Monthly</a>
</li>
<li>
<a href="#" class="link-dark rounded">Annually</a>
</li>
</ul>
</div>
</li>
<li class="border-top my-0"></li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#openspace-collapse" aria-expanded="false"> Open Space </button>
<div class="collapse show" id="openspace-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li>
<svg width="20" height="13">
<rect width="20" height="13" style="fill:rgb(151, 16, 16);stroke-width:5;stroke:rgb(255,153,0)" />
</svg>
<input class="list_item" data-id="78" type="checkbox"> Commercial and i like to be crazy indeed woith it test </label>
</li>
<li>
<a href="#" class="link-dark rounded">Weekly</a>
</li>
<li>
<a href="#" class="link-dark rounded">Monthly</a>
</li>
<li>
<a href="#" class="link-dark rounded">Annually</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>tried many different alignment properties with little success.