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.
Related
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
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.
I've been doing a huge amount of reading here and on other websites about how to dynamically increase an input field's width based on its content. All the solutions so far have only worked in part, but I have found a website where it works perfectly:
https://paper.fiftythree.com/search
They've even given some vague instruction as to how they did it:
http://making.fiftythree.com/fluid-text-inputs/
But I can't for the life of me work out how to implement this on my own website.
This is my form structure at the moment:
<form action="/" class="search-form">
<input type="text" name="s" class="_input" placeholder="What are you looking for?">
<button type="submit" class="_button">Search</button>
</form>
My reason for trying to do this is that the form as a whole has a border underneath it. I would then like text that is typed in to have its own border-bottom 'grow' with the text in a different colour. The input field being a smaller width with its own border works, but I am stuck on a smooth dynamic experience for its width.
Could anyone help? Thanks.
On this example we can do this:
Input positioned absolute with fixed width this never changes, and will get the data
An element that will change the width based on the value from the input and the text transparent so that way we only see the input text.
Centered elements creating the ilusion of increase of the width
$('input').on('keypress', function() {
$('span').text($(this).val())
})
.container {
text-align: center;
position: relative;
font-size:25px;
}
.container img, .container span {
display: inline-block;
line-height: 50px;
margin-right: -4px;
vertical-align: middle;
}
.container span {
padding: 0 10px;
font-family: sans-serif;
color: transparent;
overflow: hidden;
white-space: nowrap;
max-width: 250px;
}
.container input {
width: 250px;
border: none;
text-align: center;
font-size:inherit;
padding: 0 50px;
position: absolute;
left: 50%;
top: 50%;
z-index: 5;
background: transparent;
transform: translate(-50%, -50%)
}
input:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="http://placekitten.com/50" alt="">
<span>Type here</span>
<input type="text" placeholder="Type here">
<img src="http://placekitten.com/50" alt="">
</div>
Note: Still have some issues when deleting text, but you get the idea
I've been spacing list items using the technique found in this answer, but a recent change is requiring me to insert the elements dynamically. I have found that for some reason the approach completely stops working if the elements are inserted dynamically. Why?
This fiddle demonstrates the static and dynamic versions.
As seen in the linked question, the basic idea is below. It's just when the HTML is inserted to the page via Javascript, the menu items don't justify.
HTML
<div id="menuwrapper">
<div class="menuitem">menu</div>
<div class="menuitem">menu</div>
...
<span class="stretcher"></span>
</div>
CSS
#menuwrapper, #dynamic {
height: auto;
background: #000;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
min-width: 300px; /* just for demo */
}
#dynamic {
background: blue;
}
.menuitem {
width: auto;
height: 40px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
background: #000;
color: yellow;
}
.stretcher {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
There was no spaces between elements.
take a look jsfiddle
document.getElementById("dynamic").innerHTML = '<div class="menuitem">CAREERS</div> <div class="menuitem">TRADE</div> <div class="menuitem">CONTACT US</div> <div class="menuitem">PRIVACY POLICY</div> <div class="menuitem">T&CS</div> <div class="menuitem">SITEMAP</div> <span class="stretcher"></span>';
Some related articles:
- Fighting the Space Between Inline Block Elements
You can do what apple website does and make your menu items display: table-cell;
This is probably not completely cross browser compatible (e.g. IE6 will probably fail), but it does not require any javascript at all
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");