I've created a modal but it would not display, it worked on an app I created with React, but with vanilla javascript (on a different project) it won't work.
Link for html, css and javascript code: https://codepen.io/J-Kazama/pen/WNbPoZB
If I change the display of .bg-modal to flex from none the modal does show up, so I assume the problem is with javascript.
remove the import from your JS and it works...
(function() {
document.getElementById('revAddButton').addEventListener('click', function() {
document.querySelector('.bg-modal').style.display = 'flex'
});
})()
.btn {
display: inline-block;
border: none;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
text-align: center;
cursor: pointer;
border-radius: 4px;
}
.btn-red {
text-decoration: none;
color: #fff;
background: #ff4742;
border: 2px solid #ff4742;
border-radius: 25px;
margin-right: 7px;
}
.btn-red:hover,
.btn-red:active {
border: 2px solid #ff4742;
text-decoration: none;
color: #ff4742;
background-color: white;
}
.div1:hover,
.div1:focus {
color: #555555;
background: rgba(60, 186, 84, 0.25);
}
.parent {
width: 100%;
background-color: #f8f9fb;
margin-top: 160px;
height: 500px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
align-content: flex-start;
}
.div1 {
background-color: rgba(70, 220, 100, 0.55);
position: relative;
margin: 5px;
width: 275px;
height: 220px;
border: 0;
border-radius: 5px;
font-family: 'Varela Round', sans-serif;
}
::-webkit-input-placeholder {
font-family: 'Varela Round', sans-serif;
}
::-webkit-moz-input-placeholder {
font-family: 'Varela Round', sans-serif;
}
input[type="text"] {
font-family: 'Varela Round', sans-serif;
}
.text {
font-family: 'Varela Round', sans-serif;
}
.closeBtn {
color: #cccccc;
float: right;
font-size: 30px;
}
.closeBtn:hover,
.closeBtn:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
}
.bg-modal {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
justify-content: center;
align-items: center;
display: none;
filter: blur(0px);
}
.modal-content {
background-color: #f4f4f4;
width: 600px;
height: 600px;
border-radius: 6px;
text-align: center;
padding: 20px;
margin-top: 30px;
position: relative;
}
.class-input {
width: 50%;
display: block;
margin: 8px auto;
}
.form-control {
display: inline-block;
width: 450px;
height: 34px;
padding: 6px 12px;
font-size: 20px;
font-family: Nunito, serif;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.comp-input {
text-align: left;
background-color: #fff!important;
border: 1px solid #e0e0e0!important;
height: 50px!important;
padding-left: 15px;
padding-right: 15px;
border-radius: 3px!important;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.sub-button {
margin-top: 10px;
}
.container {
display: flex;
justify-content: center;
align-self: center;
transition: 1s;
padding: 20px;
position: relative;
background: #ff4742;
}
.container .content {
position: relative;
max-width: 800px;
}
<link href="index.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap" rel="stylesheet"></link>
<h1 class="text">Boutique</h1>
<a id="revAddButton" role="button" target="_blank" class="btn btn-red text">Add a Comment</a>
<div class="bg-modal" id="modal">
<div class="modal-content">
<span class="closeBtn" id="closeBtn">×</span>
<form action="">
<h2 class="text">Add your comment</h2>
<input class="class-input form-control comp-input input-lg" type="text" placeholder="Name" />
<a role="button" href="/main" target="_blank" class="btn btn-red text sub-button">Submit</a>
</form>
</div>
</div>
Related
I created a createElement for the todo List and the appendchild but it's not adding to my website this is the code below
window.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector("#add-todo-form");
const input = document.querySelector("#new-todo-input");
const listTask = document.querySelector('#todo-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
const task = input.value;
const todoList = document.createElement('div');
todoList.classList.add('todo-item');
const label = document.createElement('label');
const input = document.createElement('input');
const span = document.createElement('span');
label.appendChild(input);
label.appendChild(span);
const todoContent = document.createElement('div');
todoContent.classList.add('todo-content');
todoList.appendChild(todoContent);
const todoInput = document.createElement('input');
todoInput.classList.add('text');
todoInput.type = 'text'
todoInput.value = task;
todoInput.setAttribute('readonly', 'readonly');
todoContent.appendChild(todoInput);
const todoAction = document.createElement('div');
todoAction.classList.add('action');
const todoEdit = document.createElement('i');
todoEdit.classList.add('bi-pencil-square');
const todoDelete = document.createElement('i');
todoDelete.classList.add('bi-trash3-fill');
todoAction.appendChild(todoEdit);
todoAction.appendChild(todoDelete);
todoList.appendChild(todoAction);
listTask.appendChild(todoList);
input.value = '';
todoEdit.addEventListener('click', (e) => {
if (todoEdit.innerText.toLowerCase() == 'bi-pencil-square') {
todoInput.removeAttribute("readonly");
todoInput.focus();
} else {
todoEdit.innerText = "bi-pencil-square";
todoInput.setAttribute("readonly", "readonly");
}
});
todoDelete.addEventListener('click', (e) => {
listTask.removeChild(todoList)
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}
:root {
--Button: #432C7A;
--Background: #FCE2DB;
--font-color: #000;
--alternative-font-color: #fff;
--opacty: #998484;
--error: #F83434;
--check: #888;
--margin: 0 1.8125rem;
}
body {
font-family: 'Poppins', sans-serif;
}
input[type=checkbox] {
display: none;
}
.bubble {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.bubble::after {
content: '';
display: block;
opacity: 0;
width: 0px;
height: 0px;
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 999px;
transition: 0.2s ease-in-out;
}
input:checked~.bubble::after {
width: 10px;
height: 10px;
opacity: 1;
}
#name-greet:not([type="radio"]):not([type="checkbox"]),
button {
appearance: none;
border: none;
outline: none;
background: none;
cursor: initial;
}
.container,
.app {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #4EB4FF 0%, rgba(24, 38, 48, 0) 100%);
}
.name {
width: 265px;
height: 262px;
background-color: var(--Background);
border-radius: 40px;
}
.box {
width: 100%;
height: 100%;
max-width: 278px;
max-height: 455px;
background-color: var(--Background);
border-radius: 40px;
}
.name h1 {
font-size: 22px;
font-weight: 700;
color: var(--font-color);
text-align: center;
margin-top: 72px;
}
#name {
margin-top: 26px;
width: 223px;
height: 31px;
border-radius: 10px;
margin-left: 20px;
background: transparent;
}
input[type=text] {
padding-left: 7px;
}
::placeholder {
font-size: 12px;
color: var(--opacty);
opacity: 80%;
}
input:focus::placeholder {
color: transparent;
}
.name h2 {
text-align: center;
font-size: 12px;
}
.greeting .title {
display: flex;
}
.greeting .title input {
margin-left: 0.5rem;
flex: 1 1 0%;
min-width: 0;
margin-right: 1rem;
}
.greeting .title,
.greeting .title input {
color: var(--font-color);
font-size: 1.5rem;
font-weight: bold;
}
#name-greet::placeholder {
font-size: 20px;
color: var(--opacty);
opacity: 80%;
}
.greeting h1 {
margin-left: 29px;
margin-top: 20px;
}
.create-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1.6rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-align: left;
text-transform: uppercase;
}
.create-list h4 {
margin: var(--margin);
font-size: 12px;
color: var(--opacty);
}
.create-list input[type=text] {
display: flex;
align-items: center;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.8rem;
color: var(--font-color);
background-color: transparent;
margin-bottom: 1.1rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: 1px solid #847171;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px;
font-weight: 600;
font-size: 12px;
line-height: 18px;
margin: 0 1.8125rem 1rem;
}
.create-list input[type=submit] {
margin: 0 1.8125rem 1rem;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.5rem 1rem;
color: var(--alternative-font-color);
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: none;
border-radius: 10px;
transition: 0.2s ease-out;
}
.create-list input[type=submit]:hover {
background-color: transparent;
border: 1px solid var(--Button);
color: var(--font-color);
cursor: pointer;
}
.todo-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
}
.todo-list .list {
margin: 1rem 0;
}
.todo-list .todo-item {
display: flex;
align-items: center;
background-color: var(--alternative-font-color);
padding: 0.8rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
margin: var(--margin);
max-width: 234px;
}
.todo-item label {
display: block;
margin-right: 1rem;
cursor: pointer;
}
.todo-item .todo-content {
flex: 1 1 0%;
}
.todo-item .todo-content input {
color: var(--font-color);
font-size: 12px;
margin: 0 5px 10px -15px;
border: none;
}
.todo-item .action {
display: flex;
align-items: center;
}
.todo-item .action i {
display: block;
padding: 0.4rem;
cursor: pointer;
transition: 0.2s ease-in-out;
position: relative;
right: 25px;
}
.todo-item .action .bi-pencil-square {
color: var(--Button);
}
.todo-item .action .bi-trash3-fill {
color: var(--error);
}
.todo-item.done .todo-content input {
text-decoration: line-through;
color: var(--grey);
}
#media only screen and (min-width: 768px) {
.name {
width: 543px;
height: 376px;
}
.name h1 {
font-size: 40px;
}
#name {
width: 418px;
height: 54px;
margin-left: 63px;
}
::placeholder {
font-size: 15px;
}
.name #loading {
font-size: 15px;
}
.box {
max-width: 543px;
max-height: 600px;
}
.greeting .title,
.greeting .title input {
font-size: 2rem;
}
#name-greet::placeholder {
font-size: 25px;
color: var(--opacty);
opacity: 80%;
}
.create-list h3 {
font-size: 1rem;
}
.create-list h4 {
font-size: 1rem;
}
.create-list input[type=text] {
max-width: 468px;
font-size: 18px;
}
.create-list input[type=submit] {
max-width: 468px;
font-size: 18px;
}
.todo-list h3 {
font-size: 1.1rem;
}
.todo-list .todo-item {
max-width: 468px;
}
.todo-item .action .bi-pencil-square {
font-size: 28px;
}
.todo-item .action .bi-trash3-fill {
font-size: 28px;
}
.todo-item .todo-content input {
font-size: 18px;
margin: 10px 5px 10px -15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-------Links------->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css'>
<link rel="stylesheet" href="styles.css">
<!--JS Import-->
<title>Todo-List App</title>
</head>
<body>
<!--App Container-->
<main class="app">
<!--Box for the List-->
<div class="box">
<!--Header of the App-->
<section class="greeting">
<h1 class="title" id="greet">Hello! <input type="text" id="name-greet" placeholder="Name here" />
</h1>
</section>
<!--Add task-->
<section class="create-list">
<h3>Create a Todo</h3>
<form id="add-todo-form">
<h4>What's on your todo?</h4>
<input type="text" name="new-todo-input" id="new-todo-input" placeholder="e.g Practice Coding">
<input type="submit" id="task-submit" value="Add Todo">
</form>
</section>
<!--Todo List-->
<section class="todo-list">
<h3>Todo List</h3>
<div class="list" id="todo-list">
<!--<div class="todo-item">
<label>
<input type="checkbox">
<span class="bubble"></span>
</label>
<div class="todo-content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="action">
<i class="bi bi-pencil-square"></i>
<i class="bi bi-trash3-fill"></i>
</div>-->
</div>
</section>
</div>
</main>
</body>
</html>
I've tried using the appendchild for a simple button and then a word will appear but when I applied the code to the todo list the task I input its not adding the list and I'm achieving this type of todo list in the youtube: https://www.youtube.com/watch?v=MkESyVB4oUw&t=6s
just change your form event listener two lines as i marked
// changed below two lines
const textbox = document.querySelector("#new-todo-input");
const task = textbox.value;
window.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector("#add-todo-form");
const input = document.querySelector("#new-todo-input");
const listTask = document.querySelector('#todo-list');
form.addEventListener('submit', (e) => {
e.preventDefault();
// changed below two lines
const textbox = document.querySelector("#new-todo-input");
const task = textbox.value;
const todoList = document.createElement('div');
todoList.classList.add('todo-item');
const label = document.createElement('label');
const input = document.createElement('input');
const span = document.createElement('span');
label.appendChild(input);
label.appendChild(span);
const todoContent = document.createElement('div');
todoContent.classList.add('todo-content');
todoList.appendChild(todoContent);
const todoInput = document.createElement('input');
todoInput.classList.add('text');
todoInput.type = 'text'
todoInput.value = task;
todoInput.setAttribute('readonly', 'readonly');
todoContent.appendChild(todoInput);
const todoAction = document.createElement('div');
todoAction.classList.add('action');
const todoEdit = document.createElement('i');
todoEdit.classList.add('bi-pencil-square');
const todoDelete = document.createElement('i');
todoDelete.classList.add('bi-trash3-fill');
todoAction.appendChild(todoEdit);
todoAction.appendChild(todoDelete);
todoList.appendChild(todoAction);
listTask.appendChild(todoList);
input.value = '';
todoEdit.addEventListener('click', (e) => {
if (todoEdit.innerText.toLowerCase() == 'bi-pencil-square') {
todoInput.removeAttribute("readonly");
todoInput.focus();
} else {
todoEdit.innerText = "bi-pencil-square";
todoInput.setAttribute("readonly", "readonly");
}
});
todoDelete.addEventListener('click', (e) => {
listTask.removeChild(todoList)
});
});
});
<!-- begin snippet: js hide: false console: true babel: null -->
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}
:root {
--Button: #432C7A;
--Background: #FCE2DB;
--font-color: #000;
--alternative-font-color: #fff;
--opacty: #998484;
--error: #F83434;
--check: #888;
--margin: 0 1.8125rem;
}
body {
font-family: 'Poppins', sans-serif;
}
input[type=checkbox] {
display: none;
}
.bubble {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.bubble::after {
content: '';
display: block;
opacity: 0;
width: 0px;
height: 0px;
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 999px;
transition: 0.2s ease-in-out;
}
input:checked~.bubble::after {
width: 10px;
height: 10px;
opacity: 1;
}
#name-greet:not([type="radio"]):not([type="checkbox"]),
button {
appearance: none;
border: none;
outline: none;
background: none;
cursor: initial;
}
.container,
.app {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #4EB4FF 0%, rgba(24, 38, 48, 0) 100%);
}
.name {
width: 265px;
height: 262px;
background-color: var(--Background);
border-radius: 40px;
}
.box {
width: 100%;
height: 100%;
max-width: 278px;
max-height: 455px;
background-color: var(--Background);
border-radius: 40px;
}
.name h1 {
font-size: 22px;
font-weight: 700;
color: var(--font-color);
text-align: center;
margin-top: 72px;
}
#name {
margin-top: 26px;
width: 223px;
height: 31px;
border-radius: 10px;
margin-left: 20px;
background: transparent;
}
input[type=text] {
padding-left: 7px;
}
::placeholder {
font-size: 12px;
color: var(--opacty);
opacity: 80%;
}
input:focus::placeholder {
color: transparent;
}
.name h2 {
text-align: center;
font-size: 12px;
}
.greeting .title {
display: flex;
}
.greeting .title input {
margin-left: 0.5rem;
flex: 1 1 0%;
min-width: 0;
margin-right: 1rem;
}
.greeting .title,
.greeting .title input {
color: var(--font-color);
font-size: 1.5rem;
font-weight: bold;
}
#name-greet::placeholder {
font-size: 20px;
color: var(--opacty);
opacity: 80%;
}
.greeting h1 {
margin-left: 29px;
margin-top: 20px;
}
.create-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1.6rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-align: left;
text-transform: uppercase;
}
.create-list h4 {
margin: var(--margin);
font-size: 12px;
color: var(--opacty);
}
.create-list input[type=text] {
display: flex;
align-items: center;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.8rem;
color: var(--font-color);
background-color: transparent;
margin-bottom: 1.1rem;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: 1px solid #847171;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
border-radius: 10px;
font-weight: 600;
font-size: 12px;
line-height: 18px;
margin: 0 1.8125rem 1rem;
}
.create-list input[type=submit] {
margin: 0 1.8125rem 1rem;
width: 100%;
max-width: 218px;
font-size: 1.125rem;
padding: 0.5rem 1rem;
color: var(--alternative-font-color);
background-color: var(--Button);
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
;
border: none;
border-radius: 10px;
transition: 0.2s ease-out;
}
.create-list input[type=submit]:hover {
background-color: transparent;
border: 1px solid var(--Button);
color: var(--font-color);
cursor: pointer;
}
.todo-list h3 {
margin-left: 1.8125rem;
margin-bottom: 1rem;
font-weight: 100;
font-size: 15px;
line-height: 18px;
text-transform: uppercase;
}
.todo-list .list {
margin: 1rem 0;
}
.todo-list .todo-item {
display: flex;
align-items: center;
background-color: var(--alternative-font-color);
padding: 0.8rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
margin: var(--margin);
max-width: 234px;
}
.todo-item label {
display: block;
margin-right: 1rem;
cursor: pointer;
}
.todo-item .todo-content {
flex: 1 1 0%;
}
.todo-item .todo-content input {
color: var(--font-color);
font-size: 12px;
margin: 0 5px 10px -15px;
border: none;
}
.todo-item .action {
display: flex;
align-items: center;
}
.todo-item .action i {
display: block;
padding: 0.4rem;
cursor: pointer;
transition: 0.2s ease-in-out;
position: relative;
right: 25px;
}
.todo-item .action .bi-pencil-square {
color: var(--Button);
}
.todo-item .action .bi-trash3-fill {
color: var(--error);
}
.todo-item.done .todo-content input {
text-decoration: line-through;
color: var(--grey);
}
#media only screen and (min-width: 768px) {
.name {
width: 543px;
height: 376px;
}
.name h1 {
font-size: 40px;
}
#name {
width: 418px;
height: 54px;
margin-left: 63px;
}
::placeholder {
font-size: 15px;
}
.name #loading {
font-size: 15px;
}
.box {
max-width: 543px;
max-height: 600px;
}
.greeting .title,
.greeting .title input {
font-size: 2rem;
}
#name-greet::placeholder {
font-size: 25px;
color: var(--opacty);
opacity: 80%;
}
.create-list h3 {
font-size: 1rem;
}
.create-list h4 {
font-size: 1rem;
}
.create-list input[type=text] {
max-width: 468px;
font-size: 18px;
}
.create-list input[type=submit] {
max-width: 468px;
font-size: 18px;
}
.todo-list h3 {
font-size: 1.1rem;
}
.todo-list .todo-item {
max-width: 468px;
}
.todo-item .action .bi-pencil-square {
font-size: 28px;
}
.todo-item .action .bi-trash3-fill {
font-size: 28px;
}
.todo-item .todo-content input {
font-size: 18px;
margin: 10px 5px 10px -15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-------Links------->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css'>
<link rel="stylesheet" href="styles.css">
<!--JS Import-->
<title>Todo-List App</title>
</head>
<body>
<!--App Container-->
<main class="app">
<!--Box for the List-->
<div class="box">
<!--Header of the App-->
<section class="greeting">
<h1 class="title" id="greet">Hello! <input type="text" id="name-greet" placeholder="Name here" />
</h1>
</section>
<!--Add task-->
<section class="create-list">
<h3>Create a Todo</h3>
<form id="add-todo-form">
<h4>What's on your todo?</h4>
<input type="text" name="new-todo-input" id="new-todo-input" placeholder="e.g Practice Coding">
<input type="submit" id="task-submit" value="Add Todo">
</form>
</section>
<!--Todo List-->
<section class="todo-list">
<h3>Todo List</h3>
<div class="list" id="todo-list">
<!--<div class="todo-item">
<label>
<input type="checkbox">
<span class="bubble"></span>
</label>
<div class="todo-content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="action">
<i class="bi bi-pencil-square"></i>
<i class="bi bi-trash3-fill"></i>
</div>-->
</div>
</section>
</div>
</main>
</body>
</html>
I want to style the button with a straight cut bottom right corner but I got the problem. the problem is when I use clip-path in css the after pseudo-elements disappear
My button:
What I want:
I used clip-path but the after pseudo-elements disappear
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght#500;700&display=swap');
body {
height: 100vh;
background-color: rgba(8, 41, 85, 1);
display: flex;
align-items: center;
justify-content: center;
}
.button-52 {
clip-path: polygon(100% 0, 100% 69%, 92% 100%, 0 99%, 0 0);
font-family: "Noto Sans Lao";
padding: .5rem 2rem;
font-weight: bold;
font-size: 16px;
font-weight: 200;
letter-spacing: 1px;
outline: 0;
border: none;
cursor: pointer;
position: relative;
background-color: #fff;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
transition: ease-in .2s;
}
.button-52:after {
content: "";
background-color: transparent;
border: 3px solid #fff;
width: 95%;
z-index: -1;
position: absolute;
height: 95%;
bottom: 4px;
right: 8px;
}
.button-52:hover {
transform: scale(1.07)
}
<button class="button-52" role="button">ຂໍ້ມູນເພີ່ມເຕີມ</button>
You can "extend" clip-path to include the ::after element:
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght#500;700&display=swap');
body {
height: 100vh;
background-color: rgba(8, 41, 85, 1);
display: flex;
align-items: center;
justify-content: center;
}
.button-52 {
clip-path: polygon(100% -20%, 100% 69%, 92% 100%, -20% 99%, -20% -20%);
font-family: "Noto Sans Lao";
padding: .5rem 2rem;
font-weight: bold;
font-size: 16px;
font-weight: 200;
letter-spacing: 1px;
outline: 0;
border: none;
cursor: pointer;
position: relative;
background-color: #fff;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
transition: ease-in .2s;
}
.button-52:after {
content: "";
background-color: transparent;
border: 3px solid #fff;
width: 95%;
z-index: -1;
position: absolute;
height: 95%;
bottom: 4px;
right: 8px;
}
.button-52:hover {
transform: scale(1.07)
}
<button class="button-52" role="button">ຂໍ້ມູນເພີ່ມເຕີມ</button>
Use a gradient coloration on the button
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght#500;700&display=swap');
body {
height: 100vh;
background-color: rgba(8, 41, 85, 1);
display: flex;
align-items: center;
justify-content: center;
}
.button-52 {
font-family: "Noto Sans Lao";
padding: .5rem 2rem;
font-weight: bold;
font-size: 16px;
font-weight: 200;
letter-spacing: 1px;
border: none;
cursor: pointer;
position: relative;
background:linear-gradient(-45deg,#0000 8px, #fff 0);
touch-action: manipulation;
transition: ease-in .2s;
}
.button-52:after {
content: "";
position: absolute;
inset: -6px 8px 4px -6px;
border: 3px solid #fff;
}
.button-52:hover {
transform: scale(1.07)
}
<button class="button-52" role="button">ຂໍ້ມູນເພີ່ມເຕີມ</button>
I have a page that looks like this.
//$(document).ready(function() {
// function viewport_height() {
// var window_height = $(window).height();
// $('#wrapper').height(window_height);
// $('#chat-area').height = $(window_height);
// }
// viewport_height();
// $(window).resize(function() {
// viewport_height();
// });
//});
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f7f7f7;
padding: 0 10px;
}
.wrapper{
background: #fff;
max-width: 450px;
width: 100%;
border-radius: 16px;
box-shadow:
0 0 128px 0 rgba(0, 0, 0, 0.1),
0 32px 64px -48px rgba(0, 0, 0, 0.5);
}
/* Login & Signup Form CSS Start */
.form{
padding: 25px 30px;
}
.form header{
font-size: 25px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
.form form{
margin: 20px 0;
}
.form form .error-text{
color: #721c24;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
background: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 10px;
display: none;
}
.form form .name-details{
display: flex;
}
.form .name-details .field:first-child{
margin-right: 10px;
}
.form .name-details .field:last-child{
margin-left: 10px;
}
.form form .field{
display: flex;
margin-bottom: 10px;
flex-direction: column;
position: relative;
}
.form form .field label{
margin-bottom: 2px;
}
.form form .input input{
height: 40px;
width: 100%;
font-size: 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form form .field input{
outline: none;
}
.form form .image input{
font-size: 17px;
}
.form form .button input{
height: 45px;
border: none;
color: #fff;
font-size: 17px;
background: #333;
border-radius: 5px;
cursor: pointer;
margin-top: 13px;
}
.form form .field i{
position: absolute;
right: 15px;
top: 70%;
color: #ccc;
cursor: pointer;
transform: translateY(-50%);
}
.form form .field i.active::before{
color: #333;
content: "\f070";
}
.form .link{
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.form .link a{
color: #333;
}
.form .link a:hover{
text-decoration: underline;
}
/* Users List CSS Start */
.users{
padding: 25px 30px;
}
.users header,
.users-list a{
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
}
.wrapper img{
object-fit: cover;
border-radius: 50%;
}
.users header img{
height: 50px;
width: 50px;
}
:is(.users, .users-list) .content{
display: flex;
align-items: center;
}
:is(.users, .users-list) .content .details{
color: #000;
margin-left: 20px;
}
:is(.users, .users-list) .details span{
font-size: 18px;
font-weight: 500;
}
.users header .logout{
display: block;
background: #333;
color: #fff;
outline: none;
border: none;
padding: 7px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 17px;
}
.users .search{
margin: 20px 0;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
.users .search .text{
font-size: 18px;
}
.users .search input{
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.users .search input.show{
opacity: 1;
pointer-events: auto;
}
.users .search button{
position: relative;
z-index: 1;
width: 47px;
height: 42px;
font-size: 17px;
cursor: pointer;
border: none;
background: #fff;
color: #333;
outline: none;
border-radius: 0 5px 5px 0;
transition: all 0.2s ease;
}
.users .search button.active{
background: #333;
color: #fff;
}
.search button.active i::before{
content: '\f00d';
}
.users-list{
max-height: 350px;
overflow-y: auto;
}
:is(.users-list, .chat-box)::-webkit-scrollbar{
width: 0px;
}
.users-list a{
padding-bottom: 10px;
margin-bottom: 15px;
padding-right: 15px;
border-bottom-color: #f1f1f1;
}
.users-list a:last-child{
margin-bottom: 0px;
border-bottom: none;
}
.users-list a img{
height: 40px;
width: 40px;
}
.users-list a .details p{
color: #67676a;
}
.users-list a .status-dot{
font-size: 12px;
color: #468669;
padding-left: 10px;
}
.users-list a .status-dot.offline{
color: #ccc;
}
/* Chat Area CSS Start */
.chat-area header{
display: flex;
align-items: center;
padding: 18px 30px;
}
.chat-area header .back-icon{
color: #333;
font-size: 18px;
}
.chat-area header img{
height: 45px;
width: 45px;
margin: 0 15px;
}
.chat-area header .details span{
font-size: 17px;
font-weight: 500;
}
.chat-box{
position: relative;
min-height: 500px;
max-height: 500px;
overflow-y: auto;
padding: 10px 30px 20px 30px;
background: #f7f7f7;
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text{
position: absolute;
top: 45%;
left: 50%;
width: calc(100% - 50px);
text-align: center;
transform: translate(-50%, -50%);
}
.chat-box .chat{
margin: 15px 0;
}
.chat-box .chat p{
word-wrap: break-word;
padding: 8px 16px;
box-shadow: 0 0 32px rgb(0 0 0 / 8%),
0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing{
display: flex;
}
.chat-box .outgoing .details{
margin-left: auto;
max-width: calc(100% - 130px);
}
.outgoing .details p{
background: #333;
color: #fff;
border-radius: 18px 18px 0 18px;
}
.chat-box .incoming{
display: flex;
align-items: flex-end;
}
.chat-box .incoming img{
height: 35px;
width: 35px;
}
.chat-box .incoming .details{
margin-right: auto;
margin-left: 10px;
max-width: calc(100% - 130px);
}
.incoming .details p{
background: #fff;
color: #333;
border-radius: 18px 18px 18px 0;
}
.typing-area{
padding: 18px 30px;
display: flex;
justify-content: space-between;
}
.typing-area input{
height: 45px;
width: calc(100% - 58px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
}
.typing-area button{
color: #fff;
width: 55px;
border: none;
outline: none;
background: #333;
font-size: 19px;
cursor: pointer;
opacity: 0.7;
pointer-events: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease;
}
.typing-area button.active{
opacity: 1;
pointer-events: auto;
}
/* Responive media query */
#media screen and (max-width: 450px) {
.form, .users{
padding: 20px;
}
.form header{
text-align: center;
}
.form form .name-details{
flex-direction: column;
}
.form .name-details .field:first-child{
margin-right: 0px;
}
.form .name-details .field:last-child{
margin-left: 0px;
}
.users header img{
height: 45px;
width: 45px;
}
.users header .logout{
padding: 6px 10px;
font-size: 16px;
}
:is(.users, .users-list) .content .details{
margin-left: 15px;
}
.users-list a{
padding-right: 10px;
}
.chat-area header{
padding: 15px 20px;
}
.chat-box{
min-height: 400px;
padding: 10px 15px 15px 20px;
}
.chat-box .chat p{
font-size: 15px;
}
.chat-box .outogoing .details{
max-width: 230px;
}
.chat-box .incoming .details{
max-width: 265px;
}
.incoming .details img{
height: 30px;
width: 30px;
}
.chat-area form{
padding: 20px;
}
.chat-area form input{
height: 40px;
width: calc(100% - 48px);
}
.chat-area form button{
width: 45px;
}
}
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Online Chat App | Hello World</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head><body>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<div class="wrapper" id="wrapper">
<section class="chat-area" id="chat-area">
<header>
<div class="details">
<span>User</span>
<p>Active now</p>
</div>
</header>
<div class="chat-box">
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat incoming">
<div class="details">
<p>j</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>tst</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div><div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div></div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
</body></html>
I want the <div class="wrapper"> to resize vertically when height of the device doesn't fit. So when I shrink my browser to a smaller height it will look shrink with it. Also I want the look to stay. I tried to do display: flex; but it just made everything go everywhere. I can't seem to do it. I am trying to do it with JavaScript, but it doesn't work the way it should. Changing the viewport height does not help.
Is this what you are looking for? I wasn't 100% sure from the description
The only css I added are at the bottom of the css section
.chat-area {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
flex-shrink: 0;
}
.chat-box {
flex-grow: 1;
min-height: auto;
}
The above is the only css I added, the min-height: auto; was to override your original code. Original code is not modified
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #f7f7f7;
padding: 0 10px;
}
.wrapper {
background: #fff;
max-width: 450px;
width: 100%;
border-radius: 16px;
box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
}
/* Login & Signup Form CSS Start */
.form {
padding: 25px 30px;
}
.form header {
font-size: 25px;
font-weight: 600;
padding-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
.form form {
margin: 20px 0;
}
.form form .error-text {
color: #721c24;
padding: 8px 10px;
text-align: center;
border-radius: 5px;
background: #f8d7da;
border: 1px solid #f5c6cb;
margin-bottom: 10px;
display: none;
}
.form form .name-details {
display: flex;
}
.form .name-details .field:first-child {
margin-right: 10px;
}
.form .name-details .field:last-child {
margin-left: 10px;
}
.form form .field {
display: flex;
margin-bottom: 10px;
flex-direction: column;
position: relative;
}
.form form .field label {
margin-bottom: 2px;
}
.form form .input input {
height: 40px;
width: 100%;
font-size: 16px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.form form .field input {
outline: none;
}
.form form .image input {
font-size: 17px;
}
.form form .button input {
height: 45px;
border: none;
color: #fff;
font-size: 17px;
background: #333;
border-radius: 5px;
cursor: pointer;
margin-top: 13px;
}
.form form .field i {
position: absolute;
right: 15px;
top: 70%;
color: #ccc;
cursor: pointer;
transform: translateY(-50%);
}
.form form .field i.active::before {
color: #333;
content: "\f070";
}
.form .link {
text-align: center;
margin: 10px 0;
font-size: 17px;
}
.form .link a {
color: #333;
}
.form .link a:hover {
text-decoration: underline;
}
/* Users List CSS Start */
.users {
padding: 25px 30px;
}
.users header,
.users-list a {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
justify-content: space-between;
}
.wrapper img {
object-fit: cover;
border-radius: 50%;
}
.users header img {
height: 50px;
width: 50px;
}
:is(.users,
.users-list) .content {
display: flex;
align-items: center;
}
:is(.users,
.users-list) .content .details {
color: #000;
margin-left: 20px;
}
:is(.users,
.users-list) .details span {
font-size: 18px;
font-weight: 500;
}
.users header .logout {
display: block;
background: #333;
color: #fff;
outline: none;
border: none;
padding: 7px 15px;
text-decoration: none;
border-radius: 5px;
font-size: 17px;
}
.users .search {
margin: 20px 0;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
.users .search .text {
font-size: 18px;
}
.users .search input {
position: absolute;
height: 42px;
width: calc(100% - 50px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.users .search input.show {
opacity: 1;
pointer-events: auto;
}
.users .search button {
position: relative;
z-index: 1;
width: 47px;
height: 42px;
font-size: 17px;
cursor: pointer;
border: none;
background: #fff;
color: #333;
outline: none;
border-radius: 0 5px 5px 0;
transition: all 0.2s ease;
}
.users .search button.active {
background: #333;
color: #fff;
}
.search button.active i::before {
content: '\f00d';
}
.users-list {
max-height: 350px;
overflow-y: auto;
}
:is(.users-list,
.chat-box)::-webkit-scrollbar {
width: 0px;
}
.users-list a {
padding-bottom: 10px;
margin-bottom: 15px;
padding-right: 15px;
border-bottom-color: #f1f1f1;
}
.users-list a:last-child {
margin-bottom: 0px;
border-bottom: none;
}
.users-list a img {
height: 40px;
width: 40px;
}
.users-list a .details p {
color: #67676a;
}
.users-list a .status-dot {
font-size: 12px;
color: #468669;
padding-left: 10px;
}
.users-list a .status-dot.offline {
color: #ccc;
}
/* Chat Area CSS Start */
.chat-area header {
display: flex;
align-items: center;
padding: 18px 30px;
}
.chat-area header .back-icon {
color: #333;
font-size: 18px;
}
.chat-area header img {
height: 45px;
width: 45px;
margin: 0 15px;
}
.chat-area header .details span {
font-size: 17px;
font-weight: 500;
}
.chat-box {
position: relative;
min-height: 500px;
max-height: 500px;
overflow-y: auto;
padding: 10px 30px 20px 30px;
background: #f7f7f7;
box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%), inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
}
.chat-box .text {
position: absolute;
top: 45%;
left: 50%;
width: calc(100% - 50px);
text-align: center;
transform: translate(-50%, -50%);
}
.chat-box .chat {
margin: 15px 0;
}
.chat-box .chat p {
word-wrap: break-word;
padding: 8px 16px;
box-shadow: 0 0 32px rgb(0 0 0 / 8%), 0rem 16px 16px -16px rgb(0 0 0 / 10%);
}
.chat-box .outgoing {
display: flex;
}
.chat-box .outgoing .details {
margin-left: auto;
max-width: calc(100% - 130px);
}
.outgoing .details p {
background: #333;
color: #fff;
border-radius: 18px 18px 0 18px;
}
.chat-box .incoming {
display: flex;
align-items: flex-end;
}
.chat-box .incoming img {
height: 35px;
width: 35px;
}
.chat-box .incoming .details {
margin-right: auto;
margin-left: 10px;
max-width: calc(100% - 130px);
}
.incoming .details p {
background: #fff;
color: #333;
border-radius: 18px 18px 18px 0;
}
.typing-area {
padding: 18px 30px;
display: flex;
justify-content: space-between;
}
.typing-area input {
height: 45px;
width: calc(100% - 58px);
font-size: 16px;
padding: 0 13px;
border: 1px solid #e6e6e6;
outline: none;
border-radius: 5px 0 0 5px;
}
.typing-area button {
color: #fff;
width: 55px;
border: none;
outline: none;
background: #333;
font-size: 19px;
cursor: pointer;
opacity: 0.7;
pointer-events: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease;
}
.typing-area button.active {
opacity: 1;
pointer-events: auto;
}
/* Responive media query */
#media screen and (max-width: 450px) {
.form,
.users {
padding: 20px;
}
.form header {
text-align: center;
}
.form form .name-details {
flex-direction: column;
}
.form .name-details .field:first-child {
margin-right: 0px;
}
.form .name-details .field:last-child {
margin-left: 0px;
}
.users header img {
height: 45px;
width: 45px;
}
.users header .logout {
padding: 6px 10px;
font-size: 16px;
}
:is(.users,
.users-list) .content .details {
margin-left: 15px;
}
.users-list a {
padding-right: 10px;
}
.chat-area header {
padding: 15px 20px;
}
.chat-box {
min-height: 400px;
padding: 10px 15px 15px 20px;
}
.chat-box .chat p {
font-size: 15px;
}
.chat-box .outogoing .details {
max-width: 230px;
}
.chat-box .incoming .details {
max-width: 265px;
}
.incoming .details img {
height: 30px;
width: 30px;
}
.chat-area form {
padding: 20px;
}
.chat-area form input {
height: 40px;
width: calc(100% - 48px);
}
.chat-area form button {
width: 45px;
}
}
.chat-area {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.chat-area header,
.chat-area typing-area {
flex-shrink: 0;
}
.chat-box {
flex-grow: 1;
min-height: auto;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Online Chat App | Hello World</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<input id="hidden" type="hidden" value="7">
<div class="wrapper">
<section class="chat-area">
<header>
<i class="fas fa-arrow-left"></i>
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<span>Justin Skinner</span>
<p>Active now</p>
</div>
</header>
<div class="chat-box">
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat incoming">
<img src="https://sign-up-hello-world.000webhostapp.com/ChatApp/php/images/1617736821tigeer.jpg" alt="">
<div class="details">
<p>j</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>tst</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div>
<div class="chat outgoing">
<div class="details">
<p>test</p>
</div>
</div>
</div>
<form action="#" class="typing-area">
<input type="text" class="incoming_id" name="incoming_id" value="340930066" hidden="">
<input type="text" name="message" class="input-field" placeholder="Type a message here..." autocomplete="off">
<button><i class="fab fa-telegram-plane"></i></button>
</form>
</section>
</div>
<script src="javascript/chat.js"></script>
</body>
</html>
Here's how to do it with flexbox using this answer.
JSFiddle
body{
height:100vh
}
.wrapper{
height:100%;
}
.chat-area{
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
height: 100%; /* needs to take the parents height, alternative: body {display: flex} */
}
.chat-box{
flex: 1; /* takes the remaining height of the "container" div */
overflow: auto; /* to scroll just the "main" div */
}
I'm not sure how to describe this further, and sorry if it's hard to understand what I"m trying to say.
Hello, firstly I'll like to apologize as I'm a newbie to this. I'd like to know if it's possible to ensure that the search-box in the codesnippet does not transform after I have keyed in some words. In other words it does not go back to its original state which is a circle when there's input.
Thank you in advance!
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>
In your input you can add something like an id and required like this:
<input id=someInput autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search..." required>
In your css add :
#someInput: :valid { width: 240px;}
and do what you want with invalid:
#someInput :invalid { what you want}
Tested and it works fine, good luck!
This is what javascript is for. To get the desired behavior you could check for a non empty string in the search field. Or you can listen for a click and change the state like I did here. This way it wont shrink when you delete text though.
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
<script>
const search = document.getElementsByClassName("search-txt")[0];
search.addEventListener("click", function() {
search.style.width = '240px';
});
</script>
</body>
</html>
You can use input:focus to make sure the text box is wide enough when being typed / in focus
I have added js, so that the input box stays same if there any value present, hope this helps you
$('.search-txt').on("input", function() {
if($('.search-txt').val())
{
$('.search-txt').addClass('inputExist');
}
else
{
$('.search-txt').removeClass('inputExist');
}
});
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus, .search-txt.inputExist {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>
i am trying to redirect to this page and go a specific part of the page, which is powered by java script to move around. i want to be able to go to say, delete section. but i cant achieve it using localhost/entry.php#delete . what am i doing wrong? below is the snippet.
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>
Anchors apply just for simple navigation around the page, for changing tabs etc. you need to add some extra code, something like:
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
switchTab = function(href){
var $link = $('a[href=' + href + ']'),
$tab = $(href);
$('.active').removeClass(ACTIVE_CLASS);
$link.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$($tab)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
}
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
switchTab($(this).attr('href'));
});
if(window.location.hash){
switchTab(window.location.hash);
}
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>