Edited: I was trying to make a chat page that has a message textbox and a button to send inside a form element. Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>A</title>
<style>
body{height: 100vh;}
form{
line-height: 40px;
position: absolute;
}
</style>
</head>
<body>
<form name="form">
<input type="text" placeholder="A message goes here"/>
<button>Send</button>
</form>
<script>
var search = window.screen.height - 40;
document.form.style.top = search + "px";
</script>
</body>
</html>
But the form goes more than 100vh
There is no need for js or absolute positioning...you just need to set it up the way you need to look at it ...when I said use display: flex that needs to be inputed in the container box and your web content should go on a separate section outside your form like so:
body {height: 100%}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {flex: 1;}
form {
width: 100%;
height: 40px;
background: #000;
}
I copy your code and added it here: https://codepen.io/izzy_zeke/pen/OqVOVL
Related
I want to assign height to parent div based on the child content (here SVG is my child which have varied size data). I cannot assign fixed height since the data comes dynamically. I tried giving height: auto but no use. I want whole data which in my case is square boxes should take either black or red background. Since I gave attribute to SVG as ("overflow", "visible"), the content is visible but unfortunately the background do not increase.
Note: My issue is I am not able to give background color to the whole data since the height is not defined. If I do not give overflow property to SVG(child) then the data(square boxes) is also cropped to half like background.
Here is my code snippet.
React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);
function colorLegend(legend: string) {
// logic
select(legend)
.append("svg")
.attr("overflow","visible")
.attr("width", 150 + "px");
}
return (
<div style={{position: "absolute",right: 16,top: 10,backgroundColor: "red",borderRadius:"5px",padding:
"10px"}}>
<label style={{ color: "#6F6F6F" }}>{name}</label>
<div id="legend" style={{backgroundColor: "black"}}></div>
</div>
);
Fiddle link : https://jsfiddle.net/shru90/wvph9tx5/15/
#initial{
display: block;
min-width: 100px;
min-height: 200px;
}
#initial{
position: absolute;
right: 16;
top: 10;
background-color: red;
border-radius: 5px;
padding: 10px;
}
#label{
color:#6F6F6F;
}
#legend{
display: flex;
min-height: 200px;
min-width: 100px;
background-color: black;
color: aliceblue;
margin:0 auto;
}
<!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>
<link rel="stylesheet" href="github.css">
<style>
</style>
</head>
<body>
<div id="initial">
<label id="label">Label name</label>
<div id="legend">123242242424wewdsdsdsdssdsdsdsd</div>
</div>
</body>
</html>
You can limit the height and width using the min attribute. In the code I inserted above you can insert anything and its height and width will change accordingly but the data will never exceed outside of it.
The top part of my checkbox do not word anymore after resizing it and resetting materialize.
Here is sample code:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 0px;
}
</style>
</head>
<body>
<form action="">
<label><input type="checkbox" class="reset-checkbox" style="width:20px;height:20px;" checked="checked" name="firstCheck"/></label>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
Here is the jsfiddle for you to try to click the top part of the checkbox if you want:
https://jsfiddle.net/j4oxgmtc/
Any idea or solution?
Thank you!
Andreas responded to that question in a comment: Exclude materialize css for some specific checkbox
''This happens, because is an inline element. You can set display: inline-block for it to fix it.''
Here is the modified working code: https://jsfiddle.net/vL3fsqjb/2/
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style>
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 0px;
}
</style>
I'm making an editor app with a layout like google sheet or any simple web app with a thin, screenwide toolbar in the top and other stuff below. But... I'm having problem to position items in the toolbar. I plan to place:
a logo in the left corner
something in the middle
two buttons on the right side with specific order (like button A and B where B is closer to the right edge of the screen)
And most importantly i want to position these items inside the toolbar to be vertically in the center.
I tried so many things, but nothing really worked, except the very basic grid system below in which i want to place the items:
.layout {
height: 100vh;
display: grid;
grid-template-columns: 34% 33% auto;
grid-template-rows: 50px auto;
grid-template-areas:
"toolbar toolbar toolbar"
"searchbox resultbox editorbox";
}
.toolbar {
grid-area: toolbar;
}
.searchbox {
grid-area: searchbox;
}
.resultbox {
grid-area: resultbox;
}
.manju-editor {
grid-area: editorbox;
}
Can you pls tell me how could i position items the above described way?
Edit: per request the HTML also added, the app is created with create-react-app, so the html is its standard index.html and app is "assigned" to the root:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
render method from app.js:
<div className={userSession.layout.name}>
{userSession.layout.toolbar.active && <div className="toolbar">
{this.generateComponents("toolbar")}
</div>}
{userSession.layout.search.active && <div className="searchbox">
search
</div>}
{userSession.layout.results.active && <div className="resultbox">
result
</div>}
{userSession.layout.editor.active && <div className="editor">
editor
</div>}
</div>
You can try something like this:
/*
* containing div, position is relative, set the div height here
*/
.toolbar {
position: relative;
height: 30px;
}
/*
* all 3 children have absolute positioning
*/
.left {
position: absolute;
left: 0px;
top: 0px;
}
.right {
position: absolute;
right:0px;
top:0px;
}
.middle {
position: absolute;
top: 0px;
/* center the element */
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
<div class="toolbar">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
Ok, found the answer. It's here and working :)
As per the question, I am attempting to figure out where "​​" is coming from in my CSS. I use FlashDevelop, and up until now, it has worked fine. I have a min file I'm uploading to the site, and ​​ appears at the end of it, sometimes in the middle before the last little rule. Has anyone else encountered this kind of problem before? My CSS is mostly just class rules, rather basic defining columns. I am using Bootstrap and Font Awesome alongside it, but this just started happening today.
This is my code pre-minify:
html, body {
height: 100%;
background-color: #e6eded;
}
.box {
height: auto;
overflow: hidden;
}
.right {
width: 240px;
float: right;
background: #aafed6;
}
.header {
height: 55px;
background-color: #818181;
}
.left {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}
After FlashDevelop produces the minified file and uploads it, I get this:
html,body{height:100%;background-color:#e6eded;}
.box{height:auto;overflow:hidden;}
.right{width:240px;float:right;background:#aafed6;}
.header{height:55px;background-color:#818181;}
.left{float:none;background:#e8f6fe;width:auto;overflow:hidden;}
​​
This is the remainder of the template I'm working on as requested.
<!DOCTYPE html>
<html lang="en">
<!-- BEGIN HEAD -->
<head>
<meta charset="UTF-8" />
<title>Teonnyn.com</title>
<meta content="" name="description" />
<meta content="" name="author" />
<?PHP echo $this->Html->css("bootstrap.min"); ?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<?PHP echo $this->Html->css("main.min"); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="box">
<div class="header">
</div>
<div class="right">
Test
</div>
<div class="left">
</div>
</div>
</body>
</html>
#Tomalak provided the correct answer. While I had to hunt for the symbol, opening a plain text editor displayed the actual code and allowed me to delete it correctly.
What the hell is that? I found there is some problem with padding in chrome with this elements but even if set the padding to 0 in both (textarea and input) they are not "looking same" width in chrome. The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>WTF</title>
<style>
input {
width: 200px;
padding: 0px;
}
textarea {
width: 200px;
padding: 0px;
}
table {
background-color: blue;
}
</style>
</head>
<body>
<form>
<table>
<tr><td><input type="text" /></td></tr>
<tr><td><textarea></textarea></td></tr>
</table>
<form>
</body>
</html>
If you add border:0, it fixes itself in chrome. See fiddle: http://jsfiddle.net/Q96yN/2/