How to make make a container with a wrapping layout? #2013
-
|
Using the However, say, I want to use buttons with text instead, since the texts can have arbitrary width, is there a way I can retrieve the length of each button? Maybe another approach is necessary? Here's a demo in HTML of what I am trying to recreate in iced.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wrapping demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="tag">Lorem</div>
<div class="tag">ipsum</div>
<div class="tag">dolor</div>
<div class="tag">sit</div>
<div class="tag">amet</div>
<div class="tag">consectetur</div>
<div class="tag">adipisicing</div>
<div class="tag">elit.</div>
<div class="tag">Nam</div>
<div class="tag">eligendi</div>
<div class="tag">beatae</div>
<div class="tag">veniam!</div>
<div class="tag">Nesciunt</div>
<div class="tag">inventore</div>
<div class="tag">veniam</div>
<div class="tag">magnam</div>
<div class="tag">sed</div>
<div class="tag">illum</div>
<div class="tag">molestiae</div>
<div class="tag">nisi,</div>
<div class="tag">amet</div>
<div class="tag">dolor.</div>
<div class="tag">Cumque</div>
<div class="tag">alias,</div>
<div class="tag">suscipit</div>
<div class="tag">iste</div>
<div class="tag">a</div>
<div class="tag">illum</div>
<div class="tag">ad</div>
<div class="tag">quisquam?</div>
</div>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
#container {
display: flex;
flex-wrap: wrap;
width: 50%;
}
.tag {
margin: 0 5px 5px 0;
padding: 5px;
background-color: #ccc;
font-weight: bold;
border-radius: 3px;
}
</style>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
Inside of the text class, I see this method which seems to calculate the length of the text inside: |
Beta Was this translation helpful? Give feedback.
-
|
you can also use https://docs.rs/iced_aw/latest/iced_aw/native/wrap/index.html widget from iced_aw |
Beta Was this translation helpful? Give feedback.
you can also use https://docs.rs/iced_aw/latest/iced_aw/native/wrap/index.html widget from iced_aw