I am trying to make a search bar type of thing , by seeing youtube video : https://youtu.be/TlP5WIxVirU?t=471
but got stuck don't know why
the stack overflow is executing and getting the desired output but my pc doesnot
what could be the reason ??
I want to get the output as : Output
but while I execute this code, I'm getting the error as :
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'content')
at script.js:7:39
please help me
const userCardTemplate = document.querySelector("[data-user-template]")
fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json()).then(data => {
const card = userCardTemplate.content.cloneNode(true).children[0]
console.log(card)
})
.search-wrapper{
display: flex;
flex-direction: column;
}
input {
font-size: 1rem;
}
.user-cards {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
gap: .25 re,;
margin-top: 1rem;
}
.card {
border: 1px solid black;
background-color: white;
padding: .5 rem;
}
.card .header{
margin-bottom: .25 rem;
}
.card .body {
font-size: .8rem;
}
.hide{
display: none;
}
<!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>Search Engine</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="search-wrapper">
<label for="search">Search Users</label>
<input type="search" id ="search">
</div>
<div class="user-cards" >
</div>
<template data-user-template>
<div class="card">
<div class="header">
</div>
<div class="body">
</div>
</div>
</template>
</body>
</html>
The error says exactly what you needed to read. userCardTemplate was not found in the DOM. The reason being the moment in which you trigger the <script> execution. And that's in head. At the moment the parser stopped to read the current DOM there was no such element.
Instead you have two solutions:
Use the defer attribute:
<script src="script.js" defer></script>
in order to defer your script execution, or
place the SCRIPT right before the closing BODY tag:
<script src="script.js"></script>
</body>
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.
I tried to run my html file but it doesn't know where the css file is .I have two files index.html and style.css both on my desktop.Here how my index.html file looks like :
<!DOCTYPE html>
<html lang="en">
<head>
<link href="./style.css" rel="stylesheet" type="text/css"/>
</head>
<section class="header">
// lots of info here
</section>
and my css has all the things needed.
but the html doesn't get connected to the css file
here is how a part of my style.css look like :
.user {
& {
width: 300px;
margin-left: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
i {
font-size: $large;
&:hover {
color: $white;
cursor: pointer;
}
}
&__notifications {}
&__inbox {}
...
Wrap your <section> as well as other html elements after your <head> tag within <body> tags.
Recompile the scss code to css.
If the files are in the same directory, you should be using style.css as your href (without any leading slashes or dots). And don't forget to close your <body> and <html> tags at the end.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="header">
//lots of info here
</section>
</body>
</html>
Also, it looks like your CSS is actually written in a preprocessing language (possibly SCSS). You should remove all of the variables ($...) and flatten all of the nested selectors (&).
.user {
width: 300px;
margin-left: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
.user i {
font-size: 10em; /* or whatever $large was */
}
.user i:hover {
color: #fff; /* or whatever $white was */
cursor: pointer;
}
.user__notifications {}
.user__inbox {}
I am facing a strange issue while creating a responsive webpage.
Basically, I created a simple html page(Page 1) and uploaded it to a blob storage. The page is then run in Azure AD's B2C portal which inserts login form into my html page (using CORS) and shows the combined page to the user. Since I have the source code of the final combined page(Page 2) which automatically merges my content with Azure's form, I am able to test the page from my local machine as well.
The issues I am facing is that Page 1 (which I upload to blob) stretches to window perfectly (both height and width), but Page-2 after it's merged with Azure login-form does not stretch along height.
I have already verified using chrome developer tools (enabled using F12 on chrome) that css style on html/body in page2 is the one I applied and only other thing added to it by browser/Azure is {display: block;} which I think should not cause this current issue.
Below are the source codes :-
Page 1 :
<html>
<head>
<title>User Details</title>
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/common-1.0.4.css">
<link type="text/css" rel="stylesheet" href="https://login.microsoftonline.com/static/tenant/default/css/selfAsserted.1.0.8.css">
<script src="https://login.microsoftonline.com/static/tenant/default/js/layout-1.0.0.min.js"></script>-->
<style>
#main_div {
background-image:url('https://adasphase2.blob.core.windows.net/democontainerblockblob/mm_background.jpg');
/* background-color: 00ff00; */
height:100%;
width:100%;
background-repeat:no-repeat;
background-size:100% 100%;
}
body {
/*background-color: #ff00ff;*/
height:100%;
width:100%;
}
h1 {
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
padding:0% 5% 5% 5%;
}
img {
width:100%;
padding-top:10%;
/*padding-top:10%;
padding-left:5%;
padding-right:5%*/
}
label[for=password] {
display: none;
}
h2 {
display: none;
}
{
}
label[for=logonIdentifier] {
display: none;
}
#forgotPassword {
display: none;
}
#password, #logonIdentifier {
margin: 2% 5% 2% 5%;
width: 90%;
}
#password, #logonIdentifier {
margin: 1% 5%;
width: 86%;
padding: 2% 2%;
}
#next {
background-color: #222222;
border-style: solid;
border-radius: 5px;
border-color: #ffffff;
color: white;
padding: 2% 2%;
text-align: center;
font-size: 3vw;
font-family: sans-serif;
border-width: 1px;
width: 90%;
margin: 2% 5%;
text-transform: uppercase;
font-weight: bold;
}
#next:active {
background-color: #444444;
}
div.create {
display: none;
}
#forgot{
font-size: 3vw;
letter-spacing: 0px;
color:#F8F8F8;
font-family: sans-serif;
margin:2% 5%
}
</style
</head>
<body>
<div id="main_div">
<img id="background_background_image" src="https://adasphase2.blob.core.windows.net:443/democontainerblockblob/splash_stacked_logo.png" alt="Illustration" />
<h1>LOGIN WITH A TARPPORTAL.COM ACCOUNT OR CLICK REGISTER FOR A NEW ACCOUNT.</h1>
<div id="api"></div>
</div>
</body>
</html>
Page2 (combined page):
<!DOCTYPE html>
<!-- Build: 1.0.0.114 -->
<html>
<head>
<title>Loading...</title>
<script src="https://login.microsoftonline.com/static/library/require-2.1.17.min.js"></script>
<script>window.staticHost="https://login.microsoftonline.com/static";window.targetSlice="001-000";</script>
<script>var elementUrl="elements/selfasserted/unifiedSSP-1.0.8.min";</script>
<script>define('template.CP', [/** no dependencies. **/], {"list":[]});
define('template.SA_FIELDS', [/** no dependencies. **/], {"AttributeFields":[{"IS_TEXT":true,"IS_PASSWORD":false,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"LogonIdentifier","ID":"logonIdentifier","U_HELP":"","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false},{"IS_TEXT":false,"IS_PASSWORD":true,"IS_DATE":false,"IS_RADIO":false,"IS_DROP":false,"IS_CHECK_MULTI":false,"IS_LINK":false,"VERIFY":false,"DN":"Password","ID":"password","U_HELP":"Enter password","DAY_PRE":"0","MONTH_PRE":"0","YEAR_PRE":"0","IS_REQ":true,"IS_RDO":false}]});
define('language.data', [/** no dependencies. **/], {"email_pattern":"^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$","logonIdentifier_email":"Email Address","requiredField_email":"Please enter your email","logonIdentifier_username":"Username","createaccount_link":"Sign up now","requiredField_username":"Please enter your user name","createaccount_intro":"Don't have an account?","forgotpassword_link":"Forgot your password?","divider_title":"OR","cancel_message":"The user has forgotten their password","button_signin":"Sign in","social_intro":"Sign in with your social account","requiredField_password":"Please enter your password","invalid_password":"The password you entered is not in the expected format.","local_intro_username":"Sign in with your user name","local_intro_email":"Sign in with your existing account","invalid_email":"Please enter a valid email address","unknown_error":"We are having trouble signing you in. Please try again later."});
define('settings.data', [/** no dependencies. **/], {"remoteResource":"https://adasphase2.blob.core.windows.net/democontainerblockblob/RemoteServicesLoginPage.html","retryLimit":3,"api":"CombinedSigninAndSignup","csrf":"R2lYeVl1cEJLYWlpdENnSHJoOHpITHZtWWFaR2Y4eCsvcUZiK3JsTDd5OXFBZFAzUDViNDBtSTczUTd1YnpPS3RpVURmd1dPOGM1K0FZYU5Fam1IRkE9PTsyMDE2LTA1LTE4VDIyOjEzOjU3LjQxNTEwMjJaO0F6U0VkYlRUbDlHenNoQkVHK1JYSUE9PTt7Ik9yY2hlc3RyYXRpb25TdGVwIjoxfQ==","transId":"eyJUSUQiOiJmN2I4ODJjOS03NmJlLTQ0MzktYWJjNi1hNzE1NjM3ZDM4MGQifQ","pageMode":0,"config":{"operatingMode":"Email","sendHintOnSignup":"False","forgotPasswordLinkLocation":"AfterLabel","includePasswordRequirements":"true"},"hosts":{"tenant":"/lexustmstest.onmicrosoft.com/B2C_1_TMS_Lexus_SignUpandSignIn_Policy","policy":"B2C_1_TMS_Lexus_SignUpandSignIn_Policy","static":"https://login.microsoftonline.com/static/"},"locale":{"lang":"en","country":"US"}});
</script>
<script>var cookieEnabled=navigator.cookieEnabled?!0:!1,Constants;typeof navigator.cookieEnabled!="undefined"||cookieEnabled||(document.cookie="probe",cookieEnabled=document.cookie.indexOf("probe")!=-1?!0:!1),function(){document.querySelectorAll||(document.querySelectorAll=function(n){var i=i=document.createStyleSheet(),r=document.all,f=r.length,t,u=[];for(i.addRule(n,"k:v"),t=0;t<f;t+=1)if(r[t].currentStyle.k==="v"&&(u.push(r[t]),u.length>Infinity))break;return i.removeRule(0),u});String.prototype.trim||function(){var n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;String.prototype.trim=function(){return this.replace(n,"")}}()}();cookieEnabled&&(Constants=[],Constants.ERROR_REDIRECT_CONSOLE_STRING="Redirecting back to B2C service with querystring",function(){for(var n,u=function(){},t=["assert","clear","count","debug","dir","dirxml","error","exception","group","groupCollapsed","groupEnd","info","log","markTimeline","profile","profileEnd","table","time","timeEnd","timeStamp","trace","warn"],i=t.length,r=window.console=window.console||{};i--;)n=t[i],r[n]||(r[n]=u)}(),require(["require"],function(){require.config({baseUrl:window.staticHost,paths:{jquery:"library/jquery-1.10.2.min",handlebars:"library/handlebars-2.0.0.min",requirecss:"library/require-css-0.1.8.min",simpleModal:"library/jquery.simplemodal-1.4.5.min",core:"js/core-1.0.17.min",metrics:"js/metrics-1.0.1.min",modal:"js/modal-1.0.1.min",iso:"js/iso-unified-1.0.2.min",element:elementUrl},map:{"*":{css:"requirecss"}},skipDataMain:!0});require(["core","settings.data","metrics","element"],function(n,t,i,r){try{window.Metrics=i;metricResource=window.Metrics.create(t.remoteResource);metricResource.start();function u(){var i,f=canSetHeaders=!0,e=t.retryLimit;window.XDomainRequest?(i=new XDomainRequest,f=canSetHeaders=!1):i=new XMLHttpRequest;i.open("GET",metricResource.id);canSetHeaders&&metricResource.id.indexOf(window.staticHost)===0&&i.setRequestHeader("x-ms-cpim-slice",window.targetSlice);i.onload=function(){var t,u;if(!f||f&&i.status===200){metricResource.end();t=(new Date).getTime();r.initialize(i.responseText);metricResource.setInitializationTime((new Date).getTime()-t);return}u="external?statusCode="+i.status+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(u);return};i.onerror=function(){var t=0,r;f&&(t=i.status);r="external?statusCode="+t+"&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(r)};i.timeout=function(){if(this.tryCount++,this.tryCount<=this.retryLimit){u();return}var t="external?statusCode=4&resource="+encodeURIComponent(metricResource.id);n.redirectToServer(t);return};i.onprogress=function(){};i.send()}u()}catch(f){n.redirectToServer("error?statusCode=0&statusMessage="+encodeURIComponent(f.message)+"&resource="+encodeURIComponent(t.remoteResource))}})}))</script>
</head>
<body>
<style>.no_display{display:none}.error_container h1{color:#333;font-size:1.2em;font-family:'Segoe UI Light',Segoe,'Segoe UI',SegoeUI-Light-final,Tahoma,Helvetica,Arial,sans-serif;font-weight:lighter}.error_container p{color:#333;font-size:.8em;font-family:'Segoe UI',Segoe,SegoeUI-Regular-final,Tahoma,Helvetica,Arial,sans-serif;margin:14px 0}</style>
<noscript>
<div id="no_js">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block JavaScript. You need to allow JavaScript to use this service.</p>
<p>To learn how to allow JavaScript or to find out whether your browser supports JavaScript, check the online help in your web browser.</p>
</div>
</div>
</div>
</noscript>
<div id="no_cookie" class="no_display">
<div class="error_container">
<div>
<h1>We can't sign you in</h1>
<p>Your browser is currently set to block cookies. You need to allow cookies to use this service.</p>
<p>Cookies are small text files stored on your computer that tell us when you're signed in. To learn how to allow cookies, check the online help in your web browser.</p>
</div>
</div>
</div>
<script>if (!cookieEnabled) document.getElementById('no_cookie').className = '';</script>
</body>
</html>
Any help/pointers are appreciated !
You can try
body, html { margin: 0; padding: 0; }
On line 1 of your first page add
<!doctype html>
and then further down you have a typo on the closing style tag
</style <--------
</head>
thanks for your help. I found this post helpful :
Stackoverflow
Adding html{ height:100%; } resolved the issue.
How does facebook vertically align its photos? I inspected their img tag and its parent. The parent doesn't use padding and the img doesn't use margins. There is vertical-align, but I don't think it applies in this case(see Image not vertical-align:middle). I normally vertically align using margins (and sometimes with javascript) so I'm interested in how facebook does it without padding or margins. Does anyone know how they do it?
After doing some research in facebook's website i found the answer,here is the code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img_contain {
height: 700px;
text-align: center;
line-height: 700px;
border: #333333 1px solid;
}
.img_contain img {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="img_contain">
<img src="images/image.jpg" />
</div>
</body>
</html>
Only thing i was missing is adding <!DOCTYPE html> at the top of the document.Now its working.
And one more thing the height and line-height of the parent should be equal and it should be greater than height of the image it contains
TESTED CODE using display: table-cell
*refer to http://www.w3schools.com/cssref/pr_class_display.asp*
test page at http://anotherfeed.com/stack/css/valign.php
<!DOCTYPE html>
<html>
<head>
<title>StackOverflow on Another Feed</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div style="height: 500px; min-height: 500px; width: 500px; border: 1px solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="http://anotherfeed.com/facebook_icon.png" style="display: inline-block; margin-left: auto; margin-right: auto;" />
</div>
</body>
</html>