I am using HTML5/JS to build my app and the CSS is not applying for some reason. I am still seeing the default color. Can I not override it when you press windows+I?
Here is the CSS for reference:
.win-settingsflyout {
background-color: #fff;
}
You can just create a class to apply the color.
<style>
.colors{background-color: lightblue;}
</style>
then add this class to your div tag. <div class='win-content colors'></div>
Hope it'll work!
you can't, you'll always get the color of your Start Screen
Here in my sample app for the 'about' flyout. Is the background is red.
<div class="win-content" style="background: red;">
The full code:
<!doctype HTML>
<html>
<head>
<title>About</title>
<script src="//Microsoft.WinJS.1.0/js/base.js" type="text/javascript"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js" type="text/javascript"></script>
<script type="text/javascript">WinJS.UI.processAll();</script>
<script src="/js/about.js"></script>
<link href="/css/about.css" rel="stylesheet" />
</head>
<body>
<!-- BEGINSETTINGSFLYOUT -->
<div class="apback" data-win-control="WinJS.UI.SettingsFlyout" aria-label="App Settings Flyout" data-win-options="{settingsCommandId:'about',width:'narrow'}">
<!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
<div class="win-ui-dark win-header" style="background-color: #333333"> <!-- Background color reflects app's personality -->
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label"><span data-win-res="{textContent: 'info'}"></span></div>
<img src="../images/smalllogo.png" style="position: absolute; right: 40px;"/>
</div>
<div class="win-content" style="background: red;">
<div class="win-settings-section">
<label>Test App</label>
<label>users</label>
</div>
</div>
</div>
<!-- ENDSETTINGSFLYOUT -->
</body>
</html>
You can "push" the change of you settings flyout background color with this CSS code:
.win-settingsflyout {
background-color: #fff !important; background: #fff !important;
}
Related
Currently I'm making vuejs SPA, and the build size is pretty big, so I want to place some loading indicator instead of blank page while vue is downloading its assets.
I've found out that in this case, the solution is v-cloak, but what I dont understand is, in every example the v-cloak is putted inside index.html, whereas in my project src there are no index.html, there is only main.js and vue.app.
there are index.html, but is located inside public folder(which i think its a build file?).
nevertheless, I've tried to put v-cloak directive inside Vue.app, and its still showing blank page while vue downloading its assets. please point me in the right direction.
thanks for all the help.
here's my App.vue:
<template>
<div id="app">
<div v-cloak>
<div class="v-cloak--inline"> <!-- Parts that will be visible before compiled your HTML -->
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
<div class="v-cloak--hidden"> <!-- Parts that will be visible After compiled your HTML -->
<!-- Rest of the contents -->
<router-view />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
[v-cloak] .v-cloak--block {
display: block;
}
[v-cloak] .v-cloak--inline {
display: inline;
}
[v-cloak] .v-cloak--inlineBlock {
display: inline-block;
}
[v-cloak] .v-cloak--hidden {
display: none;
}
[v-cloak] .v-cloak--invisible {
visibility: hidden;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
display: none;
}
</style>
and when I put some loading indicator in public/index.html, it work, but how do I remove it after vue finished loading?
heres my public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
Loading
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
v-cloak is supposed to be used on the application's mounting point (the el specified in new Vue()), not within a component. Vue does not process v-cloak anywhere else but the mounting point, so it has no effect in App.vue.
To use v-cloak:
In public/index.html, add the v-cloak attribute to div#app, and a <style> block to hide it:
<div id="app" v-cloak></div>
<style>
[v-cloak] {
display: none;
}
</style>
Adjacent to div#app, add a loading icon, and style it so that it's hidden when the v-cloak attribute is removed (i.e., :not([v-cloak])):
<div class="loading">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>
<style>
.loading {
display: grid;
place-content: center;
}
#app:not([v-cloak]) ~ .loading {
display: none;
}
</style>
demo
when i scroll down the page, the navigation bar sticks on the top and later on part keeps going up,but it is going through the navigation bar.
it looks like navigation bar is transparent.
code https://codepen.io/manpreetwadhoun/pen/LvMjBY
<html lang="en">
<head>
<meta charset="utf-8">
<title>1st</title>
</head>
<body>
<div>
<h1 >head</h1>
<header >
<ul id="listContainer">
<li >
Home
</li>
<li >
About</li>
<li >
Menu</li>
<li >
Order Online</li>
</ul>
</header>
<section>
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="home-
dish">
</section>
</div>
</body>
</html>
You've used a huge image that covers a large area of the screen below. The natural background color of the document root is white, unless a background color is specified on an element, such as html or body.
The white is just an illusion here.
Simply add the background color to your header:
header {
position: sticky;
background-color: #fff;
}
Now you have that persistent background that you want.
If I understand, you should simply add the following styles to the header element
background-color: #fff;
border-color: #fff;
My media tags dont seem 2 work even thought i have the viewport tag in my head. I am trying to change the font size when lowering the resolution. I am not sure what i am doing wrong but would love some help.
<? ?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Changa One' rel='stylesheet'>
<script src="main.js"></script>
</head>
<body style="background-color: #bdc3c7">
<div class="navBar">
</div>
<div class="container">
<div class="pLbl" style="font-family: 'Changa One';">
Enter Password to enter:
</div>
<div>
<input class="pInput" id="pInp" type="password"></input>
</div>
<div>
<div class="tooltip">
<button class="pBtn" onclick="pLogin()"></button>
<span class="tooltiptext">Submit</span>
</div>
</div>
</div>
</body>
</html>
<style>
.pLbl {
font-size: 24px;
color: rgb(50,50,50);
}
#media screen and (max-width: 640px)
{
.pLbl {
font-size 12px;
}
}
</style>
It's just because you forgot the colon after font size on media query :)
PS: While modern browsers have a code correction for invalid HTML, I suggest you put style tag in your head, declare the doctype and write your inputs with self-close tag.
I'm a newbie to Bootstrap and I'm having a problem getting two sibling columns to render to the same height under a parent DIV. Basically, I'm trying to create a "blackboard" next to the video which I'd like to render 100% with the video player but with a black background when the page loads.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Responsive Custom Video Player</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<style type="text/css">
.jumbotron {
padding: 0;
margin-bottom: 0;
}
.blackboard {
background-color: #000;
color: #fff;
min-height: 100%;
margin: 0 auto;
text-align: left;
}
</style>
<div class="row jumbotron">
<div class="player col-sm-6">
<video width="100%" poster="videos/poster.jpg" id="videoPlayer">
<source src="videos/BigBuckBunny_512kb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="blackboard col-sm-6">
BLACKBOARD
</div>
</div>
</body>
</html>
The "blackboard" DIV is only rendering the height of the text inside the DIV. The jumbotron's default background-color of #eee fills the rest of the DIV.
This works but it seems a bit hacky. Add ID selectors to those two DIVs and:
// Force blackboard to the same height as the player.
$(window).resize(function() {
$("#blackboard").height($("#player").height());
})
$(window).resize(); // On page load
I am having two questions with respect to this above program
The Width of the button is appearing very small
How can I change the color of the button programatically means onclick of this button I have a function?
dojo.setStyle("bid" ,"color" ,"red");
But both aren't working
<html>
<head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script>
dojo.require("dijit.form.Button");
</script>
</head>
<body class="claro">
<div dojoType="dijit.form.Button" id="bid" style="color: green;width: 335px; font-size:12px;"></div>Save
</body>
</html>
The method you want is style, not setStyle, so use:
dojo.style("bid", "color", "red");
To make the button bigger, put some text in the div:
<div dojoType="dijit.form.Button" id="bid" style="color: green;width: 335px; font-size:12px;">Save</div>