I am new to Angular 2 and I'm after do a custom button display when selected. For questions I have 2 buttons for the answer which only one is allowed to be selected (I have all this working) but what I'd like to do is add a tick in from of the selected buttons value.
I know it will need to be done in CSS, which is fine, but I don't know how to do it.
I tried the below but it doesn't seem to work:
.md-fab.md-primary.md-grey-ajb-red-theme.md-button, .md-raised.md-primary.md-grey-ajb-red-theme.md-button
{
font-family:'Glyphicons Halflings';
content:"\e089";
}
Below is an example of what I want. When the button not selected or un-selected the button should just say 'Yes' and obviously have a different colour:
Try this:
.md-fab.md-primary.md-grey-ajb-red-theme.md-button, .md-raised.md-primary.md-grey-ajb-red-theme.md-button
{
position: relative;
text-align: center;
}
.md-fab.md-primary.md-grey-ajb-red-theme.md-button:before, .md-raised.md-primary.md-grey-ajb-red-theme.md-button:before
{
content:"\e089";
display: block;
font-family:'Glyphicons Halflings';
font-size: 20px;
position: absolute;
top: 7px; // adjust as per your need
left: 110px; // adjust as per your need
}
take a boolean variable to set the class on off and render the text on button click. Call a method on click which will change the button text.
Related
I'm a bit confused about this but I think I've found the issue.
I have in my html:
<div class="dropdownz">
<button>HOVER_OR_CLICK</button>
<div class="dropdownz-content">
</div>
</div>
In my css I have:
.dropdownz {
float: left;
overflow: hidden;
}
.dropdownz-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdownz:hover .dropdownz-content {
display: block;
position: fixed;
top: 50px;
}
So this basically means if I hover over the dropdownz class, the dropdownz-content display converts from none to block and the menu items show.
When I run this on an android touchscreen mobile device, I have to CLICK the dropdownz item in order for it to effect the hover and show the list, if I click it again, it effectively removes the hover.
This is desirable behaviour, it means I don't have to do any extra stuff for touch-screens. A "hover" becomes a click and the 2nd click removes the "hover". Great!
Apparently this doesn't work the same in SAFARI on an iPhone. I can't test it myself, I'm going via a friend who says it's not working, so I basically want to know:
Is this a known issue and what's the best way to remedy it? (Without JavaScript, surely!)
I'm thinking along the lines of :focus ?
try this :
.dropdownz:hover .dropdownz-content,
.dropdownz:active .dropdownz-content,
.dropdownz:focus .dropdownz-content{
display: block;
position: fixed;
top: 50px;
}
I have found the technique to customize file input element through putting a regular button in "front of it" and make the file input element with opacity: 0. Like this:
#wrapper {
position: relative;
overflow: hidden;
}
#button-on-top {
width: 200px;
padding: 10px;
}
#file-input-below {
position: absolute;
top: 0;
left: 0;
width: 200px;
padding: 10px;
}
<div id="wrapper">
<button id="button-on-top">Upload</button>
<input type="file" id="file-input-below">
</div>
But why does it actually work that when you click the button "above", the click goes to the real file input button and activates it? Normally, when there's an element "below" another, it doesn't register a click.
Such as with different kinds of overlays where buttons underneath cannot be clicked?
Thank you for an explanation in advance.
HTML files are rendered from top to bottom, so your input field is rendered later. That means if you put absolute to your button the input field slides under it.
But if you put your button below your button will slide under your input field.
If you still want to make it work put to your button an index-z of 1
#button-on-top {
z-index: 1;
}
and your input field should have an lower z-index then your button if you want to make your button clickable
#file-input-below {
z-index: -1;
}
I have a text input that I want to be specifically for currency. Inside the text field, it should say [$Other CAD]."$Other" should be aligned left and "CAD" should be aligned right, I currently just have a bunch of spaces between the "$Other" and the "CAD". This isn't ideal for different browsers, etc. Is there an easy way to get only the "CAD" portion of the placeholder to align right so it'll always fit regardless of the browser? Also, can I set two different text colors for the placeholder? For example, have the "$" and "CAD" in grey and the "Other" in black
<style>
.donation-amount-input {
height: 65px;
font-size: 34px;
}
.form-control::placeholder {
font-size: 34px;
}
#S {
color: #aaaaaa;
position: absolute;
font-size: 36px;
padding-left: 10px
}
#Other {
position: absolute;
font-size: 36px;
padding-left: 35px;
}
#CAD {
color: #aaaaaa;
position: absolute;
font-size: 36px;
padding-left: 40%;
}
</style>
<body>
<p onclick="fakePlaceholder()" id="S">$</p>
<p onclick="fakePlaceholder()" id="Other">Other</p>
<p onclick="fakePlaceholder()" id="CAD">CAD</p>
<input
type="text"
onselect="fakePlaceholder()"
class="form-control donation-amount-input"
id="other-amount"
/>
</body>
<script>
function fakePlaceholder() {
var S = document.querySelector('S');
S.style.display = 'none';
var Other = document.querySelector('Other');
Other.style.display = 'none';
var CAD = document.querySelector('CAD');
CAD.style.display = 'none';
}
</script>
You can't do that with a placeholder, you will have to create a fake one with javascript for the effect. You have to add three elements : one for the $, one for Other and one for CAD. Then you can styles them and positioning them with position: absolute; in the input to create a fake placeholder. ( Don't forget: you can't put html elements in an input, so you will have to wrap the input and the three elements into another element so you position everything according to it ).
After that, you will have to use javascript to hide this fake placeholder when someone clicks or moves with keyboard on it.
Try something, and if you need help, come back here and show us your code.
So basically I have a ionic mobile application. One of the many modules in the app is the review and ratings. So by implementing such module, I added stars in which a user can click whether he wants to rate a certain user by tapping one star to five stars. So the problem here is that, once a choose a certain star, example 5 then he taps other parts in the app the stars will be gone.
After choosing a star:
and the user taps other than the star rating, the star choosen will be gone. How to fix such error?
Code below:
html
<div class="rating">
<!-- <ion-icon name="star"></ion-icon> -->
<span (click)="rate(5)">☆</span>
<span (click)="rate(4)">☆</span>
<span (click)="rate(3)">☆</span>
<span (click)="rate(2)">☆</span>
<span (click)="rate(1)">☆</span>
CSS
page-review {
.rating {
display: flex;
justify-content: center;
}
.rating>span:hover:before {
content: "\2605";
position: absolute;
}
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating>span:hover:before,
.rating>span:hover~span:before {
content: "\2605";
position: absolute;
}
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating>span {
display: inline-block;
position: relative;
width: 1.1em;
font-size: 40px;
color: #F2AF01;
}
.rating>span:hover:before,
.rating>span:hover~span:before {
content: "\2605";
position: absolute;
}
p{
font-size: 20px;
}
.review-description{
margin-bottom: 50px;
}
}
you can use ionic-ratings
when you do all steps to install and import then you can use it like
$scope.ratingsObject = {
iconOn: 'ion-ios-star', //Optional
iconOff: 'ion-ios-star-outline', //Optional
iconOnColor: 'rgb(200, 200, 100)', //Optional
iconOffColor: 'rgb(200, 100, 100)', //Optional
rating: 2, //Optional
minRating:1, //Optional
readOnly: true, //Optional
callback: function(rating, index) { //Mandatory
$scope.ratingsCallback(rating, index);
}
};
$scope.ratingsCallback = function(rating, index) {
console.log('Selected rating is : ', rating, ' and the index is : ', index);
};
Well, you're using :hover and a really interesting combination of inverted HTML order and text direction switching in order to use the ~ general sibling selector to fill the previous stars, which is awesome.
But you're making so by using CSS :hover, which is really meant for when the mouse hovers an element on desktop. As soon as the pointer leaves, the :hover state ends, and therefore, any style that was applied on hover by CSS will go away.
On mobile, there's no really :hover state as theres no mouse pointer to begin with, but some engines use the taps instead.. but then again, when you tap anywhere else, the "pointer" will no longer be over the element, so the :hover state ends.
I'm not familiar with ionic, but it seems you'll need to modify whatever your rate() method is (or add another method on click) to display the current value.
A simple approach from the CSS point of view would be to use a CSS "selected" class identical to the :hover state, which you would add to the selected element on click (and remove from the others if present).
From the CSS point of view, should be something like this:
.rating>span.selected:before,
.rating>span.selected~span:before {
content: "\2605";
position: absolute;
}
To keep it DRY, you might just add it on the same rule as you're setting the hovers
.rating>span:hover:before,
.rating>span:hover~span:before,
.rating>span.selected:before,
.rating>span.selected~span:before {
content: "\2605";
position: absolute;
}
BTW, you have 2 identical copies of your .rating and .rating>span:hover~span:before rules, and 3 identical copies of .rating>span:hover:before rule, you might want to clean that as well.
I have a button in my webpage with below code -
HTML:
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button"></button>
CSS:
.checkout-button{
width: 130px;
height: 35px;
background: url('../poc2/images/checkout.png') no-repeat;
border: none;
vertical-align: top;
margin-left:35px;
cursor:pointer;
}
Now, the button works fine as I can click on it and have my corresponding php code run; the pointer turns into the hand symbol letting the user clearly know that it is clickable and that its a button.
What I would like to do is to modify the behavior of this button based on some conditions. Example pseudocode:
if flag=1:
/* enable the button, and let the user click it and run the php code */
else:
/* display this button, but don't let any actions take place if the user clicks on it; */
How do I code this enable-disable logic for the button? Basically, I want the button to work as a button under normal situations; and just as a picture without any hyperlink under certain other situations.
You can either do this without JavaScript (requires a page refresh) or with JavaScript and have no refresh.
Simply use the disabled attribute:
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button" disabled="disabled"></button>
And create a css style for it, if necessary. The example below shows a JavaScript solution. If the variable disableButton is set to true, the button will be disabled, else it can be clicked:
const disableButton = true; //change this value to false and the button will be clickable
const button = document.getElementById('checkout-button');
if (disableButton) button.disabled = "disabled";
.checkout-button {
width: 130px;
height: 35px;
background: #333;
border: none;
vertical-align: top;
margin-left: 35px;
cursor: pointer;
color: #fff;
}
.checkout-button:disabled {
background: #999;
color: #555;
cursor: not-allowed;
}
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button">submit</button>
You can do it either by modifying the attribute or by adding/removing a class.
Modifying attribute
You will want to switch between <button disabled="true"> and <button disabled="false">
With javascript, it could look like this:
if flag=1:
document.getElementById("your-btn").disabled = true;
else:
document.getElementById("your-btn").disabled = false;
And with jquery, like this:
if flag=1:
$('#your-btn').prop('disabled', true);
else:
$('#your-btn').prop('disabled', false);
Adding/removing class
Add the following css:
.btn-disabled{
cursor: not-allowed;
pointer-events: none;
}
And add/remove a class to the button.
With jquery:
if flag=1:
$('#your-btn').addClass('btn-disabled');
else:
$('#your-btn').removeClass('btn-disabled');
If you don't want jquery, but pure javascript, here is how to do it.
If your circumstance allows you could just remove the content in the action attribute from the form tag. Therefor when a user clicks submit, no action is taken.