I'm having this problem related to click events in angular.
My application is a tic-tac-toe app.
My application uses angular materials.
The problem: when a user clicks a button on the board, the click event seems to be leaking into a nearby button on the board. The following image demonstrates what I'm talking about.
Image of problem. As you can see, the button in col 1 row 2 was activated even though that button was not clicked. Below is a blitz of my application.
https://stackblitz.com/github/flashato9/tic-tac-toe
It would be great if I can get some help on this problem. Thanks!
really nice question =)
So the problem seems to be, that the mat button somehow responds to the change of the text cursor position.
if you change your square.component.html like so:
<div class="grid-button"><span>{{value}}</span></button>
and change the square.component.scss like so:
.grid-button{
width: 100%;
height: 100%;
background-color: rgb(91, 158, 91);
font-size: 10rem;
border-radius: 4px;
text-align: center;
padding: 50px;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
}
.grid-button:hover {
background-color: green;
}
when you now click a "button" you clearly see, that the cursor jumps to the next Field. But a simple div does not seem to react with :hover to that.
You can additionaly to the above CSS add user-select: none; to the .grid-button to not show the cursor or maybe a plain button (not Material) would also work.
Long story short: I would recommend not to use a Material Component if you change most of it's apperance, because there will probably allways be sideeffects.
Problem Solved
Here is the link posted by Vimal Patel in the comments.
Related
My issue is very similar to the one faced here: PrimeNG Chips overflow behaviour
The only difference is that I'm using Multi-Select Dropdown with the Display: Chip as one of the settings. The problem is that the container keeps on stretching horizontally and goes off the page, when I want it to expand vertically. I thought perhaps finding the elements and using the suggested CSS from the previous answer would work, but to no avail... I've tried the following:
::ng-deep .p-multiselect-label-container, .p-multiselect-chip {
flex-wrap: wrap;
align-content: space-between;
padding-bottom: 0;
}
::ng-deep .p-multiselect-token, .p-multiselect-token-label {
margin-bottom: 0.5rem;
Thanks so much for your help.
You were very close. The drop down can end up having some ugly whitespace when it wraps but its better than running off the page.
::ng-deep p-multiselect .p-multiselect-label{
display: flex;
flex-wrap: wrap;
}
::ng-deep p-multiselect .p-multiselect-token{
margin-bottom: .5rem
}
The modal's text is rendered correctly, however the background is rendered only within the range of the screen size, when you scroll it's transparent.
I have noticed that the background is rendered only when some action happens like click on a button on that modal or even when i open the Developer Tools.
This works as expected in other browsers though.
Here is the modal container's css
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
overflow: auto;
background-color: rgba(0,0,0,.7);
cursor: pointer;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
And the modal itself
background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;
Any ideas what may be the case with IE's rendering?
I found a way to sort this out.
Inside this modal I am actually rendering another div (which has different composition of text and actions in different pages) that inherits this css:
background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;
But apparently when you scroll down and as the new content loads the style does not apply. After adding once again background-color: ${colors.white}; to the div rendered inside the modal it's all looking nice.
On screen S1 in my webpage, I'm opening a full-view with md-dialog and then after clicking on some button on the full-view (while md-dialog is active) I pop up a message using md-toast.
Right after the toast message popes up, the full-view become transparent and showing mostly the original screen S1 (with some buttons and text from the full-view screen).
Even after I press a some button on the toast box to dismiss the toast, the toast message disappear but the full-view screen continue to be transparent.
Poping the toast on a regular screen without md-dialog (like on screen S1) works fine.
I found that when inspecting elements (on Chrome) -> style, under the css .md-dialog-container, position:absolute is checked, but after unchecking and checking it back, the md-dialog full-view looks fine and not transparent anymore (maybe it can assist to obtain the problem and proper solution).
.md-dialog-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 80;
overflow: hidden; }
Decleration on my service file (angular):
#Inject('$mdDialog') private $mdDialog: angular.material.IDialogService,<br>
#Inject('$mdToast') private $mdToast: ng.material.IToastService,
I tried to find similar issue or bug in the md-dialog/md-toast but couldn't find something related to my problem.
Same behavior also on Firefox.
I want to disable my navigation item using this code:
md-nav-bar
md-nav-item A
md-nav-item(ng-disabled=false) B
However, it doesn't work. Looking for the docs but couldn't find anything. How to disable navigation item in correct way?
I tried but couldn't find a proper way and didn't have to time to submit a pull/merge request (IF I could fix it that is). I did managed to get a work-around working, which basically intercepts and stops the click from propagating up to be handled by the mb-nav-item:
<md-nav-item md-nav-click="AppCtrl.gotoPage(1)" name="page-1">
<span ng-click="AppCtrl.gotoPageBlocker(1, $event)">Loan Details</span>
</md-nav-item>
Then in you controller/whatever, just define the gotoPageBlocker() like so:
function gotoPageBlocker(pageNo, theEvent) {
if (!userCanAccessPage(pageNo)) {
theEvent.preventDefault();
theEvent.stopPropagation();
}
}
This will intercept and either block or allow the click event to bubble up to the md-nav-item. Not the best way as using ng-disabled would be SOOO much easier + would have saved me a few hours mucking around, but it works for now. This will screw up the css a bit, so below is my "attempt" at making things look nice in css (well, scss):
.md-nav-item {
/**
* We need to move the margin and padding from the parent buttong to the child
* span. This is so the span intercepts the click from the whole area
*/
.md-button {
margin: 0px !important;
padding: 0px !important;
._md-nav-button-text span {
line-height: 24px;
margin: 0 4px;
padding: 12px 16px;
display: block;
outline: none;
}
}
/**
* This targets the unselected disabled button
*/
&[disabled] .md-button._md-nav-button.md-unselected {
color: #ff0000;
cursor: inherit;
}
}
the Theme I am using (Plasma) has an option in the settings to display the users profile picture, but when I select it, it only shows the picture in the comments.
When I looked at the node.tpl.php in the theme it does not output the $user_picture variable.
So I tried adding this variable myself just below the <header> tag as it is in the comment.tpl.php but the image is displayed above the post, rather than inline with left alignment.
I tried wrapping the $user_picture in <align=left> </align> but this did not work.
So how do I show the picture as left aligned with the header and text of the post wrapped around the user profile picture.
Thanks
Simon
Here is the solution if you are using the the Plasma Theme, but it will probably work on most themes.
In the Theme folder edit the CSS file and add the following code
.node .user-picture{
float: left;
padding: 4px;
border: 1px solid #d9d9d9;
margin-right: 7px;
margin-bottom: 7px;
}
.content .user-picture{
float: left;
padding: 4px;
border: 1px solid #d9d9d9;
margin-right: 7px;
margin-bottom: 7px;
}
Then in your node.tpl.php add the following just above print render($content);
print $user_picture;
This will put the user picture at the top left of the content for every node and teaser. You can still turn off the user profile picture in the theme settings.