I am working on building a basic to-do list.
I have a list of elements with delete option for each element next to it.
I am facing issues with having proper spacing between the list elements namely "to-do text" and "Delete" icon.
Note: I'm new to Web programming.
You could set a fixed width on the container element and then use flex box:
<!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" />
<title>Document</title>
<style>
.container {
display: flex;
background-color: grey;
border: 1px solid darkGrey;
width: 300px;
padding: 10px 15px;
}
.title {
flex: 1;
padding-right: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">sample text</div>
<div>delete icon</div>
</div>
<div class="container">
<div class="title">long sample text for illustration purposes.</div>
<div>delete icon</div>
</div>
</body>
</html>
Related
I am new at web development and facing some problem in creating a web page. Actually, I was creating a loading bar animation at the top of the window and set its width to 100vw but it is taking more space than it should take. Here's a picture to demonstrate:
As you can see in the top-right corner it is overflowing the window. Why is that so?
Here's my code:
<!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">
<title>Loading Bar</title>
<style>
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
Thanks in advance!!
Try adding max-width: 100% to your progress bar css, according to https://caniuse.com/viewport-units
there is a known issue on firefox in which the 100vw considers the entire length of the page including the vertical scrollbar as its width. This vertical scrolls is what making your webpage have an horizontal overflow.
<!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">
<title>Loading Bar</title>
<style>
body{ overflow-x: hidden; }
#progress{
background-color: red;
height: 3px;
width: 0vw;
transition: width 3s ease-in-out;
}
*{
margin: 0;
padding: 0;
}
header {
height: 122px;
background-color: black;
}
main {
height: 899px;
background-color: blue;
}
</style>
</head>
<body>
<div id="progress"></div>
<header></header>
<main>
<button id="btn">Reload</button>
</main>
</body>
<script>
btn.addEventListener("click", ()=>{
progress.style.width = "100vw"
})
</script>
</html>
This question already has answers here:
Scroll to the top of the page using JavaScript?
(49 answers)
Closed 2 years ago.
So I have the following in my HTML page:
and i intentionally made it so that the "overflow" happens which results in the scrollbar at the right.
So i made a button called "Click to scroll up". So what i wanted was that everytime we click that button, the document would immediately scroll all the way up. Which means if I were to navigate all the way down, and click the button, it would bring me all the way up.
I looked up and there's a method "scrollTop" but it doesn't seemed to work. Would appreciate some help on this.
document.getElementById("scrollup").addEventListener("click", scrollUpmost);
function scrollUpmost() {
$(document).scrollTop();
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
border: 1px solid orange;
}
.big_div {
border: 1px solid black;
height: 1200px;
}
#scrollup {
margin-top: 900px;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>
$("#scrollup").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.container {
border: 1px solid orange;
}
.big_div {
border: 1px solid black;
height: 1200px;
}
#scrollup {
margin-top: 900px;
}
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>
Please try this code
Well, I have this box container class which is a CSS Grid container. As you can see, it's dynamic because of using repeat(auto-fit, minmax(340px, 1fr))
.box-container {
height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 100px;
}
.box:nth-child(odd) {
background-color: lightblue;
border: 1px solid #000;
}
.box:nth-child(even) {
background-color: aquamarine;
border: 1px solid #000;
}
<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<div class="box-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Resizing the viewport's width, we can get to this situation:
I want that last element to occupy two columns instead of just one, but I can't manage to set that dynamically.
So this is what I expect once I get to that point resizing the viewport's width:
But I only know how to do that statically, spanning that last child. And it's not what I want because I only want it to span the two columns in that point of the viewport's width, and setting it up not dynamically would make it to span ALWAYS the two columns.
You get the required behaviour easily by using flex. The flex-wrap propery will take care of adjusting the items inside the container.
So, when you have small screen device, flex-wrap will move the items those overflows to a new row. Hence, we use flex-grow to tell the items to grow based on the space available.
And the flex-basis will tell the items to limit the minimun width it can shrink.
Here is the working example.
.box-container {
height: 150px;
display: flex;
flex-wrap: wrap;
}
.box{
display: flex;
flex-grow: 1;
flex-basis: 150px;
}
.box:nth-child(odd) {
background-color: lightblue;
border: 1px solid #000;
}
.box:nth-child(even) {
background-color: aquamarine;
border: 1px solid #000;
}
<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<div class="box-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Codepen which demostrated above example.
So I am trying to show some content that's inside of a div but for some reason when I use the chrome debug tools to inspect the code, it's just grayed out.
I can't see anything that's inside the class modal why is that?
#mainDiv {
margin: 10px;
}
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-content: center;
}
.modal{
background-color: white;
width: 30%;
height: 30%;
}
<!DOCTYPE html>
<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>EasyModal</title>
<link rel="stylesheet" href="./style/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mainDiv">
<h1>Easy Modal</h1>
<Button id="modal-btn" type="button" class="btn btn-primary">Buy Now</Button>
</div>
<div class="modal-bg">
<div class="modal">
<h2>Hello World</h2>
<label for="email">Email: </label>
<input type="text">
<button>Subscribe</button>
</div>
</div>
</body>
</html>
This is due to modal class. If you inspect, you'll observe that there is a display: none; property in modal class, which i guess is default bootstrap .modal class.
To solve this, use a different name for .modal class.
I've used a javaScript function to "build" a widget, call it on an HTML page and make it responsive using CSS.
Now, I've to use that same widget on an mvc.net application and i can't make it work like i want it. In the image shown bellow "aluger","venda", "compra" and "permuta" all show up in the same line, and I want them to show up on different lines. I've used display:block and nothing happend.
Those options are loaded automatic.
Can some one please help me?
CSS of DIV:
#div_maior {
display:block;
width: 100%;
height: 100%;
background-color: #ffffcc;
clear: both;
min-height: 50px;
max-height: 200px;
}
#div_global {
clear:left;
display:block;
float:left;
padding: .5%;
border-color: transparent;
height: 100%;
width: 30%;
// overflow: auto;
}
HTML OF THE WIDGET:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body id="body" onload="getFacetasAJAX()">
<label id="div_maior">
<label id="div_global" style="display: inline-block">
</label>
<label id="div_resultados" style="display: inline-block">
</label>
</label>
</body>
</html>