I am using JColor to pick a color in a text field.
Before I used Jscolor I had a class='....' to style the input text field.
To use Jscolor I had to change this in class='color', but my original styling is gone now.
How can I correct this?
An element can have multiple classes if you delimit them with spaces.
Let's say your <input> was originally of class myClass, and you want to make it of class color for use with jscolor. To do this, simply write class = "myClass color" when creating your <input> element.
Here is an example page I made that has an <input> with custom styling that is also configurable with jscolor:
<html>
<head>
<script src = "jscolor/jscolor.js"></script>
<style>
/* custom css */
.myClass {
width: 100%;
cursor:wait;
}
</style>
</head>
<body>
<!-- uses jscolor and the above CSS styling for "myClass" -->
<input class = "myClass color" value = "#FF0000">
</body>
</html>
Related
I use CSS Isolation, but when I use builder.Services.AddRazorPages().AddRazorRuntimeCompilation(); CSS Isolation not works.
<link rel="stylesheet" href="~/WebApplication1.styles.css" asp-append-version="true" />
All styles will be loaded, but not afford to my elements.
h1[b-2uayqwgjuo]{
color:red;
}
/* _content/WebApplication1/Pages/Privacy.cshtml.rz.scp.css */
h1[b-5u69ocmej3]{
color:blue;
}
How can I handle that.
You have to use, ::deep
for example
<div>
<input id="first-name-input" type="text" />
</div>
If you want to set style to first-name-input you have to do like this:
::deep #first-name-input {
background: red;
}
Summary: If any elements doesn't have random element like 5u69ocmej3 you have to set style for those like above codes.
Just running barebones "material-components-web" and I can't get the input field to look like it's supposed to. JS interaction is working great. Theme looks good. But my field is getting cut off
index.html:
<html>
<head>
<link rel="stylesheet" href="bundle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
</head>
<body class="mdc-typography">
<h1 class="mdc-typography--headline1">Big header</h1>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input class="mdc-text-field__input" type="text" id="input">
<label for="input" class="mdc-floating-label">Input Label</label>
<div class="mdc-line-ripple"></div>
</div>
<!-- at the bottom of the page -->
<script src="bundle.js"></script>
</body>
</html>
app.scss:
#import "material-components-web/material-components-web";
app.js:
import * as mdc from 'material-components-web'
mdc.autoInit()
I have no other files pulling in. No other styles added. What could be happening?
That usually happens when .mdc-text-field__input has incorrect box-sizing (for example, inheriting parental .mdc-text-field's border-box). Please ensure that .mdc-text-field__input has initial box-sizing:
.mdc-text-field__input {
box-sizing: initial; // or content-box
}
The following worked for me: add the following to a custom style sheet.
.mdc-text-field {
width: -webkit-fill-available;
width: fill-available;
}
I would like to change the label of a button on click from "start" to "restart". My app will be available in several languages and I am using the L10n.js library for that. The label of the button can have 2 values ("Start" and "Restart")) defined as followed in the app.properties:
start = Start
restart = Restart
text = this is some text
another-text = this is another text
The button is defined like this (using buttons building block):
<body>
<p id="sometext" data-l10n-id="text"></p>
<section data-type="sidebar" role="region" class="skin-dark">
<section style="margin-bottom: 30px">
<button id="startbutton" class = "recommend" data-l10n-id="start">Start</button>
</section>
</div>
</section>
</body>
Once the page is loaded the correct button (and paragraph) value is displayed. The data-l10n-id attribute and corresponding value should change upon click:
document.getElementById("startbutton").addEventListener("click", function( event ) {
this.setAttribute("data-l10n-id", "restart");
document.getElementById("sometext").setAttribute("data-l10n-id", "another-text");
});
Looking at DOM the attribute has changed but not the value it should display:
<p id="sometext" data-l10n-id="another-text">this is some text</p>
<section data-type="sidebar" role="region" class="skin-dark">
<section style="margin-bottom: 30px">
<button id="startbutton" class="recommend" data-l10n-id="restart">Start</button>
</section>
</section>
Is there something I am doing wrong? Any comment is welcome! Thank you.
Here is a demo app for the usage of l10n.js: https://github.com/tuxor1337/fxos-l10n-demo
Note that the <head> part of the HTML document contains information about the available locales:
<link rel="localization" href="locales/testing.{locale}.properties" />
<meta name="availableLanguages" content="en-US" />
Furthermore we include not only l10n.js, but also a shim for JavaScript's Promise since that's required by l10n.js, but it's not part of Firefox OS 1.3:
<script src="es6-promise.js" defer></script>
<script src="l10n.js" defer></script>
<script src="app.js" defer></script>
I successfully tested the code with the Firefox OS emulators for versions 1.3 and 2.0. Note that there are slightly different implementations of l10n.js around. I used Mozilla's implementation used in gaia: https://github.com/mozilla-b2g/gaia/blob/master/shared/js/l10n.js
I want to do a twitter-bootstrap layout that have one sidebar on the left and the rest of the screen should be a dynamic.
Something like this:
http://wbpreview.com/previews/WB042R743/
or this:
http://wbpreview.com/previews/WB001365H/main.html
(if it asks for login: enter demo:demo)
Can somebody help me?
if you take a look into the dom of the second link you'll see:
<section class="container-fluid">
<div class="row-fluid">
<div class="span2"></div>
<div class="span10"></div>
the fluid classes set the width at 100% of viewport.
look into the docs of twitter bootstrap
edit
in html:
<div class="span10 content">
in css:
.container-fluid span10.content { margin-left: 0; }
but remember with fluid grids twitter bootstrap defines all margins with percentage values for all spans
.row-fluid [class*="span"]
I am trying to get two elements to sit side by side inside a div or other element, so both two elements are always centered in the page.
Here's the catch... I cannot use any fixed widths, it is dynamically generated by javascript. It would seem that from reading other posts that this is not possible without fixed widths, but I wanted to see if any one had any other ideas to achieve the same result.
HTML:
<body>
<div class="centerdiv">
<div class = float1></div>
<div class = float2></div>
</div>
</body>
CSS:
body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%}
div.float1 {float:left; display:inline;}
div.float2 {float:left; display:inline;}
You can use the follwing code to center the div side by side.
<html>
<head>
<style type="text/css">
body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%;margin-left:40%;}
.float1{border:1px solid black;width:10%;float:left;}
</style>
</head>
<body>
<div class="centerdiv">
<div class = float1>Hello</div>
<div class = float1>Hai</div>
</div>
</body>
</html>
Hope this helps!!!!!!