Button does not get hidden on hover - html

I would hide a buttons except the last one . But when I put mouse over prevous elements, they get displayed.
Here's my html
<p-growl [(value)]="msgs"></p-growl>
<div class="center" appMcard>
<h2> Select Group (s) name(s) </h2>
<form [formGroup]="GroupRMPM_FG" class="form">
<div formArrayName="GroupId_Name" *ngFor="let control of GroupRMPM_FG.controls.GroupId_Name.controls; let i= index" >
<input type="text" pInputText [formControl]="control.controls.Group_Id_Name"/>
<button pButton type="button" class="delete-btn " *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length > 1" (click)="deleteGroup(i)" icon="fa-minus" >
</button>
<button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length == i+1" pButton type="button" (click)="addNewGroup()" icon="fa-plus" class="add-btn formcontainer"></button>
<button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length != i+1" pButton type="button" class="dummyElement" icon="fa-plus" ></button>
<button *ngIf="GroupRMPM_FG.controls.GroupId_Name.controls.length == 1" pButton type="button" class="dummyElement" icon="fa-plus" ></button>
</div>
</form>
<div>
I have created a "dummy element" so that the content is centred in the right way when I get only a "plus" icon .
Here's the CSS:
.dummyElement, .dummyElement:hover{
background-color:transparent;
border-color: transparent;
cursor:none;
color: transparent;
}
Here's what I get
Also the cursor is disappearing when I'm over the button.
In my Browser dev tool show me this :
For information I use primeNg Button.

Please use pointer-events: none; instead of cursor:none as below;
.dummyElement, .dummyElement:hover{
background-color:transparent;
border-color: transparent;
pointer-events: none;
color: transparent !important;
}

It seems like your CSS is overwritten by another CSS rule. Try to add !important to your CSS:
.dummyElement, .dummyElement:hover{
background-color:transparent;
border-color: transparent;
cursor:none;
color: transparent !important;
}

Related

how to style a button after clicking another button?

I am trying to change button 2 to finger pointer after clicking button 1
so i am wondering is there a way to do it if there is please tell me what code do i write
Note:button 1 is already a finger pointer i want button 2 to be a finger pointer after clicking button 1
this is my code:
<input type="button" id="button1" type="submit" style="cursor: pointer; background-color:black;height: 45px; width: 150px; color:red;border-radius:10px;"value="first button" onclick="enableButton2()" />
<input type="button" id="button2" style="background-color:yellow; height: 45px;width: 225px;color:red;border-radius:10px;"value="second button" disabled />
use it :
<script>
function enableButton2(){
var btn2 = document.getElementById('button2');
btn2.setAttribute('disabled', false)
btn2.style.cursor = 'pointer'
}
</script>
<input type="button" id="button1" type="submit" style="cursor: pointer; background-color:black;height: 45px; width: 150px; color:red;border-radius:10px;" value="first button" onclick="enableButton2()" />
<input type="button" id="button2" style="background-color:yellow; height: 45px;width: 225px;color:red;border-radius:10px;" value="second button" disabled="true" />
this way:
the css style you are looking for is cursor : not-allowed;
const bt_1 = document.getElementById('button1')
, bt_2 = document.getElementById('button2')
;
bt_1.onclick = () =>
{
bt_2.disabled = false
}
button {
cursor : pointer;
height : 45px;
border-radius : 10px;
color : red;
}
button[disabled] {
cursor : not-allowed;
pointer-events : none;
color : #c0c0c0;
background-color : #ffffff !important;
}
#button1 {
background-color : black;
width : 150px;
}
#button2 {
background-color : yellow;
width : 225px;
}
<button id="button1" type="submit" > first button </button>
<button id="button2" disabled > second button </button>

Change Background of Buttons after Clicks in Angular 8?

I have 4 buttons in a row in HTML of my Angular 8 Component.I am using ant design (antd) library.
What I Want ?
I want to change the background-color of button when it is
clicked.
Previously pressed button should return to original styling when
other button is pressed. And newly pressed should be highlighted
by changing background-color
Contraint
I want to achieve this without click-event method.I want to do this purely CSS(styling) based like giving buttons id and class and then implementing it ?
I checked few stack-overflow posts relevant to this problem but those did't helped. Few using hover and active classes
HTML
<div class="row">
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub1()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" ><span>Hub 1</span></button>
</div>
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub2()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" >Hub2</button>
</div>
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub3()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" >Hub 3</button>
</div>
<div class="col-md-1 col-sm-1">
<button (click)="redirectToHub4()" type="button" class="ant-btn ant-btn-primary ant-btn-lg"
ant-click-animating-without-extra-node="false" >Hub 4</button>
</div>
</div>
Typescript
redirectToHub1() {
this.router.navigate(["/hubs/hub1"], {
queryParams: { id: `${this.hubCode}` },
});
}
redirectToHub2() {
this.router.navigate(["/hubs/hub2"], {
queryParams: { id: `${this.hubCode}` },
});
}
redirectToHub3() {
this.router.navigate(["/hubs/hub3"], {
queryParams: { id: `${this.hubCode}` },
});
}
redirectToHub2() {
this.router.navigate(["/hubs/hub4"], {
queryParams: { id: `${this.hubCode}` },
});
}
Current Display
Required Display
It works fine with below styling but when I add (click)="redirectToHub()" methods it does't work
.ant-btn:active, .redirect_btn:focus{
background: blue;
}
Please fins the sample, this will be helpful.
.btn {
border: 1px solid blue;
background: #e7e7e7;
outline: none;
}
.btn:active, .btn:focus{
background: blue;
}
<button class="btn">Test 1</button>
<button class="btn">Test 2</button>
<button class="btn">Test 3</button>
<button class="btn">Test 4</button>
<button class="btn">Test 5</button>

Focus on timepicker instead of modal window

My modal window is blocking my time picker on Angular
Component.ts
open() {
const amazingTimePicker = this.atp.open();
amazingTimePicker.afterClose().subscribe(time => {
console.log(time);
});
}
// Triggering the modal window
createApplication(content) {
this.modalService.open(content, {centered: true, size: 'lg'});
}
Modal html
<ng-template #create let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Job Application</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form #createApplicationForm="ngForm" (ngSubmit)="createApplicationForm.form.valid && createForm(createApplicationForm)" >
<div class="form-group">
<div class="input-group">
<input class="form-control" id="preferredContactDate" name="preferredContactDate"
[(ngModel)]="newApplicationFormDateModel" ngbDatepicker #preferredContactDate="ngbDatepicker">
<div class="input-group-append">
//Open time picker here
<button class="btn btn-secondary" (click)="open()"
type="button"></button>
</div>
</div>
</div>
<div class="modal-footer">
<!-- Submit button -->
<input class="btn btn-dark" type="submit" value="Create" />
<button type="button" class="btn btn-dark" (click)="modal.dismiss('Cross click')">Cancel</button>
</div>
</form>
</div>
</ng-template>
However, when i do this, the time picker gets blocked by the modal.
Any ideas?
Stackbliz for timepicker - https://stackblitz.com/edit/amazing-timepicker-example
Referenced to: https://www.npmjs.com/package/amazing-time-picker
Modal: https://ng-bootstrap.github.io/#/components/modal/examples
Update based on answer:
<div class="time-picker">
<input atp-time-picker value="19:00"/>
</div>
CSS
.time-picker {
position:absolute;
z-index : 99999999;
}
.my-custom-class{
z-index: 900;
}
I also tried inline style as well
<input style= "z-index: 99999999;" atp-time-picker value="19:00"/>
We need to get the bootstrap's z-index dynamically and increment it with some arbitrary number and set to the time-picket something like below:
$(document).on('show.bs.modal', '.modal', function (event) {
const zIndex = 1045 + (10 * $('.modal:visible').length);
// this zIndex can be assigned to the time-picker
$(this).css('z-index', zIndex);
setTimeout(function () {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
you can specify a custom class for the modal to overwrite the z-index.
example:
in your js/ts:
this.modalService.open(content, {backdropClass: 'my-custom-class'});
css:
.my-custom-class{
z-index: 900;
}
Your issue is similar to the one mentioned here : https://github.com/owsolutions/amazing-time-picker/issues/129
The proposed solution, as think win win explained, was to increase the timepicker's z-index :
time-picker {
position:absolute;
z-index : 99999999;
}

Remove space between text lines in button tag

When my answer choices go to two lines I get a lot of space in between each sentence in my button tag. I 've tried setting the
display:block;
float:left;
which didn't work. What I want to happen is that when the button gets more then one line, there is reduced space in between the sentences. Here is my code and my snippet.
P.S I know I have a lot of inline CSS. This is due to the application I am using called Ionic Creator which puts them their.
Image snippet
HTML
<div class="answer-div">
<button style="font-weight:700;color:#32575E;font-size:28px;margin-left:15%;" id="a_one" value="" class="button button-royal button-large button-outline answer-choices"></button>
<button style="font-weight:700;color:#32575E;font-size:28px;margin-left:4%;" id="a_two" value="" class="button button-royal button-large button-outline answer-choices"></button>
<div class="spacer" style="width: 602.391px; height: 26px;"></div>
<button style="font-weight:700;color:#32575E;font-size:28px;margin-left:15%;" id="a_three" value="" class="button button-royal button-large button-outline answer-choices"></button>
<button style="font-weight:700;color:#32575E;font-size:28px;margin-left:4%;" id="a_four" value="" class="button button-royal button-large button-outline answer-choices"></button>
<div class="spacer" style="width: 602.391px; height: 41px;"></div>
<button style="font-weight:500;font-size:28px;" id="submit" value="" class="button button-royal button-large button-block submit">SUBMIT</button>
<button style="font-weight:500;font-size:28px;" id="correct" class="button button-royal button-large button-block submit">CORRECT!</button>
<button style="font-weight:500;font-size:28px;" id="submit-fake" class="button button-royal button-large button-block submit active"></button>
<button style="font-weight:600;color:#FFFFFF;font-size:36px;" id="maggies_drawers" class="button button-assertive button-large button-block maggies_drawers">MAGGIE'S DRAWERS</button>
</div>
CSS
.answer-choices {
width: 35%;
height:29%;
border: solid 1.5pt #32575e;
margin: 0;
padding: 0;
}
Add a small line-heightsetting, like line-height: 1 or even less (0.9 in my example snippet):
.answer-choices {
border: solid 1.5pt #32575e;
margin: 0;
padding: 20px;
line-height: 0.9;
width: 240px;
}
<button style="font-weight:600;color:#333;font-size:36px;" class="answer-choices">MAGGIE'S DRAWERS</button>
Have you tried setting the line-height property of the element in question to something smaller?
Off the top of my head sounds like you need to set the line-height property in the CSS. https://www.w3schools.com/cssref/pr_dim_line-height.asp
Example: line-height: 1.4;

Django website - make button link to a different app

I am trying to make a button that links to another app when you click it.
For some reason, this works:
Find a ride
But this does not:
<button type="button" class="btn btn-xl" style=" border-color: rgb(2,132,69); background-color: rgb(2,132,69); color: rgb(246,246,247); font-family: Verdana;font-size: large" href="{% url 'ridesharing:ride-list' %}">Find a ride</button>
I am using a button because I like how I can customize how it looks. How do I get the button to link to the right app.
Either have the button submit a form with the URL as the action of the form
<form action="{% url 'ridesharing:ride-list' %}">
<button type="submit" class="btn btn-xl" style=" border-color: rgb(2,132,69); background-color: rgb(2,132,69); color: rgb(246,246,247); font-family: Verdana;font-size: large">Find a ride</button>
</form>
or add an event listener/handler that changes the window.location.href
<button type="button" class="btn btn-xl" style=" border-color: rgb(2,132,69); background-color: rgb(2,132,69); color: rgb(246,246,247); font-family: Verdana;font-size: large" onclick="window.location.href='{% url 'ridesharing:ride-list' %}'">Find a ride</button>