Develop Reference

Measuring the space that text takes up when it extends past the boundaries of the div

I've been relentlessly trying to resize the text of my buttons to fit within the parent div, and have had no success with fitty and other external plug-ins which work inconsistently or not at all.
I'm attempting to make my own simplified version that simply reduces the font-size of my answer_button_1_text element by 1px until it's smaller than the parent answer_button_1 element.
Using clientWidth returns 281 for answer_button_1 and 253 for answer_button_1_text regardless of if the text in the button extends past the boundaries.
How can I get the actual length of the text?
I've attempted to use the canvas.measureText method, but am unfamiliar with using canvases and when I apply a canvas to the entire HTML in this codepen, none of the elements on my screen are visible. I'm sure I'm making a basic mistake, but if anyone could help me find a way to return the actual space that my answer_button_1_text element takes up, I would really appreciate it.
Here is a codepen:
https://codepen.io/TheNomadicAspie/pen/oNWpZrg
Here is my code:
<button id="button" class="button lower-button">
<div id="button_text">Really long button</div>
</button>
<div id="question_text">Test</div>
body {
background-color: gray;
}
.button {
display: block;
position: relative;
height: 20%;
width: 10%;
background-color: black; /*Button Color*/
color: #f5f5f5;
font-family: open_sans;
font-size: 1.5rem;
font-size: min(6vw, clamp(1rem, 4.5vh, 4rem));
border-radius: 20px;
text-decoration: none;
box-shadow: 0.1em 0.2em black;
transition: 0.2s;
}
.lower-button {
white-space: nowrap;
}
#question_text {
position: absolute;
color: blue;
font-size: 40px;
margin-top: 100px;
}
const question_text = document.getElementById('question_text')
let text_var = button.clientWidth + ' ' + button_text.clientWidth
question_text.innerText = text_var

CSS style partially applying to button in React component

I have a button with a className 'actions'
This button shows the
css styling from '.actions' but not '.actions button' . I expect both to be included.
This syntax here works for every element except the button.
The full code is at: https://github.com/keithmacinnis/for-play-activity-browser
Activity.module.css
.item {
margin: 1rem 0;
}
.image {
width: 100%;
height: 20rem;
overflow: hidden;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.image img {
width: 100%;
object-fit: cover;
}
.content {
text-align: center;
padding: 1rem;
}
.content h3 {
font-size: 1.25rem;
color: #2c292b;
}
.actions {
padding: 1.5rem;
text-align: center;
}
.actions button {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
.actions button:hover,
.actions button:active {
background-color: #ffe2ed;
}
Activity.js
import css from "./Activity.module.css";
import Card from "./Card";
function Activity(props) {
return (
<li className={css.item}>
<Card>
<div className={css.image}>
<img src={props.activity.image} alt={props.activity.title} />
</div>
<div className={css.content}>
<h3>{props.activity.title}</h3>
<address>{props.activity.address}</address>
<p>{props.activity.description}</p>
</div>
<div>
<button className={css.actions}>Join Activity</button>
</div>
</Card>
</li>
);
}
export default Activity;
Again, I'm unsure why my button receives the stylings for padding and text-align, but the eight properties that follow are ignored.

I do not have much experience with creating selector combinations that include an element type and className, but I just did a little experimenting on my own, and it appears that these may be considered sibling selectors (as opposed to one being the child of the other). Also, it seems like the element type may have to come before the className.
It looks like if you write the selectors like one of these two ways, it should work:
button ~ .actions {
*styles*
}
button + .actions {
*styles*
}
You can read more about combinators here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

To use .class selector for a specific element. You need Start with the element name first, then write the period (.) character, followed by the name of the class... like this
Button.actions {
font: inherit;
cursor: pointer;
color: #77002e;
border: 1px solid #77002e;
background-color: transparent;
padding: 0.5rem 1.5rem;
border-radius: 4px;
}
If that doesn't work. It might be a problem with the browser using your previous css version from the cash and not the updated styling. To solve it use this:
Ctrl + F5 On Mac OS (in Chrome) use: Cmd + Shift + R .
This will force your browser to reload and refresh all the resources related to the website's page.

It was fixed by this change in Activity.js :
new code:
<div className={css.actions}>
<button >Join Activity</button>
</div>
old code:
<div>
<button className={css.actions}>Join Activity</button>
</div>

Spring boot + Thymeleaf show database records in custom fragments

I have database records, which I want to show on the page in a certain way. For this reason I've created a thymeleaf fragment, which should be used as a template for all of the records in my database. Now I am not sure how to make each fragment (representing a db record) to print next to each other. Moreover, I want to achieve something like this :
My current implementation shows all the fetched records in the exact same spot on the webpage, which creates something like "stack" and shows only the last record. My current implementation looks like this:
To summarize I want to achieve something like a CardView in Android development. I've went through a lot of thymeleaf tutorials, but all of them seem to be about organising data in tables, which is not my goal. At this moment I am not sure if the targeted functionality from picture one can be achieved only with thymeleaf.
I hope someone can give me tips or advice about how I can achieve the desired result. Should I look in some JS frameworks? Or this can be achieved with thymeleaf?
My attempt to achieve this functionality have produced the following code so far.
<div th:fragment="officer">
<div class="officerWrapper" th:block th:each="officer : ${officers}">
<div class="officerLeft">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRTw8mKnjVErhmhl5S_aUZfvf86vwZOMJBqbUqM-guT-kv6K4xu&usqp=CAU"
alt="user" width="100" height="150">
</div>
<div class="right">
<p>
Name :
<td th:text="${officer.firstName}">
</p>
<p>
Surname :
<td th:text="${officer.lastName}">
</p>
<p>
Mobile:
<td th:text="${officer.mobile}">
</p>
</br>
<p>Статут: Наличен</p>
</br>
<button class="button button1" name="editOfficer">Edit</button>
</div>
</div>
</div>
And the css goes..
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: 'Josefin Sans', sans-serif;
}
.officerWrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 150px;
display: flex;
box-shadow: 0 10px 20px 0 rgba(69,90,100,.08);
}
.officerWrapper .officerLeft{
width: 65%;
background: #38584A;
padding: ;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
text-align: center;
color: #fff;
}
.officerWrapper .officerLeft img{
border-radius: 0px;
margin-bottom: 0px;
width:100%;
height:100%;
}
.officerWrapper .right{
background:#38584A;
width:100%;
padding: 10px 10px 10px 10px;
color:#fff;
font-weight: bold;
}
.button1 {
border: 2px solid #4CAF50;
}

You can definitely achieve this without js and with just html and css because this is a styling challenge, so all you need is the correct css.
The reason that all your cards are stacked right now is that you're positioning every card at the exact same point in space (the middle of the screen) with these lines:
.officerWrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
... }
You can achieve what you want by using flexbox or css grid. Neither is better than the other so you'll have to see what works for you. I'll leave you some references to check out.
References
Basic_Concepts_of_Grid_Layout
CSS Grid Examples
Flexbox Examples
Free Youtube Course on CSS Grid
Free (but requires signup) Course on Flexbox

Sliding Menu in React

I want to create a file separator styled menu in react. I'm not very familiar with css, so i need a starting point. I have found many such menu components but all of them are full page.
I dont understand how to create the shape of the component, if it were a simple rectangle it would be possible, but the shape is the rectangle plus the button, i dont know how to manage that.
It will look something like this :
Alter clicking on "Filter Menu", it will slide into view:

Try like this
.menu-container {
display: inline-block;
position: fixed;
top: 30%;
left: 0;
}
.menu-body {
display: inline-block;
height: 200px;
width: 100px;
border: 1px solid black;
}
.activate-button {
display: inline-block;
height: 50px;
width: 20px;
border: 1px solid black;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
vertical-align: top;
}
<div>
<div class="menu-container">
<div class="menu-body">
</div>
<div class="activate-button">
</div>
</div>
<div>

That is actually a CSS/HTML only question.
However, to develop from scratch:
Draw a two column table and have the button in the second field
Or
Use Div containers and style them accordingly
Side Note:
Usually you'd use something like bootstrap or even ant.design.
There you have ready to use table components with possibility to filter (at least with ant.design) and for the filter seection popup you could use stuff like the modal component.

How would I add text before the numbers in odometer.js

I am using the odometer.js library and I want to add a '$' right before the display of numbers. (EX: $123,435) Does anyone know how to go about this to get it to work? I have tried adding tags and inserting it in the options section of the javascrip which is in correlation with the library, but it still will not work. I have also tried :before and :after pseudos but that is not very dynamic.
<div class="odometer" id="odometer"></div>
.odometer {
color: rgba(250,250,250,.75);
font-size: 50px;
margin-top: 100px;
background-color: #2ecc71;
text-align: center;
padding-top: 10px;
position:fixed; top: -50px; width:100%; border: 0px solid black !important;
}
.odometer:before {
content: "$";
}

This should do the trick:
.odometer-inside:before {
content: "$";
}
DEMO: https://jsfiddle.net/lmgonzalves/tuqhmok1/1/