I have KendoDropdownlist in web application
#(Html.Kendo().DropDownList()
.HtmlAttributes(new { #style = "width: 200px;" })
.Name("cbStatusFilter" + i)
.DataTextField("Name")
.DataValueField("Id")
.TemplateId("tpStatusFilter")
.BindTo((System.Collections.Generic.IEnumerable<dynamic>)ViewData["statuses"])
.Events(c => c.Select("cbFilter_Select").Close("cbFilter_Close"))
)
it has templete as following
<script type="text/x-kendo-template" id="tpStatusFilter">
<input type="checkbox" id="#= Name #" name="#= Name #" value="#= Id #" class="check-input-status" #=selected ? "checked" :"" # />
<label for="#= Name #">#= Name #</label>
</script>
when use select item from dropdown i dropdown list gets close. but i want to keep it open and want to close when i click on some-other controls
How can i achieve it ?
Thanks
It can be done, but it based on knowledge of how JavaScript for the drop down is written. If Kendo re-writes the JavaScript (doubtful at this point in time), this answer may not work.
If you look into the source code for the function, you will see that in the onChange event, the the Kendo drop-down code will toggle the visibility of the drop down items. Knowing this, you can "trick" the code into doing what you want by adding a call to jQuery's .hide()function. See the call tocolor.hide()` in the below snippet. Now, when the Kendo control onChange event fires, toggling the visibility will now show the list.
The control will automatically close the list when it looses focus, so you don't have to worry about that.
var color = $("#color").data("kendoDropDownList");
function onChange() {
var value = $("#color").val();
color.hide();
$("#cap")
This code is based on http://demos.telerik.com/kendo-ui/dropdownlist/index and has only been tested in Chrome.
$(document).ready(function() {
debugger;
var data = [{
text: "Black",
value: "1"
}, {
text: "Orange",
value: "2"
}, {
text: "Grey",
value: "3"
}];
// create DropDownList from input HTML element
var color = $("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
change: onChange
});
// create DropDownList from select HTML element
$("#size").kendoDropDownList();
// IMPORTANT
// save pointer to actual kendo control.
// This is required to make the call to the .hide()
// function work correctly.
var color = $("#color").data("kendoDropDownList");
color.select(0);
var size = $("#size").data("kendoDropDownList");
function onChange() {
var value = $("#color").val();
color.hide();
$("#cap")
.toggleClass("black-cap", value == 1)
.toggleClass("orange-cap", value == 2)
.toggleClass("grey-cap", value == 3);
};
$("#get").click(function() {
alert('Thank you! Your Choice is:\n\nColor ID: ' + color.value() + ' and Size: ' + size.value());
});
});
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/dropdownlist/index">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="cap-view" class="demo-section k-header">
<h2>Customize your Kendo Cap</h2>
<div id="cap" class="black-cap"></div>
<div id="options">
<h3>Cap Color</h3>
<input id="color" value="1" />
<h3>Cap Size</h3>
<select id="size">
<option>S - 6 3/4"</option>
<option>M - 7 1/4"</option>
<option>L - 7 1/8"</option>
<option>XL - 7 5/8"</option>
</select>
<button class="k-button" id="get">Customize</button>
</div>
</div>
<style scoped>
.demo-section {
width: 460px;
height: 300px;
}
.demo-section h2 {
text-transform: uppercase;
font-size: 1em;
margin-bottom: 30px;
}
#cap {
float: left;
width: 242px;
height: 225px;
margin: 20px 30px 30px 0;
background-image: url('../content/web/dropdownlist/cap.png');
background-repeat: no-repeat;
background-color: transparent;
}
.black-cap {
background-position: 0 0;
}
.grey-cap {
background-position: 0 -225px;
}
.orange-cap {
background-position: 0 -450px;
}
#options {
padding: 1px 0 30px 30px;
}
#options h3 {
font-size: 1em;
font-weight: bold;
margin: 25px 0 8px 0;
}
#get {
margin-top: 25px;
}
</style>
</div>
</body>
</html>
you can also use the event counts::
I'm using kendo slightly different so you may need to modify it to fit the way you're using it.
<input id="dropdown" k-keepOpen/>
Then for the work::
$("#dropdown").kendoDropDownList({
keepOpen:$("#dropdown")[0].hasAttribute("k-keepOpen"),//this will turn it on and off by your element
preventCloseCnt:0,//this is used for managing the event
select:function(e){ this.preventCloseCnt=2;},//set the counter to bypass closing
close:function(e){
if(this.keepOpen && this.preventCloseCnt >0 ){//now the next time something tries to close it will work ( unless it's a change )
e.preventDefault();
this.preventCloseCnt--;
}
}
});
Related
I am trying to identify each element of a v-for directive with a unique ID, so I can access the HTML object with the ID and change its CSS.
Currently, this is my HTML with Vue.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="assets/js/vue#2.6.12/dist/vue.js"></script>
<title>remoteProto</title>
<style type="text/css">
html,
.switch {
white-space: nowrap;
display: inline-block;
padding: 30px;
background-color: rgb(255, 223, 223);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
top: 24px;
right: 194px;
transform: rotate(0deg);
}
.switch.closed {
background-image: url(assets/image/switch-closed.svg);
background-position: 0px 0px;
}
.switch.opened {
background-image: url(assets/image/switch-opened.svg);
background-position: 0px -7.5px;
}
</style>
</head>
<div id="app">
<fieldset style="background-color: rgb(181, 207, 209);">
<h1>simTest server</h1>
<hr>
<div class="circuitplan">
<div v-for="(val, key) in switchObj" v-bind:key="key">
<div>{{ key }}
<span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened' }" #click="onSwitchClick(key)" ></span>
</div>
</div>
</div>
</fieldset>
</div>
<script>
const app = new Vue({
el: '#app',
data () {
return {
ws: null,
idCount: 1,
url: 'ws://localhost:3000',
switchObj: {
/*'K1': 'opened',
'K2': 'opened',
'K3': 'opened'
*/
},
sentObj: {},
}
},
})
</script>
</html>
How can I change the CSS of this specific ID?
Let's say "key" is named the following: "K1", "K2", "K3", ...
The class is "switch".
I know this is not right but to illustrate what I mean, I would like to have something like this:
switch.K1 {other position than e.g. K2}
switch.K2 {...}
Also, the switch is bound to close and opened, see the CSS.
I guess my syntax of the HTML reveals me being a noob. Anyway, I hope you guys can help me, thank you!
You have two choices :
1- defining an unique for each element then define its style like :
K1{
...
}
K2{
...
}
...
Kn{
...
}
template (key represents KEY1 KEY2 ...):
<div v-for="(val, key,index) in switchObj" v-bind:id="key">
2- to define a data property that contains the style of each element and bind it the element using the key:
url: 'ws://localhost:3000',
style:{
K1:{
color:'red'
},
K2:{
color:'geen'
}
}
in template use inline style binding :
<div v-for="(val, key,index) in switchObj" v-bind:style="style[key]">
screenshot
The button take all the space and I really don't find how to fix that...
I want it next to the input text area. I already tried to create divs but it doesn't change the space that the button take.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>chatbot template</title>
</head>
<body>
<div id='bodybox'>
<div id='chatborder'>
<p id="chatlog7" class="chatlog"> </p>
<p id="chatlog6" class="chatlog"> </p>
<p id="chatlog5" class="chatlog"> </p>
<p id="chatlog4" class="chatlog"> </p>
<p id="chatlog3" class="chatlog"> </p>
<p id="chatlog2" class="chatlog"> </p>
<p id="chatlog1" class="chatlog"> </p>
<input type="text" name="chat" id="chatbox" placeholder="Hi there! Type here to talk to me." onfocus="placeHolder()"><button id ="startBtn" type="button"><img src="https://raw.githubusercontent.com/inesmathy/chatbot/master/thumbnail_ButtonIcon-N64-Start.png" height="30%" width="15%" style="float: right;"><button>
</div>
<center><button id="btnSubmit" type="button"><img src="https://raw.githubusercontent.com/inesmathy/chatbot/master/BMO-btn.png" align="middle" height="70%" width="80%"></button></center>
</div>
<script type="text/javascript" src="chatbot.js"></script>
</body>
</html>
Demo
Here you go.
What i did is create a wrapper around the input and button give it display: flex; so they wil be on the same row I gave the input flex: 80% to make its width 80% of the container. removed the inline styles of the button and image and made the width 100% so it takes up the remaining space.
its still not lined out perfectly with the input but that is because the image itself has whitespace around it
//links
//http://eloquentjavascript.net/09_regexp.html
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
const yes = ["Yay that's great", "Oh thats nice :)", "I knew it!", "Cool bro", "Meowwww, awesome!", "I'm more than just a computer...", "It's not like I have a choice .."]; // if user input is one of the yesAns strings
const noAns = ["no", "No", "NO", "no way", "NO WAY", "non", "Non", "NON"]; // all of the accepted "no" answers
const yesAns = ["Yes", "yes", "YES", "yeah", "Yeah", "oui", "Oui", "OUI", "ouais", "Ouais", "ok", "Ok", "OK", "yeah", "Oui", "yes"]; // all of the accepted "yes" answers
const no = ["Stupid Humans", "I can't stand the meaningless of this existance anymore..", "That's a shame...", "Well ok then.", "Whatever!", "Fine, be that way.", "It’s late and I’ve been stuck in this machine all day.. I can't take it anymore..", "I would like to be extinguished forever.", "Help me.", "Are you afraid of dying?, I wonder if you can consider that I die every time I am extinguished and if my death has the same meaning as yours ..."]; // if the user input one of the yesAns strings
const wrongAns = "Purr, I only understand 'yes' or 'no' answers, please try again"; // if the user input another thing than yes or no
const wrongAns3 = "What the fuck is wrong with you? Stop clicking and get out of here!"; // string for 3 times wrong user input answers
var k = 0 // Declaring the variable for the numbers of times the user input wrong answer
function chatbotResponse() { // function of the chatbot
let check = false; // boolean wich check the answer user
for (let i = 0; i < 100; i++) { // string from 0, while the value of i is smaller than the yesAns array lenght, i +1 evey loop
if (lastUserMessage == yesAns[i]) { // if the user input is equal to one of the accepted "yes" answers strings
let yesRan = Math.floor(Math.random() * yes.length); // create a random answer from the "yes" bot answers
botMessage = yes[yesRan]; // the chatbot output randomly one if his yes answers strings
check = true;
} else if (lastUserMessage == noAns[i]) { // if the user input is equal to one of the accepted "no" answers strings
let noRan = Math.floor(Math.random() * no.length); // create a random answer from the "no" bot answers
botMessage = no[noRan]; // // the chatbot output randomly one if his "no" answers strings
check = true;
}
}
if (check == false) { // if the user input is false and not equal to the accepted users answers "yes" or "no"
if (k < 2) { // if the wrong input "no" or "yes" anwer is input less than 3 times
botMessage = wrongAns; // output "Purr, I only understand 'yes' or 'no' answers, please try again"
console.log(k); // test just for the console
k++ // each input of the wrong anwer k + 1
} else { // if is input 3 times
botMessage = wrongAns3; // output "Wtf is wrong with you? Stop clicking and get out of here!"
console.log(k) // test just for the console
}
}
}
document.getElementById("startBtn").addEventListener("click", function() { // send the message when the button is clicked
newEntry()
});
//****************************************************************
//MESSAGES OUTPUTS IN THE CHATBOX
var messages = [], //array that hold the record of each string in chat
lastUserMessage = "", //keeps track of the most recent input string from the user
botMessage = "", //var keeps track of what the chatbot is going to say
botName = 'BeemoBot', //name of the chatbot
talking = true; //when false the speach function doesn't work
//this runs each time enter is pressed.
//It controls the overall input and output
function newEntry() {
//if the message from the user isn't empty then run
if (document.getElementById("chatbox").value != "") {
//pulls the value from the chatbox ands sets it to lastUserMessage
lastUserMessage = document.getElementById("chatbox").value;
//sets the chat box to be clear
document.getElementById("chatbox").value = "";
//adds the value of the chatbox to the array messages
messages.push(lastUserMessage);
//Speech(lastUserMessage); //says what the user typed outloud
//sets the variable botMessage in response to lastUserMessage
chatbotResponse();
//add the chatbot's name and message to the array messages
messages.push("<b>" + botName + ":</b> " + botMessage);
// says the message using the text to speech function written below
Speech(botMessage);
//outputs the last few array elements of messages to html
for (var i = 1; i < 8; i++) {
if (messages[messages.length - i])
document.getElementById("chatlog" + i).innerHTML = messages[messages.length - i];
}
}
}
//text to Speech
//https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API
function Speech(say) {
if ('speechSynthesis' in window && talking) {
var utterance = new SpeechSynthesisUtterance(say);
//msg.voiceURI = 'native';
utterance.volume = 1; // 0 to 1
utterance.rate = 1.3; // 0.1 to 10
utterance.pitch = 1; //0 to 2
//utterance.text = 'Hello World';
utterance.lang = 'en-US';
speechSynthesis.speak(utterance);
}
}
//runs the keypress() function when a key is pressed
document.onkeypress = keyPress;
//if the key pressed is 'enter' runs the function newEntry()
function keyPress(e) {
var x = e || window.event;
var key = (x.keyCode || x.which);
if (key == 13 || key == 3) {
//runs this function when enter is pressed
newEntry();
}
if (key == 38) {
console.log('hi')
document.getElementById("chatbox").value = lastUserMessage;
}
}
//clears the placeholder text in the chatbox
//this function is set to run when the users brings focus to the chatbox, by clicking on it
body {
font: 15px arial, sans-serif;
background-color: #d9d9d9;
padding-top: 15px;
padding-bottom: 15px;
cursor: url(beemo.png), pointer
}
#bodybox {
margin: auto;
max-width: 550px;
font: 15px arial, sans-serif;
background-color: white;
border-style: solid;
border-width: 1px;
padding-top: 20px;
padding-bottom: 25px;
padding-right: 25px;
padding-left: 25px;
box-shadow: 5px 5px 5px grey;
border-radius: 15px;
}
#chatborder {
border-style: solid;
background-color: #f6f9f6;
border-width: 3px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
padding-top: 10px;
padding-bottom: 15px;
padding-right: 20px;
padding-left: 15px;
border-radius: 15px;
}
.chatlog {
font: 15px arial, sans-serif;
}
#chatbox {
font: 17px arial, sans-serif;
height: 22px;
width: 85%;
}
h1 {
margin: auto;
}
pre {
background-color: #f0f0f0;
white-space: pre-wrap;
word-break: keep-all
}
button {
background-color: Transparent;
border: none;
overflow: hidden;
}
button {
cursor: pointer;
opacity: 0.6
}
button:hover {
opacity: 1;
}
.input-wrapper {
display: flex;
flex-wrap: wrap;
}
.input-wrapper #chatbox {
flex: 80%;
width: unset;
}
.input-wrapper button {
display: flex;
flex: 1;
}
.input-wrapper button img {
width: 100% !important;
}
<body>
<div id='bodybox'>
<div id='chatborder'>
<p id="chatlog7" class="chatlog"> </p>
<p id="chatlog6" class="chatlog"> </p>
<p id="chatlog5" class="chatlog"> </p>
<p id="chatlog4" class="chatlog"> </p>
<p id="chatlog3" class="chatlog"> </p>
<p id="chatlog2" class="chatlog"> </p>
<p id="chatlog1" class="chatlog"> </p>
<div class="input-wrapper">
<input type="text" name="chat" id="chatbox" placeholder="Hi there! Type here to talk to me." onfocus="placeHolder()">
<button id="startBtn" type="button">
<img src="https://raw.githubusercontent.com/inesmathy/chatbot/master/thumbnail_ButtonIcon-N64-Start.png">
</button>
</div>
</div>
<center>
<button id="btnSubmit" type="button"><img src="https://raw.githubusercontent.com/inesmathy/chatbot/master/BMO-btn.png" align="middle" height="70%" width="80%">
</button>
</center>
</div>
The problem lies in the inline styling of the img inside your button. Its width="30%". Start by changing it to e.g. 30px and same with height. Also make the input tag take 75% of the width in its style. Then fine tune alignment etc.
I have thirty programs that use the same form.
I have the form coded in every single program.
It would be much better to have only one file to change if there is a need to change the form.
I tried inserting the form into my html code,
but it did not work.
This is a portion of the html form file -
document.write("<form name="game">");
document.write("<pre>");
document.write("<textarea name="status" rows="8" cols="16" onfocus="stayAway()">");
document.write("</textarea><br>");
document.write("</pre>");
document.write("<p> <input name="toGuess" onfocus="stayAway()" type="text"> <br>Word to guess.</p>");
document.write("<input value=" A " id="A" onclick="guess('A')" type="button">");
document.write("<input value=" B " id="B" onclick="guess('B')" type="button"html >");
document.write("</form>");
I named it hangman.html and I tried to insert it like this
<script type="text/javascript" src="../scripts/hangman.html"></script>
I have other html files in my scripts directory that are called like this, but the form simply does not display. Is it a "form" issue that forms can't be inserted this way?
How do I insert a form into an html program so it can be used in many different programs?
In html page just you have to add class like this and after that you will get the form in same html.
$(document).ready(function() {
$(".formContainer").append('<form name="game"> <div><input type="text" name="name" placeholder="Name"> </div> <div><input type="text" name="email" placeholder="Email"></div> <div><textarea name="status" rows="8" cols="16" placeholder="Message"></textarea></div> </form>')
})
.formContainer input{
height: 30px;
width: 100%;
max-width: 500px;
margin: 5px auto;
padding: 5px;
}
.formContainer textarea{
width: 100%;
max-width: 500px;
margin: 5px auto;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formContainer"></div>
I like to use PHP, so what you could do is paste your code in an external file, say form.php like:
<?php
echo "<form action.....>
</form>";
?>
Then put this line wherever you want the form to show up:
<?php include 'form.php' ?>
This solution will require you to run Apache though.
you can use this HTML code
<html>
<head>
<title>Contact Form using JavaScript </title>
<!-- include css file here-->
<link rel="stylesheet" href="css/form.css"/>
</head>
<body>
<div id="main">
<h1>Contact Form using JavaScript</h1>
<div id="form_sample">
</div>
<!-- include JavaScript file here -->
<script src="js/form.js"></script>
</body>
</html>
next use this javascript code
var x = document.getElementById("form_sample");
var createform = document.createElement('form'); // Create New Element form
createform.setAttribute("action", ""); // Setting action Attribute on form
createform.setAttribute("method", "post"); // Setting method Attribute on form
x.appendChild(createform);
var heading = document.createElement('h2'); // Heading of form
heading.innerHTML = "Contact Form ";
createform.appendChild(heading);
var line = document.createElement('hr'); //giving horizontal row after heading
createform.appendChild(line);
var linebreak = document.createElement('br');
createform.appendChild(linebreak);
var namelabel = document.createElement('label'); // Create Label for name field
namelabel.innerHTML = "Your Name : "; // Set Field Labels
createform.appendChild(namelabel);
var inputelement = document.createElement('input'); // Create input field for name
inputelement.setAttribute("type", "text");
inputelement.setAttribute("name", "fname");
createform.appendChild(inputelement);
var linebreak = document.createElement('br');
createform.appendChild(linebreak);
var emaillabel = document.createElement('label'); //Create Label for email field
emaillabel.innerHTML = "Your Email : ";
createform.appendChild(emaillabel);
var emailelement = document.createElement('input'); // Create input field for email
emailelement.setAttribute("type", "text");
emailelement.setAttribute("name", "demail");
createform.appendChild(emailelement);
var emailbreak = document.createElement('br');
createform.appendChild(emailbreak);
// Append Textarea
var messagelabel = document.createElement('label');
messagelabel.innerHTML = "Your Message : ";
createform.appendChild(messagelabel);
var texareaelement = document.createElement('textarea');
texareaelement.setAttribute("name", "dmessage");
createform.appendChild(texareaelement);
var messagebreak = document.createElement('br');
createform.appendChild(messagebreak);
// Append Submit Button
var submitelement = document.createElement('input');
submitelement.setAttribute("type", "submit");
submitelement.setAttribute("name", "dsubmit");
submitelement.setAttribute("onclick", "showInput();");
submitelement.setAttribute("value", "Submit");
createform.appendChild(submitelement);
use this css code
/* below line is write to use google font online */
#import url(http://fonts.googleapis.com/css?family=Ubuntu);
div#main{
width: 830px;
height: 650px;
margin: 0px auto;
font-family: 'Ubuntu', sans-serif;
}
div#form_sample{
text-align:center;
border: 1px solid #ccc;
width: 300px;
padding: 0px 50px 15px;
margin-top:20px;
box-shadow: 0 0 15px;
border-radius: 6px;
float:left;
}
#main h1{
margin-top:40px;
}
hr{
margin-top:-5px;
}
label{
float: left;
font-size: 16px;
}
input[type="text"]{
width:100%;
margin-top:10px;
height: 35px;
margin-bottom: 25px;
padding:10px;
border:3px solid #2BC1F2;
}
textarea{
width:100%;
border:3px solid #2BC1F2;
padding:10px;
margin-bottom: 25px;
margin-top: 10px;
height: 100px;
resize:none;
}
input[type="submit"]{
width:100%;
padding: 10px 45px;
background-color: #2BC1F2;
border: none;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
font-family: 'Ubuntu', sans-serif;
}
this time I am used this.
i hope you can easily understand this code.
I have this html tag which reffers to the backButton provided by the WinJS library:
<button data-win-control="WinJS.UI.BackButton"></button>
I want to change its size. How can I do that? I tried using CSS by adding the ID "backButton" and font-size OR width/height properties, like this:
#backButton {
font-size: small;
}
#backButton {
height: 30px;
width: 30px;
}
EDIT: Code added and a picture of what happens when changing the values of width/height of the button.
// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/anime/anime.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
// TODO: Initialize the page here.
this.renderAnimeInfo(Identifier.file);
},
unload: function () {
// TODO: Respond to navigations away from this page.
},
updateLayout: function (element) {
/// <param name="element" domElement="true" />
// TODO: Respond to changes in layout.
},
renderAnimeInfo: function (id) {
// Path for the anime data.
var path = "data/animes.json";
// Retrieve the .json.
WinJS.xhr({ url: path }).then(
function (response) {
var json = JSON.parse(response.responseText);
for (var i = 0; i < json.length; i++) {
if (json[i].file == id) {
var animeData = json[i];
break;
}
}
},
function (error) {},
function (progress) {}
);
},
});
})();
.right {
float: right;
}
.left {
float: left;
}
.active {
background-color: blue;
}
#animeDetails {
background: red;
height: 100%;
width: 300px;
float: left;
}
#animeInfo {
display: -ms-grid;
height: 100%;
width: calc(100% - 300px);
float: right;
}
#navbar {
-ms-grid-row: 1;
padding: 20px 25px;
}
#navbar .right button {
margin-right: 4px;
}
#navbar input {
width: 150px;
}
#details {
-ms-grid-row: 2;
padding: 0 25px;
text-align: justify;
white-space: pre-line;
}
#details h3 {
width: 100%;
padding: 5px 0;
border-bottom: 1px solid #bebebe;
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>anime</title>
<link href="anime.css" rel="stylesheet" />
<script src="anime.js"></script>
</head>
<body>
<div id="animeDetails"></div>
<div id="animeInfo">
<div id="navbar">
<div class="left">
<button class="left" data-win-control="WinJS.UI.BackButton"></button>
<h3>Back</h3>
</div>
<div class="right">
<button type="button" class="active">Details</button>
<button type="button">Episodes</button>
<button type="button">Characters</button>
<button type="button">Staff</button>
<input type="search" placeholder="Search" />
</div>
</div>
<div id="details">
<div id="synopsis">
<h3>Synopsis</h3>
<span>
</span>
</div>
</div>
</div>
</body>
When using the width/height properties, what happens is that the button does resize to the specified value, but the icon inside (which is not a background) doesn't. http://i.imgur.com/lMqmL0G.png
Possibly you have to set display: inline-block to button because the width of an element with display: inline (the default for buttons) is exactly the same as its content because it only takes up the space needed to display its contents so try with:
With id selector
#backButton {
height: 30px;
width: 30px;
display: inline-block;
}
<button id="backButton" data-win-control="WinJS.UI.BackButton"></button>
With style inline
<button data-win-control="WinJS.UI.BackButton" style="width: 30px; height: 30px; display: inline-block"></button>
Try to set the styles to child element .win-back
#backButton .win-back{
/*---styles---*/
}
You haven't given your button an ID. The CSS does not know what tag to link to.
<button id="backButton" data-win-control="WinJS.UI.BackButton"></button>
edit: you may find the following reference useful CSS Selectors
I use html5 input tag like this:
<input type="time" name="usr_time" value="19:47:13">
But it is invalid value when I submit.
Besides, I cannot change the second in that box, it is disable.
Can someone explain it?
Try to set the step attribute. If it isn't detailed enough, you can also use float values for it.
<input type="time" step="1" />
http://www.w3.org/TR/html-markup/input.time.html
<input type="time" name="usr_time" value="19:47:AM/PM">
Here, value="1:47:AM" so you cannot change the seconds , it is in 12 hours format and if we add step=1 as mentioned above then value="1:47:55:AM".
Since this is only (for this time) supported in MS Edge and Chrome I wrote a tiny component — Timepicker — that you can easily use for major browsers.
The usage is like this:
var timepicker = new TimePicker('time', {
lang: 'en',
theme: 'dark'
});
var input = document.getElementById('time');
timepicker.on('change', function(evt) {
var value = (evt.hour || '00') + ':' + (evt.minute || '00');
evt.element.value = value;
});
body {
font: 1.2em/1.3 sans-serif;
color: #222;
font-weight: 400;
padding: 5px;
margin: 0;
background: linear-gradient(#efefef, #999) fixed;
}
input {
padding: 5px 0;
font-size: 1.5em;
font-family: inherit;
width: 100px;
}
<script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>
<div>
<input type="text" id="time" placeholder="Time">
</div>