Do you know why Chrome sets cursor's shape into the "text" one, when over an open selectbox ?
If I set the CSS to:
select {
cursor: pointer;
}
It sets the cursor when the mouse is over the selectbox, but when you click to open the list, it comes back to the "text" shape again.
Do you know how to change it to a pointer or something else when the selectbox is open ?
Thanks!
Mickael.
Being able to actually style the options of a select box is something supported differently by different browser. If this does not work in Chrome, it does not seem to support that.
Related
Haven't coded in years, and started to play around with Google App Maker last week. As the title suggests, I have a couple questions.
I'm trying to figure out if there's a way to dynamically change the color of a button upon click. Right now I have the button changing enabled status to false on click, and using CSS style to change the color of disabled buttons to gray. Is there a way to do this without disabling the button?
Is there a way to wrap text in a button? Right now I am overlaying a Label on the button with the correctly styled font, but would ideally like to have that text be from the Button, as the space the label takes up is not clickable.
Thanks in advance for any help!
add some lines to your page or global styles this
this should let you wrap text.
.app-Button {
white-space: pre-wrap;
}
Say you want to change your button blue when a Boolean value gets changed to "true" in your data source.
add a class to your styles
.blue{
background: blue;
}
then select your button and in the property editor>Display>styles click the drop down and select binding
set the binding to
=#datasource.item.**YourBooleanItem** === true? ['blue']:[]
Clarification there are two steps
Define a CSS class
Add the Class to the "styles" property of
your widget.
The Answer above uses a "binding" but also means that you've got to have an Item with this binding which you may not want.
I wanted a 'decimal' button to be orange when it was active. So on the Page I created a DecimalActive property. I used the onAttach event to set this property to false.
I created a CSS Class (local to the page) named Orange and Normal
.Orange {background:orange};
.Normal {background:white};
Then the following is my onClick
onClick(widget,event)
{
widget.root.properties.DecimalActive = !widget.root.properties.DecimalActive;
widget.styles = widget.root.properties.DecimalActive ? ['Orange'] : ['White'];
}
The challenge was figuring out exactly what AppMaker wanted in the styles []. I don't think it puts applied styles in this array. At least they didn't show up when I console.log(JSON.stringify(widget.styles);
I have verified that this does work (Dec 2019)
I think this answer is clearer and if someone wants to bind it the color change they still can.
Bug:
Z-Index NOT working on Material Dialog
What is the expected behavior?
Z-Index should work on Material Dialog or Dialog should be on top of everything else.
What is the current behavior?
Material Dialog gets covered by select's options that are below.
What are the steps to reproduce?
https://stackblitz.com/edit/angular-gsa8kr-rkss7t?file=app/dialog-overview-example.html
Type text.
Select dropdown.
Screenshots: https://postimg.cc/gallery/2i3tc2sbc/
Is there anything else we should know?
Tried CSS fixes:
.modal__content,dialog-layout,mat-dialog-container,.mat-dialog-container,#cdk-overlay-0,.cdk-overlay-pane {
z-index: 9999 !important;
}
NONE of that worked.
The class holding the matdialog overlay is cdk-overlay-container
Add this code to your style.css
.cdk-overlay-container {
z-index: 9999 !important;
}
That should solve the issue.
The <select> element is an interactive content element in HTML. It and behaves like a right click context menu and is rendered above all document elements.
In your case, when you click on select after entering your name in the field, the following things happen in sequence:
Blur event on the textbox is called and dialog opens.
Select menu opens.
So, according the sequence, what is happening is correct i.e. the dialog is opening first and then the select, so the select is above dialog which is correct.
But of course the interface does not seems good when this happens so there is a workaround, i.e. hide the select when the dialog opens and then show it again after lets say 0.1 seconds. As the select hides, its menu will hide with it.
I have implemented it for you. Please have a look at this Stackblitz: Select closing on dialog open
Hope it helps.
I have an issue I cannot resolve by myself.
There's a web page with a check box on it. See scr1.png attached.
The check box is some sort of a decoration ( I don't know what this technology is). I cannot click on it, and Webdriver doesn't see it. Real check box is hidden. It is hidden in CSS file (see right corner of a scr1.png)
Now when I change it manually in FireBug from visibility: none to visibility: yes, then real check box is shown on the page (see screen shot 2).
ISSUE
I'm trying to click on this check box like this:
#driver.find_element(:id,"MainContent_chkAuthorize").click
But then I'm getting Selenium::WebDriver::Error::ElementNotVisibleError: because element is hidden and cannot be found by Webdriver.
Is there any way to overcome this issue?
How can I change the visibility with Webdriver?
How can I click this element at last?
To make checkbox visible you should change its display property.
input.styled{
display:block; // Or you can remove this
}
I was looking at how to change the cursor over an HTML5 canvas when dragging the mouse...
Came across this: Change cursor over HTML5 Canvas when dragging the mouse
seemed logical that an :active pseudo-selector would do the trick...
When I used it on my page, however, the cursor set by the rule in the :active pseudo-selector was ignored, instead showing the text selection cursor.
In firefox, this behavior is not present - it obeys the cursor property I set.
Here's an example to demonstrate the behavior.
Any idea how to fix this in chrome?
Working Fiddle
Add the following for Chrome to turn off text selection while dragging and dropping.
document.onselectstart = function(){ return false; }
This has been answered a few times,
chrome sets cursor to text while dragging, why?
Click and Drag Cursor in Chrome
This question is because normally when you want to click a button or link the user expect a HAND in the cursor but in the case of input type="button" you get a cursor arrow , does any know why is this? is cause is inherit from base class input?? and all inputs have pointer cursor?
I Know a simple css lik {cursor:pointer} //make the work... but wait is not make more sense that instead of "cursor:pointer" would be {cursor:hand} //IE support this one.
Hope some have the answer.
It's because it has no defined cursor style so it defaults to default
The "hand" cursor originally arose because of single-click links. And, in a web browser, the <a> element is the link element.
But, in other contexts (Windows forms, etc.), the default cursor (arrow pointer) can click on the buttons, so the browsers are just keeping UI consistent.
A browser could theoretically change the default cursor to a hand for <input type="button"> elements.
But, cursor:pointer; makes more sense for CSS, because it doesn't necessarily have to be a hand image. You can always change your cursors to another image, but the behavior (pointer in this case) defines what you call the cursor, not the image.