Kevin Powell - Community•14mo ago

Styling inputs, and lining up multiple list items

Hi all, Last bit of my first svelte app and I'm a happy chap! I'm hoping the sandbox works and lets you edit, perhaps...? Have attached a photo of the page anyway, as you can see, the list items don't really line up well and I'm trying to figure out the best way to accomplish this? Ideally I'd like all 3 parts to align right,

Checkbox | text | delete button
| | |
| | |

Checkbox | text | delete button
| | |
| | |

message.txt

37 Replies

MarkBoots•14mo ago

remove the justify-content: center from your li's set the ul to width: fit-content and margin-inline: auto to center it and remove the default padding

CDLOP•14mo ago

Oh fantastic, that worked, thanks Mark 🙂 ah, so I think the reason I did the flex properties was because the X wasn't lining pu with text, how did everyone tackle that issue?

CDLOP•14mo ago

Jochem•14mo ago

something something share your code 😄

CDLOP•14mo ago

Trying to style this section

<div class="todoCard">
    <h1>Todo List</h1>
    <input type="text" bind:value={newTodo} placeholder="Add a new todo" />
    <button class="todo-add-btn" on:click={addTodo}>ADD</button>
    <ul>
        {#each todos as todo, index}
            <div class="li-box">
                <input class="ui-checkbox" bind:checked={todo.completed} type="checkbox" />
                <span class="li-text" class:checked={todo.completed}>{todo.text}</span>
                <button class="delete-button" on:click={() => removeTodo(index)}>❌</button>
            </div>
        {/each}
    </ul>
</div>

<div class="todoCard">
    <h1>Todo List</h1>
    <input type="text" bind:value={newTodo} placeholder="Add a new todo" />
    <button class="todo-add-btn" on:click={addTodo}>ADD</button>
    <ul>
        {#each todos as todo, index}
            <div class="li-box">
                <input class="ui-checkbox" bind:checked={todo.completed} type="checkbox" />
                <span class="li-text" class:checked={todo.completed}>{todo.text}</span>
                <button class="delete-button" on:click={() => removeTodo(index)}>❌</button>
            </div>
        {/each}
    </ul>
</div>

the CSS code so far is

    .li-text {
        font-size: 1.3rem;
        padding-bottom: 10px;
    }

    input {
        line-height: 25px;
        background-color: transparent;
        border-radius: 5px;
    }

    .todo-add-btn {
        background-color: transparent;
        border-radius: 5px;
        height: 20px;
        width: 50px;
    }

    ul {
        width: fit-content;
        margin-inline: auto;
    }

    .li-box {
    }

    .todoCard {
        background-color: rgb(50, 50, 20, 0.2);
        width: 700px;
        height: 600px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .checked {
        text-decoration: line-through;
    }

    .delete-button {
        background-color: transparent;
        border: transparent;
        cursor: pointer;
    }

    .li-text {
        font-size: 1.3rem;
        padding-bottom: 10px;
    }

    input {
        line-height: 25px;
        background-color: transparent;
        border-radius: 5px;
    }

    .todo-add-btn {
        background-color: transparent;
        border-radius: 5px;
        height: 20px;
        width: 50px;
    }

    ul {
        width: fit-content;
        margin-inline: auto;
    }

    .li-box {
    }

    .todoCard {
        background-color: rgb(50, 50, 20, 0.2);
        width: 700px;
        height: 600px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .checked {
        text-decoration: line-through;
    }

    .delete-button {
        background-color: transparent;
        border: transparent;
        cursor: pointer;
    }

CDLOP•14mo ago

message.txt

CDLOP•14mo ago

maybe this will work better?

CDLOP•14mo ago

    .li-box {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }

    .li-box {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
    }

this made things.. funky...? the longer the text, the further out the buttons go

Jochem•14mo ago

Hmm, alignments like that are my nemesis

CDLOP•14mo ago

likewise, it's the main hatred I have with css, I can just never align text with checks/buttons etc.

Jochem•14mo ago

it's definitely something with align-self/items, but the text mixed with the emoji makes it complicated

CDLOP•14mo ago

this is b1's version

CDLOP•14mo ago

the wrap is a good idea

Jochem•14mo ago

I think b1's is just a capital X, where you're using the ❌ emoji see, that doesn't even line up properly on a regular line of text

CDLOP•14mo ago

true, I can just use a red X lol

CDLOP•14mo ago

I might just leave it like this and admit defeat tbh lol. just flex-start it all

CDLOP•14mo ago

vince•14mo ago

How much are you willing to fight with the design? You're not a designer, right? So why not just make something like b1's: no real color, no real design, just nice and simple css and you focus on the functionality? I feel like you try to be too fancy with the projects you make

CDLOP•14mo ago

I'm done with it tbh lol, I think that result looks perfectly passable I just added a keydown for hitting enter on the input, I'd like an edit button and then I'm finished, I think I do get caught up in design alot though and I hate design 😄

b1mind•14mo ago

I stole my styles for the most part 😂

CDLOP•14mo ago

all I actually need to do is make sure it fits on mobile, then edit button, localstorage and im done 1 issue I noticed with the mobile is that the word-wrap doesn't seem to... work?

b1mind•14mo ago

Also don't test without a word break its not really practical 😉

b1mind•14mo ago

no wordbreaks will overflow pretty much any situation

CDLOP•14mo ago

bruh

b1mind•14mo ago

exactly that is not a practical test use lorem

CDLOP•14mo ago

oh you mean "test like this" not "adadsadadadada" hahahah

b1mind•14mo ago

you could test the longest word in the language xD

CDLOP•14mo ago

interesting, it works with lorem ipsum, just not with my welsh town

b1mind•14mo ago

word-break: break-all; if you really wanted to break up a string without spaces

CDLOP•14mo ago

so all I need to do now is localstorage, edit button and VOILA, todo list done, 2 days (5 hours) then this can replace the shitheap that I have on my portfolio i want 2-3 svelte projects then i need to make my portfolio look like an adult did it, and not a 12 year old

b1mind•14mo ago

I need to update/replace mine I'll probably end up remaking the folio too lol (or at least a revamp 🤷‍♂️ )

CDLOP•14mo ago

yeah ill do mine insvelte, once I learn some transitions/animations, I'd like to add some subtle things here and there to make it stand out nicer but for sure picking up svelte was the best decision, it's so much easier writing the functionality now.

b1mind•14mo ago

Honestly learning Svelte will make you a better React dev (easier to learn components/lifecycles/reactivity) to quote my mentor 😂

CDLOP•14mo ago

yeah I can see that. I'm just happy to not be writing vanilla js for a project fml, the pain

b1mind•14mo ago

yea but knowing how to manipulate the dom is still valuable, frameworks just make it easier.

CDLOP•14mo ago

yep, happy i spent so much time on vanilla dont regret it at all OH SHIT I DID THE EDIT BUTTON

Gaming

Programming

Styling inputs, and lining up multiple list items