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
Related
CSS styles not applying to React heading and paragraph.
Under 1 div, 1 heading and paragraph is getting CSS but other is not
ive tried giving them the same className and Different class names
If I put the heading and paragraph of :
Meet Babish... and Im launching my... with the Stay in loop and Many products the styles is the same like where it is currently situated, but only the Stay in looop and more products.. area is not getting css.
CSS is working for all other things, im adding new styles for the same component
Result:
I want the styles to be as in Meet babish cookware
const Cookware = () => {
return (
<div className="CookwareMainDiv">
<h4 className="CookwareMainDivSubDiv1h41">meet babish cookware</h4>
<p className="CookwareMainDivSubDiv1p1">I’m launching my all-new line of cookware in three phases;<b>starting with everything you need to prep your meals.</b>
<br/><br/> I wanted to create a high quality line of products with a price point palatable for everyday chefs. The basics, simply made better.</p>
<button className="CookwareMainDivSubDiv1b1">VISIT THE AMAZON STORE</button>
<hr/>
<h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
<p CookwareMainDivSubDiv1p1>More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>
</div>
</div>
)
}
export default Cookware
css
/*
Cookware
*/
.CookwareMainDiv
{
width: 80%;
height:500px;
margin: auto;
box-shadow: none;
}
.CookwareMainDivh11,.CookwareMainDivh12
{
font-weight: 100;
text-align: center;
margin-top: 5%;
}
.CookwareMainDivSubDiv1h41
{
text-transform: uppercase;
margin-top: 10%;
font-size:large;
letter-spacing: 3px;
}
.CookwareMainDivSubDiv1p1,.CookwareMainDivSubDiv1p2
{
margin-top: 5%;
word-spacing: 5px;
font-weight: 300;
}
.CookwareMainDivSubDiv1
{
width: 50%;
height: 400px;
margin: auto;
}
.CookwareMainDivSubDiv1b1
{
height: 60px;
width: 300px;
background-color: transparent;
border: 2px solid black;
border-radius: 16px;
letter-spacing: 2px;
margin-left: 20%;
}
.CookwareMainDivSubDiv1h41
{
margin-top: 5%;
margin-bottom: 5%;
}
.CookwareMainDivSubDiv1 input
{
width: 400px;
height: 30px;
border: 2px solid black;
background-color: transparent;
}
.CookwareMainDivSubDiv1b2
{
width: 100px;
height: 50px;
background-color: transparent;
border:2px solid black;
margin-left: 30%;
}
.CookwareisSubmitted input
{
width: 90%;
height: 50px;
text-align: center;
border: 2px solid rgb(203, 207, 211);
}
.CookwareisSubmitted button
{
width: 30%;
height: 50px;
text-align: center;
margin-bottom: 20%;
}
Please add the "className" to both of the tags.
<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>
<p className="CookwareMainDivSubDiv1p1">More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>
Where is your stylesheet vs where you're importing it into? Is the stylesheet global or component specific? Typically, these issues usually mean the CSS file isn't recognizing the element because it wasn't linked properly to the file the element lives in. (Sometimes, I forget that I gave an element an ID rather than a class.)
Some frameworks don't like certain naming conventions. It helps to look up their official standard. Check out this article from FreeCamp. This article talks about adding a stylesheet with Create React App.
GetBEM did an excellent article on naming conventions, too.
This code is working. Delete that extra "</div>" at the end (It might have been a problem if it didn't already cause an error).
You forgot to give the attribute of className to the Stay in loop and its below paragraph. And you are applying to give css styles as it is a class but it's not.
Your code
<h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
It has to be
<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>
Similarly in the paragraph section.
I need to get a <div> to be at the bottom left corner of a table cell. Something like float: left; and float: bottom; together.
A typical cell is:
<td id="x0900A"> <!-- 0900 room A -->
<p class="classTitle">
</p>
<div class="classDescrip">
</div>
<p class="instructor">
</p>
<p class="gender">
</p>
<div class="instructorBio">
</div>
<div class="instructorImg">
</div>
<div id="x0900A-roomCount" class="roomCount">
<p id="x0900A-attending" class="attending">attending</p>
<p id="x0900A-capacity" class="capacity">capacity</p>
</div>
</td>
The CSS is:
td {
position: relative;
}
div[id$=roomCount] {
position: absolute;
bottom: 0;
left: 0;
width: 80px;
margin: 10px 10px 0 5px;
text-align: left;
opacity: 0.60;
}
.classTitle {
float: left;
margin: 5px 10px 10px 5px;
padding: 0 5px 0 5px;
line-height: 1.25em;
font-size: 1.05em;
text-align: left;
color: #00b8b8;
}
.instructor {
width: 50%;
float: right;
margin: 3px 0 10px 0;
padding: 0 3px 5px 3px;
line-height: 1.25em;
font-size: 0.95em;
text-align: right;
color: #00b8b8;
}
.classDescrip,
.instructorBio,
.instructorImg,
.gender {
display: none;
}
This locks .roomCount to the <td>'s bottom left but destroys responsiveness. I get horizontal overflow scrolling of the whole <body>. You can see the result here.
I tried putting a wrapper <div> inside the <td> and making it
position: relative;
height: 100%;
but it's only so tall as the wrapped content requires which, for many cells, is only partway down.
So, I need a CSS/jQuery way to anchor .roomCount that doesn't break responsiveness.
Note:
This is a resubmission of an earlier question that was too wordy and had much irrelevant content. I'm resubmitting it here in the hope that it will garner notice.
Edit/Update:
In response to #UdoE's comment: I have included the code and edited the "wordiness." At least, I hope I have and made it a better question.
In response to #ChrisG's labeling this a possible duplicate: I already noted that this is a resubmission of that question and the reason why I did it. There are no answers or comments to that question as of this writing.
If you set overflow: hidden; on the div that wraps around the element:
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-4f3956fa4071adb2096e">
...the horizontal scroll on the body will go away. There is already a rule affecting this element in site.css on line 13:
.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
clear: both;
overflow: hidden; /* add this */
}
For keeping the .roomCount element positioned in the lower left of the cell, maybe this approach can help:
.schedule td {
position: relative;
padding-bottom: 30px;
}
div[id$="roomCount"] {
margin: 0;
position: absolute;
bottom: 0;
left: 0;
max-height: 30px;
overflow: hidden;
}
What this does is place 30px of padding at the bottom of the td. Then uses absolute positioning to move the .roomCount element into the lower left corner.
This way, even though absolute positioned elements are out of flow, the padding gives you an area to work with that is going to be accounted for when the table is resizing. I added a max-height and overflow: hidden on that element just in case. It will probably take some tweaking to get right for you.
Here is a jsFiddle
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.
Does anyone have any tips on how to fix the below problem of the labels and text-areas being so unsymmetric? What's the best way to structure a form like this?
I was thinking of having one div floating left (with the labels) and another div with the text areas floating right, but I didn't quite manage to structure it correctly.
It was your idea, I just wrote it...
Fiddle
HTML Layout
<div>
<div class="left">
<span>Comment</span>
<span>Tags</span>
<span>Category List</span>
</div>
<div class="right">
<input type="text" />
<input type="text" />
<select></select>
</div>
</div>
CSS
body { background: #222; color: white; }
.left, .right { width: 50%; float: left; }
.left { text-align: right; }
.right { text-align: left; }
span, input, select { display: block; padding: 5px; margin: 5px; }
span { font-family: sans-serif; line-height: 20px; font-weight: bold; }
input { width: 200px; height: 30px; box-sizing:border-box; }
select { width: 200px; height: 30px; box-sizing:border-box; }
The best way is to use BootStrap framework styling issue. you can enter the website and learn more.. alternative way is to put the labels and the input fields (select fields also) in table and they will be organized.
The better to submit BootStrap otherwise use the simple way. and there is no floating issues and that's better!
If you want to use divs, then make them both float:left and immediately after put <div style="clear:both"></div>. Then they will be displayed correctly.
Personally I use tables for this though, like in Islam Attrash's answer.
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");