Hey again, got another issue, everything works (so far need test further), but just want know how can I organize my checkbox, to appear in a more grid form (and also display a mini description not just the name), and also, make it so you must select only 2, here’s a photo how they appear
<div class="traits"> \
<<checkbox "$trait.charisma" false true>> Charismatic Connector \
<<checkbox "$desc.empathy" false true>> Empathic Understanding \
<<checkbox "$desc.authority" false true>> Commanding Presence \
<<checkbox "$desc.networking" false true>> Networking Pro \
<<checkbox "$desc.creativity" false true>> Creative Visionary \
<<checkbox "$desc.endurance" false true>> Stamina Master \
<<checkbox "$desc.organizational" false true>> Strategic Organizer \
<<checkbox "$desc.curiosity" false true>> Inquisitive Mind \
<<checkbox "$desc.critical_thinking" false true>> Quick Thinker \
<<checkbox "$desc.problem_solving" false true>> Adaptive Thinker \
<<checkbox "$desc.sneaky" false true>> Stealthy Observer \
<<checkbox "$desc.flirty" false true>> Charming Flirt \
<<checkbox "$desc.perverted" false true>> Seductive Speaker \
<<checkbox "$desc.shameless" false true>> Daring Performer \
jeb019
October 14, 2024, 4:16pm
2
Can you post your css for the class “traits”
I made some changes since I originaly wrote this post, but by the time it got accepted by moderation I was asleep, I’ll send all changes done and CSS
Traits:
<div class="traits">
<label><input type="checkbox" name="charisma"> Charismatic Connector</label>
<label><input type="checkbox" name="empathy"> Empathic Understanding</label>
<label><input type="checkbox" name="authority"> Commanding Presence</label>
<label><input type="checkbox" name="networking"> Networking Pro</label>
<label><input type="checkbox" name="creativity"> Creative Visionary</label>
<label><input type="checkbox" name="endurance"> Stamina Master</label>
<label><input type="checkbox" name="organizational"> Strategic Organizer</label>
<label><input type="checkbox" name="curiosity"> Inquisitive Mind</label>
<label><input type="checkbox" name="critical_thinking"> Quick Thinker</label>
<label><input type="checkbox" name="problem_solving"> Adaptive Thinker</label>
<label><input type="checkbox" name="sneaky"> Stealthy Observer</label>
<label><input type="checkbox" name="flirty"> Charming Flirt</label>
<label><input type="checkbox" name="perverted"> Seductive Speaker</label>
<label><input type="checkbox" name="shameless"> Daring Performer</label>
</div>
Full CSS
body {
font-family: Arial, sans-serif;
background-color: #2B2D31;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full viewport height */
overflow: hidden; /* Prevent body scrolling */
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%; /* Full height of the viewport */
width: 100%;
padding: 20px;
box-sizing: border-box;
}
section {
margin-bottom: 40px; /* Space between sections */
}
.main-menu, .game-setup {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 600px;
max-height: 100%;
background-color: #1E1F22;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
color: white;
overflow-y: auto; /* Allows content to scroll if it becomes too large */
}
.main-menu li {
padding: 10px 20px;
margin: 10px 0;
border: none;
background-color: #3F4248;
color: white;
border-radius: 5px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
font-weight: bold;
font-size: 24px;
text-align: center;
transition: background-color 0.3s;
width: 500px;
}
#ui-bar {
background-color: #333;
text-align: center;
color: white;
font-size: 25px;
}
#ui-bar-tray button {
background: none;
border: none;
color: white;
text-align: center;
}
.game-setup li {
padding: 10px 20px;
margin: 10px 0;
border: none;
background-color: #3F4248;
color: white;
border-radius: 5px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
font-weight: bold;
font-size: 24px;
text-align: center;
transition: background-color 0.3s;
width: 500px;
}
.character-creation {
display: flex;
flex-direction: column;
justify-content: flex-start; /* Start items from the top */
align-items: center;
width: 600px;
height: 90vh; /* 90% of viewport height */
background-color: #1E1F22;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
color: white;
overflow-y: auto; /* Scroll when content overflows */
box-sizing: border-box; /* Ensure padding is included in width/height */
}
.character-creation listbox {
padding: 10px 20px;
margin: 10px 0;
border: none;
background-color: #3F4248;
color: white;
border-radius: 5px;
cursor: pointer;
width: 500px;
box-sizing: border-box; /* Ensures padding is included in width */
font-weight: bold;
font-size: 24px;
text-align: center;
transition: background-color 0.3s;
}
.character-creation input {
margin-bottom: 10px;
}
.traits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid for checkboxes */
gap: 15px; /* Spacing between grid items */
width: 100%; /* Ensure it stretches full width inside the .character-creation */
padding: 10px 0; /* Optional padding */
box-sizing: border-box; /* Ensure padding doesn't cause overflow */
}
.traits label {
display: flex;
align-items: center;
background-color: #3F4248;
color: white;
padding: 10px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
white-space: nowrap; /* Prevent label text from wrapping */
}
.traits label:hover {
background-color: #5a5e65; /* Darken label on hover */
}
.traits input[type="checkbox"] {
margin-right: 10px; /* Space between checkbox and label */
}
jeb019
October 17, 2024, 1:37pm
4
Could you explain more what you mean by this? To have grid lines between all the cells? Or have them alternating in color?
I attempted made a illustration fo what I meant, not sure if it explains that well, I want them to appear side by side (depending on screen size, make it so 2 rows, 3, and etc) so it takes less space (vertically), and then also display what each trait does upon selecting them
Tho I don’t know how to post a image cause It says I can’t embed a photo so
