CSS struggles

https://codepen.io/brightDN/pen/dyQrBBN Isn't css fun? :( The .retile-button is not correctly put to the center (its the button at the bottom I changed my topbanner coloring a bit to see if it would be at 50% it isn't D: not even the start is On top of that, quick flex-box question, how do I put a max on the amount of objects in a flexbox? Is that with flex-row-end:4? just guessing here Basically I need to place them so they form a square, however this should also be a variable as the amount would differ with the amount of objects that will be in the flexbox
28 Replies
Mannix
Mannix•16mo ago
place-items property is belongs to grid/flexbox you can use it independently try adding display:block; and margin-inline:auto; instead
Brightie
Brightie•16mo ago
Well, that did the trick, thanks But how did margin:auto not do the trick, usually that puts it to the middle no? Unless it doesn't work on a buttonas I assume it's not a block-element but an inline-element And what about my question about flexbox? As a bingo that's not a square is kinda difficult to navigate xd
Mannix
Mannix•16mo ago
iirc for margin:auto you need grid or inset
Brightie
Brightie•16mo ago
ahh, so basically if there's no grid or no flex doing display:block and margin-inline:auto; is the safest go to if you wish your elements in the middle?
Mannix
Mannix•16mo ago
if it's and inline level element like a <button> you need display: block if it is a block level element already margin-inline: auto is enough
Brightie
Brightie•16mo ago
alright, thanks that's good to know, I used to think that margin:auto always would do the trick Knowing this will help me a whole lot, thanks you But what about the issue with the flex-box? I gave it some thought myself (I haven't yet played around with it) but I was strugglign to come up with a solution inm y head I can't really alter classElements in JavaScript, as far that I'm aware of I know i can add and remove classes but I don't know if I can manipulate the classes myself Tho if it is possible to manipulate classElements , then all I would need is an element to determine the max amount per row
Mannix
Mannix•16mo ago
you can't do that with flexbox, this kind of things is for grid
Brightie
Brightie•16mo ago
hmm I see, so I should best use grid instead and is that value changeable using javascript or is there a setting that would make sure a grid always results in a square shape Otherwise what I could do is make multiple classes to decide the grid max row and change them using javascript but that feels like too big of a workaround, with too many classes doing noting as only one would be used at a time
Mannix
Mannix•16mo ago
grid-tempalate-colums: repeat(4, 1fr) will give you 4 equal columns
Brightie
Brightie•16mo ago
ahh I see, but what if it needs to be more? What I mean is, the bing ocan be for example 5x5, which would mean I'd need 5 colums and rows The repeat(4,1fr) would only work if the bingo is a 4x4 the bingo could also be a 3x3, so then it would need repeat(3,1fr) is there a way to change this without having to create multiple classes and toggle using javascript element.classList.add("class) and element.classList.remove("class)
Mannix
Mannix•16mo ago
you can use custom property and set it with js element.style.setProperty("name", value) then in css instead of the number you use var(--name)
Brightie
Brightie•16mo ago
so basically
:root{
--grid-Sizer:;
}
.retile-button{
grid-template-columns:--var(gridSizer)
}
:root{
--grid-Sizer:;
}
.retile-button{
grid-template-columns:--var(gridSizer)
}
element.style.setProperty("grid-Sizer", '('+chosenValue'+',1fr)'
element.style.setProperty("grid-Sizer", '('+chosenValue'+',1fr)'
or did I understand it wrong?
Mannix
Mannix•16mo ago
.retile-button{
grid-template-columns: repeat(--var(gridSizer), 1fr)
}
.retile-button{
grid-template-columns: repeat(--var(gridSizer), 1fr)
}
element.style.setProperty("gridSizer", '('+chosenValue'+',1fr)'
element.style.setProperty("gridSizer", '('+chosenValue'+',1fr)'
no need to set it on the root
Brightie
Brightie•16mo ago
ahh, so I don't need to put it in the root alright And I assume that the element would refer to document.querySelector(".retile-button") ? I didn't know you could change the attributes of cssclasses, this is handy to know
Mannix
Mannix•16mo ago
yes
Brightie
Brightie•16mo ago
okayy, one more question, as this is something that could be very useful say that multiple styles have to change at once, as the ysometimes do in css you'll put it in :rootthen as a variable and every class that uses it will just use --var(varname) How do you use the :root as the element in element.style.setProperty as this would be the most efficient way otherwise you would have to iterate over the DOC element and filter everything, no way that this would be the simplest and most efficient solution for example, you wish to set a layout and make people choose their coloring and stuff So in essence you'd have for example
:root{
--color1:
[...]
--color10:

Various css classes using for example --color1 and others using --color7
:root{
--color1:
[...]
--color10:

Various css classes using for example --color1 and others using --color7
Mannix
Mannix•16mo ago
:root is html element 😉
Brightie
Brightie•16mo ago
OH it is? so then you can just do querySelector(":root") ? I thought :root was css only xd but so its an html element alright
Mannix
Mannix•16mo ago
document.documentElement
Brightie
Brightie•16mo ago
yeh so document.querySelect(":root") right? or is it literally just document.documentElement if you wish to select :root so meaning that document.documentElement = :root
Mannix
Mannix•16mo ago
document.querySelector(':root') but both should work
Brightie
Brightie•16mo ago
ah I see, so in essence :root is just documentElement, as in every existing element in the project
Mannix
Mannix•16mo ago
don't know what you mean by every existing element in the project but sure 😄
Brightie
Brightie•16mo ago
yeh, I worded that a bit weridly don't worry! thanks for the help! I think with these things figured out I'll be able to get V1 online I don't see any other things I would need assistance with, tho for version V4 I'll probably need some advice on best practice because I do know of a way to do it but I hope there's an easier solution, but that's for over a month or so 😂
Mannix
Mannix•16mo ago
good luck thumbup
Brightie
Brightie•16mo ago
(v2 would be a time challenge added, v3 would be migrating the data to json, bc this unfinished js file im using for the data is already more than 2000 lines and its not even 1/5th on the way so I rather put tis in a json file eventually so its not continiously loaded in and taking up space, v4 would then be languages) so for languages, my idea is to just let my JS create the document based on the language, but I hope theres a simpler solution v5 is maybe impossible, but I'll have to ask in the back-end for this one, as I'd want to migrate the json files to a database, free if possible with infinite calls (usually the freee ones have a max amount of calls) so that I can create a PvP environment with the bingo and sync up the pages with server-sided php as I don't think you can run php code from a gitPage (I don't wanna payup for this little for fun project) And the pvp would also have a lockout version, meaning once one caught it no one else can, I can just use a database to get this done and letting the webpage read the database information out every 10 seconds, while not ideal its the solutation I came up with to replace the need for server-sided code as I don't have a server unless a gitPage counts as a server, do you have any idea about this? @mannix_ would I be able to sync up multiple pc's so they'd have a room so to speak using a gitPage and PhP?
Mannix
Mannix•16mo ago
back end is black magic for me 😄
Brightie
Brightie•16mo ago
Right xd alright I'll ask in back-end when it comes to that point if it's not possible then my bingo will just be singleplayer and V5 will be to copy your bingo and to input one from clipboard, so they can sort of play pvp OH Speaking of this, Ive tried doing that once before but I couldn't get a direct paste going, I kept on getting errors, don't remember them tho, any idea on if its even possible to do a direct paste? and then that'd be complete and I can finally put my first project to a portfolio xd getting projects for a portfolio to get a job in programming is taking so long tho, this is only my first project yet and its not even close to being finished as I'll also get a sort of wordle for it and a teambuilder, but also a typematchup chart and a dex
Want results from more Discord servers?
Add your server