The problem:
I have a div where I will have a list of selections for users to choose. In this div, i have to separate the selections. Please refer to this link for image http://imgur.com/FQub7.
the code is here:
<div id="personal" class="personal"> Personal Details </div>
<div id="menu" class="menu"> Permit </div>
<div id="menulist" class="menulist"> -Apply <br />
-Renew
-Track <br />
-Progress <br />
-Information </div>
<div class="menu2" id="menu2">Records</div>
<div class="menulist2" id="menulist2">-Permits<br />
-Training<br />
-Training Schedule<br />
-Accidents & <br />
Convictions</div>
</div>
And the code for CSS is here:
.personal
{
position:absolute;
color:#fff;
top:210px;
left:20px;
font-size:20px;
font-family:'TrajanProBold';
width:20%;
}
.menu
{
position:absolute;
color:#fff;
top:255px;
left:20px;
font-size:30px;
font-family:'TrajanProBold';
width:289px;
}
.menulist
{
position:absolute;
color:#fff;
top:295px;
left:60px;
font-size:20px;
font-family: 'TrajanProRegular';
width:23%;
}
.menu2
{
position:absolute;
color:#fff;
top:401px;
left:20px;
font-size:30px;
font-family:'TrajanProBold';
width:285px;
}
.menulist2
{
position:absolute;
color:#fff;
top:441px;
left:60px;
font-size:20px;
font-family: 'TrajanProRegular';
width:23%;
}
It might be a character encoding issue. Try opening your source code in NotePad++, switch the encoding to UTF-8, and then repost.
Use http://www.fontsquirrel.com/fontface/generator to generate font, If error still persist, most likely its due to the font file that is corrupted. After changing the font file, the matter is solved.
Related
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.
I am developing a web in Bootstrap 4 and in the header I have a SVG format logo that has to be responsive (without fixed size) but it is not possible to visualize it unless you leave the property wide at a fixed value in .px some way to be responsive without leaving a fixed value in .px? Because in Chrome, Opera, Safari, Internet explorer leaving the Width property in auto. In all browsers it appears without problem but in Firefox it does not
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="height: 80px; display: flex; align-items: center;">
<a href="index">
<img style="width: 100% !important; height: auto !important;" src="img/imprentaonline24.svg" alt="imprentaonline24" />
</a>
</div>
</div>
It works fine from if use use directly from url. I'm using FireFox and it works
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="display: flex; align-items: center;">
<a href="index">
<svg>
<img src="https://www.imprentaonline24.es/img/imprentaonline24.svg"/>
</svg>
</a>
</div>
</div>
I would like to know if there is a way to apply the Material Design Lite button style to a file picker, i.e. a component created on an HTML page via:
<input type="file" id="filePicker" />
I would like the "Browse" button of the component to have the look of a Raised button (with ripple if possible). See http://www.getmdl.io/components/#buttons-section.
Thanks!
Using CSS, do you mean something like this?
<style>#file { display: none }</style>
<input type="file" id="file">
<label for="file" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">+</i>
</label>
https://jsfiddle.net/sj838cLg/
Currently, there's no "official" way of doing that. According to the discussion on this issue, the reason is that there's no Material Design specification for that component, so they don't have a guideline to style it. On that same page, the user kybarg provided a CSS/JavaScript code to style a file picker which kind of matches the Material Design specification, so you can use that code:
HTML:
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" />
<label class="mdl-textfield__label">Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text"/>
<label class="mdl-textfield__label">Position</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--file">
<input class="mdl-textfield__input" placeholder="File" type="text" id="uploadFile" readonly/>
<div class="mdl-button mdl-button--primary mdl-button--icon mdl-button--file">
<i class="material-icons">attach_file</i><input type="file" id="uploadBtn">
</div>
</div>
</form>
CSS:
html {
width: 100%;
}
body {
background: #f5f5f5;
margin: 50px auto;
width: 512px;
}
.mdl-button--file {
input {
cursor: pointer;
height: 100%;
right: 0;
opacity: 0;
position: absolute;
top: 0;
width: 300px;
z-index: 4;
}
}
.mdl-textfield--file {
.mdl-textfield__input {
box-sizing: border-box;
width: calc(100% - 32px);
}
.mdl-button--file {
right: 0;
}
}
JavaScript:
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.files[0].name;
};
But as there's no official specification, you probably won't find an official implementation from the MDL team for now.
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