I have the following .html markup
.html
<paper-button
raised
active
toggles
on-tap = "toggler"
class = "bold">Patient *
<iron-icon
icon = ""
id = "fe-icon"></iron-icon>
</paper-button>
</div>
How can I make the * in Patient * red without the entire label being red, and also make the asterisk larger?
Just wrap it with a <span> like >Patient <span class="asterisk">*</span></iron-icon> then you can style it individually.
Related
Given conditionally rendered div with drop-down menu. In order to calculate its position (to open it to up or down) I need to get its height and width.
Of course element doesn't get correct dimensions before the transition is done.
So question is - how do I turn off transition programmatically? Or how do I get future position of element without showing it?
{#if isOpened}
<div
bind:this={thisMenu}
use:clickOutside
on:click_outside={closeHandler}
class="dropdown absolute left-100p text-gray-600 z-10 w-full animated
rounded-lg"
style={finalStyle}
{isInit ? null : transition:slide }>
<slot name="list" />
</div>
{/if}
slide-transition uses getComputedStyle, so maybe that’s what you need. The following is copied from slide function in svelte’s repository (src/runtime/transition/index.ts). Slide-function sets those values from zero to initial value and back.
const style = getComputedStyle(node);
const opacity = +style.opacity;
const height = parseFloat(style.height);
const padding_top = parseFloat(style.paddingTop);
const padding_bottom = parseFloat(style.paddingBottom);
const margin_top = parseFloat(style.marginTop);
const margin_bottom = parseFloat(style.marginBottom);
const border_top_width = parseFloat(style.borderTopWidth);
const border_bottom_width = parseFloat(style.borderBottomWidth);
EDIT:
#bobfanger explained in comments how to make a custom mySlide-function and within that function there are those initial size values available. Here is a working example:
<script>
import {slide} from "svelte/transition"
let show=false
let d
function mySlide(el) {
let s=window.getComputedStyle(d)
console.log("mySlide",s.height)
return slide(el, {duration:2000})
}
</script>
<h1 on:click={()=>show=show?false:true}>Click me</h1>
{#if show}
<div bind:this={d} transition:mySlide
style="background-color:yellow;padding:10px;border:10px solid;">
<p>test</p>
</div>
{/if}
This is much simpler than to use onMount and visibility hacks.
I am having trouble with a placeholder. I would like to change the color of the asterisk inside of the placeholder to red and leave the rest the dim black.
I am using bootstrap .form-control for markup.
I would like to know if there is a plugin/easy method of doing this.
JS or CSS.
I don't know of any easy way to have 2 colors in a place holder.
You can try adding an asterisk after your placeholder using -webkit-input-placeholder::after, and change its color, but this solution does not work in all browsers: See here
You can try something like this and add your placeholder as a label...
input[required] + label {
position: relative;
left: -170px; /* move the label left and place it inside the input */
color: #757575; /* placeholder color here */
}
input[required] + label:after {
content:'*';
color: red;
}
<input type="text" id="myInput" name="myInput" required="required" />
<label for="myInput">IME IN PRIIMEK</label>
I am loading UIWebView with html file. the html file contains some text in Div tags. I need to set cursor position in a div tag. the html file contains different div tags.based on some condition i need to locate cursor position.
This is helpful for setting the caret position.
Suppose my html is like this:
<div id="editable" contenteditable="true">
text text text<br>text text text<br>text text text<br>
</div>
<button id="button" onclick="setCaret()">focus</button>
and my javascript method is:
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
I have the following markup:
<paper-input id="alias-input" floatingLabel label="Person Alias (eg: King, Eldest Son, Mooch, etc.)"></paper-input>
<paper-input id="birth-year-input" floatingLabel label="Birth Year (eg: 1969)" validate="^[12][0-9][0-9][0-9]$"></paper-input>
<div center horizontal layout>
<paper-button id="add-button" on-click="{{addPerson}}" class="add" label="Add Person"></paper-button>
</div>
To go along with this markup I have an addButton method which does:
addPerson(_) {
// Add the person
// ...
// Clear the inputs
($['alias-input'] as PaperInput)..inputValue = ''..commit()..blur();
($['birth-year-input'] as PaperInput)..inputValue = ''..commit()..blur();
}
This correctly clears the contents of the inputs, which I want. But I also want the PaperInput help label to drop down onto the line as it is when the control is first loaded. My hope was that the call to blur() would do that. Is there some other call to achieve this?
It seems you need to call blur on the actual <input id='input'> element inside <paper-input> not the <paper-input> itself.
I got it working with
import 'dart:js' as js;
var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
new js.JsObject.fromBrowserObject(inp).callMethod('inputBlurAction', []);
alternatively you can do it like
var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
inp.querySelector('* /deep/ #input') // not yet supported with polyfills
..focus() // blur doesn't work when the field doesn't have the focus
..blur();
Is it possible to have a list in jQuery mobile that has one colour for an odd number member of the list and a different colour for even numbers within the same list. For example within the list the first list item will be grey and for the other item the list colour will be white. Can this be done with jQuery Mobile.
I should also mention that this list will be built with an ajax response.
<div data-demo-html="true">
<ul data-role="listview">
<li data-theme="a">Acura</li>
<li data-theme="b">Audi</li>
</ul>
</div><!--/demo-html -->
Alternating the data-theme attribute should do the trick.
I don't think you have tried anything. But I have made the function simple for you. Just use ajax in place of loop, rest all will be same
var swatch = ['a', 'b'];
$list = $("#list");
for (var i = 0; i < 5; i++) {
$list.append("<li data-theme='" + swatch[i % 2] + "'>List Item</li>");
}
$list.listview('refresh');
Link: http://jsfiddle.net/androdify/ahWzh/
In your CSS, add these two lines:
ul.ui-listview li:nth-child(even) a { background-color: #ffd800; }
ul.ui-listview li:nth-child(odd) a { background-color: #000; }