I've followed the steps at this link to setup a custom signin page for Azure AD B2C:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-user-flow
Which are essentially:
Create a custom HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Product Brand Name</title>
</head>
<body>
<div id="api"></div>
</body>
</html>
Upload it to a file hosting service
In Azure AD B2C > User Flows > [ your_sign_in_flow ], set the following:
Use custom page content: YES
Custom page URI: [ paste the URL of your hosted file here ]
Click Save
Click Run User Flow to test the flow
That produces this login page:
Where the HTML of the api div is:
<div id="api" data-name="Unified">
<div class="heading">
<h1 role="heading">Sign in</h1>
</div>
<div class="claims-provider-list-buttons social" aria-label="Sign in with your social account" role="form">
<div class="intro">
<h2 aria-level="1">Sign in with your social account</h2>
</div>
<div class="options">
<div>
<button class="accountButton firstButton claims-provider-selection" id="AzureADPeople" role="link" autofocus="">Azure AD People</button>
</div>
</div>
</div>
<div class="divider">
<h2>OR</h2>
</div>
<form id="localAccountForm" action="JavaScript:void(0);" class="localAccount" aria-label="Sign in with your email address">
<div class="intro">
<h2 aria-level="1">
Sign in with your email address
</h2>
</div>
<div class="error pageLevel" aria-hidden="true" role="alert" style="display: none;">
<p></p>
</div>
<div class="entry">
<div class="entry-item">
<label for="email">
Email Address
</label>
<div class="error itemLevel" aria-hidden="true" role="alert" style="display: none;">
<p></p>
</div>
<input type="email" id="email" name="Email Address" title="Please enter a valid Email Address" pattern="^[a-zA-Z0-9!#$%&'+^_`{}~-]+(?:\.[a-zA-Z0-9!#$%&'+^_`{}~-]+)*#(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$" autofocus="" placeholder="Email Address" aria-label="Email Address">
</div>
<div class="entry-item">
<div class="password-label">
<label for="password">Password</label>
<u><a id="forgotPassword" href="/<my-tenant-name>.onmicrosoft.com/B2C_1_signin1/api/CombinedSigninAndSignup/forgotPassword?csrf_token=****==&tx=StateProperties=****&p=B2C_1_signin1">Forgot your password?</a></u>
</div>
<div class="error itemLevel" aria-hidden="true" style="display: none;">
<p role="alert"></p>
</div>
<input type="password" id="password" name="Password" placeholder="Password" aria-label="Password" autocomplete="current-password" aria-required="true">
</div>
<div class="working"></div>
<div class="buttons">
<button id="next" type="submit" form="localAccountForm">Sign in</button>
</div>
</div>
</form>
</div>
In order to be able to customise this page, I need to know how to do the following:
Remove text elements if I don't want them displayed
Modify text elements if I want to change the text strings
Style text elements if I want them to have different font stylings
Wrap various elements in divs with particular classes to be able to apply a design
(eg display the different sign in options as inline-blocks side by side etc)
My question is:
Is it permissible to do all of this via JavaScript (and CSS to hide/style text elements)?
Technically I think I could do it, but I'm not sure if it is allowed or best practice.
This page has a list of guidelines for using JavaScript in Azure AD B2C custom pages:
https://learn.microsoft.com/en-us/azure/active-directory-b2c/javascript-and-page-layout?pivots=b2c-user-flow#guidelines-for-using-javascript
One of them is:
Don't take a dependency on Azure AD B2C code or comments.
But I'm not sure how elements can be customised without being able to reference the code within the api div.
For reference, the Page Layouts page does have a Version setting, which makes me think that, if we keep the same version selected, the contents of the api div would be unlikely to change (and therefore not break any JavaScript referencing particular divs etc).
Proof of Concept
I was able to create this custom signin page:
With this custom HTML page:
<!DOCTYPE html>
<html>
<head>
<title>My Custom Login Page</title>
<!-- links to CSS framework -->
<script src="https://cdn.jsdelivr.net/npm/uikit#3.15.19/dist/js/uikit.min.js" integrity="sha256-gHEvLzvpjU93VFTgu5myAgmc+0I1CzBzYe0YhTJ8uqI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit#3.15.19/dist/js/uikit-icons.min.js" integrity="sha256-PxrcCuBlFkPVlPsGxNzt59W3EKYOH79z+v/tq9uFS2M=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit#3.15.19/dist/css/uikit.min.css" integrity="sha256-f3SVFXP30MgahZ0Z7Lp1W02MuLgtiAtk8uFqTbGxNfY=" crossorigin="anonymous">
<!-- links to google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#200&family=Noto+Sans+Ethiopic:wght#300&display=swap" rel="stylesheet">
<!-- CSS styles -->
<style>
#api {
width: 300px;
padding: 25px 40px 40px 40px;
border: 1px solid #000;
margin: 0 auto;
margin-top: 50px;
}
.heading {
text-align: center;
}
h1 {
font-family: 'Josefin Sans';
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 45px;
margin-bottom: 0px;
}
.tagline {
margin: -5px 0px 25px 0px;
padding: 0px;
display: block;
font-size: 14px;
color: #727272;
}
h2 {
font-size: 14px;
line-height: 12px !important;
margin-bottom: 10px;
}
.social {
margin-top: 30px;
}
#forgotPassword {
font-size: 14px;
margin-left: 5px;
text-transform: lowercase;
}
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
border-color: #e5e5e5 !important;
}
</style>
<!-- jQuery to get things looking the way I want -->
<script>
$(document).ready(function() {
console.log("document is ready apparently");
// hacky - put in a delay of 1 second to wait for the 'api' div content to be added
setTimeout(() => {
console.log("Delayed for 1 second.");
$(".heading h1").text("APP");
$( "<span class='tagline'>Tagline Goes Here</span>").insertAfter( ".heading h1" );
$("#localAccountForm .intro h2").text("External Users");
$(".social h2").text("Internal Users");
$("label[for='email'], label[for='password']").remove();
$("input").addClass("uk-input");
$("#email").addClass("uk-margin-small-bottom");
$("button").addClass("uk-button uk-button-default uk-button-small uk-margin-small-top");
$("#AzureADPeople").text("Single Sign-On");
$('.divider').remove();
$('.social').insertAfter('#localAccountForm');
$('.password-label').insertAfter('#password');
}, "1000");
});
</script>
</head>
<body>
<!-- this is the only thing required for a custom page -->
<div id="api"></div>
</body>
</html>
Don't take a dependency on Azure AD B2C code or comments.
This moreso is referring to our JS hooks and low level functionality, not the DOM.
You’ll need CSS/JS to manipulate the DOM for your requirements.
Related
I have embedded a simple google map with the stores I needed located on them. I would like to add a search box just above the map in the center or in the map at the top as per the places search box. Really not sure on whats the best method of this as my html is very limited.
this is my map code
<section class="mbr-section mbr-section__container" style="background-color: rgb(255, 255, 255); padding-top: 80px; padding-bottom: 80px;">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="mbr-map"><iframe frameborder="0" style="border:0" src="https://www.google.com/maps/d/u/0/embed?mid=1Dt00Nkp6QbZ3DqYkrR7NCjTSQyo"></iframe></div>
</div>
</div>
</div>
This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 6 years ago.
I can't figure out why flexbox children do not have equal height on iPad (Chrome and Safari). When testing this works fine on the desktop:
But this is how it looks on iPad:
HTML structure:
<div class="flex-grid-quarters">
<div class="tile col">
<div class="tile-content border martlet">
<img src="/images/martlet.jpg"/>
</div>
</div>
<div class="tile col quicklinks">
<div class="tile-content border">
<h3>Quick Links</h3>
{module_menu, version="2", menuId="1958990", moduleTemplateGroup=""}
</div>
</div>
<div class="tile col gold-links">
<div class="tile-content border">
Mill Hill Enterprise
Development Office
Mill Hill School Foundation
National Liberal Club
</div>
</div>
<div class="tile col contact-us">
<div class="tile-content border">
<h3>Contact Us</h3>
<p>Old Millhillians Club</p>
<p>Mill Hill School</p>
<p>The Ridgeway</p>
<p>London NW7 1QS</p>
<br/>
<p>t 020 8906 7948 / 7949</p>
<p>e sk#millhill.org.uk</p>
</div>
</div>
</div>
CSS:
.flex-grid-quarters, .flex-grid-thirds {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-grid-quarters .col {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 25%;
}
I don't believe it is necessary to have display: flex on the children, but I added that anyway in an attempt to get it working. No such luck (the result is exactly the same with or without that). The link to the site if anyone needs it is http://omclub.streeten.co.uk/ Any help much appreciated.
There's a ton of vendor prefixes that are no longer needed, so I removed everything but justify-content and display: flex; It looks like each flex-item has equal heights. Unfortunately I am not able to test it on an iPad (it's the only device I don't have yet)
SNIPPET
.flex-grid-quarters, .flex-grid-thirds {
display: flex;
justify-content: center;
}
.flex-grid-quarters .col {
width: 25%;
outline: 3px dashed red;
}
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<div class="flex-grid-quarters">
<div class="tile col">
<div class="tile-content border martlet">
<img src="/images/martlet.jpg"/>
</div>
</div>
<div class="tile col quicklinks">
<div class="tile-content border">
<h3>Quick Links</h3>
{module_menu, version="2", menuId="1958990", moduleTemplateGroup=""}
</div>
</div>
<div class="tile col gold-links">
<div class="tile-content border">
Mill Hill Enterprise
Development Office
Mill Hill School Foundation
National Liberal Club
</div>
</div>
<div class="tile col contact-us">
<div class="tile-content border">
<h3>Contact Us</h3>
<p>Old Millhillians Club</p>
<p>Mill Hill School</p>
<p>The Ridgeway</p>
<p>London NW7 1QS</p>
<br/>
<p>t 020 8906 7948 / 7949</p>
<p>e sk#millhill.org.uk</p>
</div>
</div>
</div>
</body>
</html>
I have a strange problem: the site I build is using flexbox and LESSHAT. The strange thing I encounter is that it doesn't render correctly i.e. flexbox things seems to be omitted.
However, if I hit F12 and reload the page it is rendered is it should.
What is wrong?
UPDATE - This is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=0, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="c header">
<div class="box">Title</div>
</div>
<div class="box content">
<div class="cv flex page">
<div class="cl item">
<div class="cvl flex item-title">
<div class="cl">Item 1</div>
<div class="cl">
<div class="c button">1</div>
<div class="c button">2</div>
<div class="c button">3</div>
</div>
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 2
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 3
</div>
<div class="cl item-more">
>>
</div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
Style CSS is compiled from this LESS file:
#import "lesshat";
* {
margin: 0;
padding: 0;
}
.header {
width:100%;
height: 48px;
background: #0000ff;
color: #fff;
}
.content {
width:100%;
background: #00ff00;
}
.page {
width:100%;
background: #00ffff;
}
.item {
background: #ffff00;
margin: 5px;
}
.button {
width: 30px;
border: 1px solid #efefef;
}
.box {
.display(flex);
}
.c {
.display(flex);
.justify-content(center);
.align-items(center);
}
.cl {
.display(flex);
.align-items(center);
}
.cv {
.display(flex);
.flex-direction(column);
}
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
The reload and F12 solution seems to indicate one of the following issues:
<link> or <style> tag for CSS outside of the <head>
document.write via a downloaded <script>
Asking for computed styles in related JavaScript code, via:
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
getComputedStyle()
Changing individual styles in related JavaScript code
Getting and setting styles in a loop
References
Rendering: repaint, reflow/relayout, restyle
i am now working for several days now on a header for our project. Everything is ok - but the layout not.
In my Layout I have on the left a logo, in the middle a navbar, and on the right Login/Logout/Register links.
My Problem is, that I can't center the navbar as I want, if I try, then it is only for my display resolution ok and e.g. if I zoom in or out, it is going bad.
This is also very nice, but I don't know how to do it.
I would be really glad if somebody could help me.
Thanks in advance.
HTML
<body>
<div class="row">
<div class="span3">
<img src="/resources/img/logos/bb_logotype_blue_110.png" />
</div>
<div class="span6">
<!-- NavBar -->
<ul id="navbar">
<li>Product</li>
<li>Support</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
<div class="span3"></div>
<div id="nav-account" class="nav-collapse pull-right">
<ul class="nav">
<li><a id="register" href="/register">Register</a></li>
<li><a id="login" href="/login/form">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="margin-top:3em">
<h1 id="title"></h1>
... some stuff ...
</div>
CSS
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#navbar li
{
display: inline;
border-right: 2px solid black;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: 16pt;
}
#navbar li:last-child
{
border-right: 0;
padding-right: 0;
}
</style>
In bootstrap, if you place elements inside a <container> block, they will be automatically centered and resized to fit in the grid layout. Perhaps that is what you are looking for.
Am working on a windows store javascript application. The application will be using data from azure. When I tried to port the azure connectivity sample to a navigation template, the list view displayed the entire columns from the table. I used the same data read code from the sample. The html page and css were identical to the sample.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--head segment-->
<title>QuickStart</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<script type="text/javascript" src="/MobileServicesJavaScriptClient/MobileServices.js"></script>
<!-- QuickStart references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/pages/Advertisement/advertisement.js"></script>
<link href="/pages/Advertisement/advertisement.css" rel="stylesheet" />
</head>
<body>
<!--body segment-->
<div style="margin: 50px 10px 10px 50px" id="overalldiv">
<div style="display: -ms-grid; -ms-grid-columns: 1fr 1fr; -ms-grid-rows: auto 1fr;">
<div style="-ms-grid-column-span: 2; margin: 0px 0px 20px 0px;">
<div style="color: #0094ff; font-size: 8pt">WINDOWS AZURE MOBILE SERVICES</div>
<div style="color: #808080; font-size: 32pt">Sample</div>
</div>
<div style="-ms-grid-row: 2; -ms-grid-column: 1;">
<div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
<div style="-ms-grid-column: 1;" class="tasknumber">
1
</div>
<div style="-ms-grid-column: 2">
<strong>Insert a TodoItem</strong><br />
<span style="font-size: small">Enter some text below and click Save to insert a new todo item into your database</span>
</div>
</div>
<div style="margin: 5px 0px 0px 72px; -ms-grid-column: 2">
<input type="text" id="textInput" />
<button id="buttonSave" style="margin-left: 5px">Save</button>
</div>
</div>
<div style="-ms-grid-column: 2; -ms-grid-row: 2;">
<div style="display: -ms-grid; -ms-grid-rows: auto 1fr">
<div style="-ms-grid-row: 1">
<div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
<div style="-ms-grid-column: 1; float: left;" class="tasknumber">
2
</div>
<div style="-ms-grid-column: 2">
<strong>Query and Update Data</strong><br />
<span style="font-size: small">Click refresh below to load the unfinished TodoItems from your database. Use the checkbox to complete and update your TodoItems</span>
</div>
</div>
<div style="margin: 5px 0px 0px 72px">
<button id="buttonRefresh">Refresh</button>
</div>
</div>
</div>
<div id="TemplateItem" data-win-control="WinJS.Binding.Template">
<div style="display: -ms-grid; -ms-grid-columns: auto 1fr">
<input class="itemCheckbox" type="checkbox" data-win-bind="checked: complete; dataContext: this" />
<div style="-ms-grid-column: 2; -ms-grid-row-align: center; margin-left: 5px" data-win-bind="innerText: text">
</div>
</div>
</div>
<div id="listItems" style="-ms-grid-row: 2; margin: 20px 0px 0px 0px; -ms-grid-row-align: stretch"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: TemplateItem, layout: {type: WinJS.UI.ListLayout} }">
</div>
</div>
</div>
</div>
</body>
</html>
The actual sample project displayed only the text field from the azure database table as shown in the below diagram.
But in my case all the column fields are getting displayed
How am I supposed to display only the required content and how am I supposed to do the formatting for the listview contents. I wanted to display the contents in the following manner
1
ab
2
drag
3
dragon
4
arm
..
..
..
Have you set the itemTemplate for the ListView? You need to tell the ListView how to display each item of the itemDataSource