Develop Reference

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

How to use Codepen code on Squarespace as someone who knows nothing about coding?

I ask my question as someone who knows pretty much nothing (nothing at all) about coding. I am clearly very confused about how HTML, CSS, and JS interact.
I am creating a Squarespace website, and I found an FAQ form from Codepen.io that I would like to include on a specific page of the website. I want to know how to approach inserting the HTML, CSS, and JS into a Squarespace code block.
I am able to copy and paste the HTML part of the code into the Squarespace code block feature and the FAQ form shows up, but without all the colors/fonts/styles that the CSS and JS code apparently bring to it. That is about all I got to "work." Below I provided a link to the code I am referring to. I hope this is all making sense.
FAQ form in question: codepen.io/sarenz/pen/azGLRg
*I have added the CSS and JS codes for context
CSS:
{ /basic reset/
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* background: red; */
background: lightgray;
}
.faq-wrapper{
border-bottom: 1px solid rgba(0,0,0,0.5);
font-family: 'Lato';
line-height: 1.6;
padding: 40px 40px 17px 75px;
position: relative;
}
i {
display: block;
height: 50px;
width: 50px;
}
a{
cursor: pointer;
display: block;
height: 40px;
margin-right: 0;
position: absolute;
right: 75px;
top: 30px;
width: 40px;
}
a.hide-button{
z-index: -1;
}
p.faq__question, p.faq__answer{
margin-left: 30px;
margin-right: 100px;
max-width: 650px;
}
p.faq__question{
font-weight: 700;
padding-bottom: 20px;
}
.hidden-part {
height: 0;
}
.hidden-part *{
opacity: 0;
}
.faq__question:before, .faq__answer:before{
color: #3376b3;
font-weight: 900;
margin-left: -30px;
position: absolute;
}
.faq__question:before{
content: 'Q:';
}
.faq__answer:before{
content: 'A:';
}
JS:
$( function(){
'use strict';
var $showButton = $('.faq-wrapper .expand-button'),
$hideButton = $('.faq-wrapper .hide-button');
$showButton.click(function(){
var id = $(this).attr('data-id');
var height = $('.hidden-part[data-id="'+id+'"] >.faq__answer').height();
height = height+25;/Adds extra padding to the bottom/
$(this).velocity({opacity:0})
.css('z-index',1)
.next('.hide-button')
.velocity({opacity:1})
.css('z-index',2)
.next('.hidden-part')
.velocity({height:height});
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:1},{duration:400});
});
$hideButton.click(function(){
var id = $(this).attr('data-id');
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:0},{duration:200});
$(this).velocity({opacity:0})
.css('z-index',1)
.prev('.expand-button')
.velocity({opacity:1})
.css('z-index',2)
.next()
.next()
.velocity({height:0});
});
} );

Congrats on getting started in the coding world! Squarespace has a tutorial on adding custom HTML, CSS, and JS to your website: link
As far as understanding how HTML, CSS, and JS interact, there are plenty of tools available to help you learn depending on your preferred learning style: Google Results
Here's the basic run-down:
HTML: The content that you want on your website
CSS: The formatting of that content
JS: Logic to change the content and formatting based on conditions or events (ie user clicks a button)

How do I move others divs around upon clicking my jQuery event?

I have inserted a jQuery event into my webpage which allows for a div in my page to expand to reveal more content. I'm having a problem with the surrounding divs not moving down to accommodate for the space needed to display the expanded div.
I initially tested this div in a separate document and found it to work successfully without too much fuss. I worked with other divs to be sure that they'd move upon clicking the event. Upon inserting the same code into my already developed web page however, the surrounding divs remain fixed and the expansion works behind those divs. Why might this be? Could it be that one of my divs beneath the expanded one is somehow fixed?
I researched the CSS property 'position' but can't make any link between these contributing to the problem.
Incase the problem relates to that of my expanded div (instead of the surrounding divs), I shall only post the code for the HTML, CSS & Javascript/jQuery that directly relates to that particular part of my webpage. Please request any further code if you feel it's necessary.
Thank you for taking time to read.
Here is my code:
HTML
<div id="showmorelocations-container"><p>More Locations</p>
<div class="toggler-expand">
</div>
</div>
CSS
#showmorelocations-container {
height: 100px;
line-height: 150px;
width: auto;
margin: auto;
margin-bottom: 50px;
}
#showmorelocations-container p {
text-align: center;
font-family: 'Hind', sans-serif;
font-size: 20px;
font-weight: bold;
text-decoration: none;
position: relative;
top: 50%;
transform: translateY(-50%);
line-height: 100px;
}
.toggler-expand {
height: 400px;
width: auto;
background-color: #FFBBBB;
display: none;
margin-top: -25px;
}
jQuery
$(function() {
$('#showmorelocations-container').click(function() {
$(this).find('.toggler-expand').slideToggle();
});
});

The issue is most likely related to the fact that you have set a fixed height for your parent container and try to expand the a child.
Change the following line:
#showmorelocations-container {
height: 100px; // change px to %
...
}
to
#showmorelocations-container {
height: 100%;
...
}
in order to allow the parent to expand if the child expands too.
Check the fiddle here: https://jsfiddle.net/n1dwz8v1/

Is this the behavior you are looking for?
$( document ).ready(function() {
$('#showmorelocations-container').click(function() {
$(this).find('.toggler-expand').slideToggle();
});
});
#showmorelocations-container {
height: 100px;
line-height: 150px;
width: auto;
margin: auto;
margin-bottom: 50px;
background-color:#ccc
}
#showmorelocations-container p {
text-align: center;
font-family: 'Hind', sans-serif;
font-size: 20px;
font-weight: bold;
text-decoration: none;
position: relative;
top: 50%;
transform: translateY(-50%);
line-height: 100px;
}
.toggler-expand {
height: 400px;
width: auto;
background-color: #FFBBBB;
display: none;
margin-top: -25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showmorelocations-container">
<p>More Locations</p>
<div class="toggler-expand">
<p>Content</p>
</div>
</div>

use this :
$(function() {
$('#showmorelocations-container p').click(function() {
$(this).parent().find('.toggler-expand').slideToggle();
});
});

How to adjust the size of a Launchrock-widget?

I'm running a Joomla website, and am trying to embed a launcrock-widget (launchrock is a service that lets people interested in your project enter their email, so when you're done you can email them), but I can't really adjust the size of it. The widget comes in 1 line of javascript code that I put in a Joomla article using the Sourcerer Code Helper plugin.
The widget is embedded here:
http://cavemanskin.com/index.php/14-day-meal-plan-widget
Now there are 2 problems: for some reason 1) the widget takes up the whole page and 2) the grey box under the text is gone so you can't really read it.
With 'inspect element I noticed that Launchrock puts everything in a DIV named 'lr-widget'.
I added the code:
<style type="text/css">
div#lr-widget { height:300px; width:300px }
</style>
But the widget is still the same size.
Can anybody tell me what I'm doing wrong?
Edit: the code of the widget only works on the domain that I gave launchrock, I'd like to experiment with a .html on my PC with the javascript code in it but the launchrock widget doesn't load at all.

Looking at this in Chrome developer there is an inner shell that can also be customized and added in your master css so overwrite their classes and added to your Master CSS.
EX:
.LR-content {
color: #FFFFFF;
font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 14px;
font-weight: 300;
height: 200px;
min-height: 100%;
position: absolute;
width: 500px;
z-index: 0;
}
.LR-bg-img {
background-attachment: fixed;
background-color: #222222;
background-image: url("img/classicBg.png");
background-position: center center;
background-size: cover;
content: "";
height: 50%;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
I was just testing those and you can see the many changes. So you can try grabing those codes and overwrite them on your master.

Highlight text inside textarea like Facebook does

I try to achieve something like the Facebook does when you type #<NAME_OF_A_FRIEND> in a reply. After you choose a friend, the name of that friend is highlighted with a blueish background, so you know it's a separate entity in that text.
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
Can anyone give me a clue about how that is done ?

I have a completely different approach to this issue using HTML5. I use a div with contentEditable="true" instead of a textarea (wich I was using until I got stuck with the same problem you had).
Then if I want to change the background color of a specified part I just wrapp that text with a span.
I am not 100% sure if it is the correct approach as I am a newbie in HTML5 but it works fine in all the browsers I have tested it (Firefox 15.0.1 , Chrome 22.0.1229.79 and IE8).
Hope it helps

See this example here. I used only CSS and HTML... The JS is very more complex for now. I don't know exactly what you expect.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}

The textarea has background-color: transparent; the extra div you're looking for is behind it, with the same text and font as the textarea, but different colours.
A short example to illustrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.

hi you can check this jquery autosuggest plugin similar to facebook .I have used this to achive the same functionality you required
http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/

I would suggest changing the text you want to assign a background inline to to display: inline-block; background-color: #YOURCOLOR;. This should do exactly what you want it to do without all the complexities of some of the above answers.
Ultimately your CSS should look something like this:
.name {display: inline-block; background-color: purple;}
Then add some sort of event listener in jQuery (not sure how you're identifying that it is a name) and inside that conditional put:
$(yourNameSelectorGoesHere).addClass(".name");