I'm using foundation 4 and I am trying to override the standard '-webkit-appearance: menu-list;' which I can turn off but I can't get it to allow for me to override the icon. I attempted to try :after and that doesn't work (I found why in another post). I'm wondering, is there a way (other than jquery) to use css to replace the select menu icon?
If I have to use jquery that's fine but I'd rather be using css if possible.
Related
I'm creating an app in Angular 6 and I want to change all the scrollbars to a custom one. I'm aiming for something similar to the Mac OS scrollbar;
Transparent
Over the content
Shows on mouse over
I want a method that will replace all and any scrollbar that will appear in the app to this custom one without altering the html.
I've been looking for an Angular/Typescript plugin to do this but each one I found is suggesting that I wrap my content in it's related selector. Which is not something I want to do. Or am I not understanding how to use this?
This one plugin I'm looking at: https://www.npmjs.com/package/ngx-perfect-scrollbar
Is there a way to use this plugin without wrapping my content with <perfect-scrollbar>?
Sorry, I'm very new to Angular :(
I was also looking into Custom CSS scrollbars but that only works for webkit browsers.
just use this :
const ps = new PerfectScrollbar('.scroll-container');
and set scroll-container class on all the elements that need scroll
I'm creating website and I have a little issue. For every name for class or ID, I used camelCase, but fontello icon always have syntaxes: icon-something. Is there a way to create alias to icon, smg like iconSomething?
Fontello CSS Prefix
Fontello has a built-in setting that allows you to change the css prefix from icon- to an alternative. On Fontello.com at the top of the page, there is a square button with a wrench on it. When you click on that button, you will be presented with a text-field that allows you to change the icon- css prefix. It's also worth noting that the - is not required.
Is there a way to create an ios datepicker/timepicker like styled custom select for ionic apps?
For example, I want to create a custom select as the following image
This is kind of late to the party, but maybe this will help: https://github.com/mmnaseri/proton.multi-list-picker
This is an Angular 1.x component with no dependencies on any other frameworks that provides an easy solution for creating iOS-style select views.
For instance, this is the sort of select that you can create with this component:
And this is another example:
If you set the attachment value to bottom it will be exactly like the iOS select component looks like, with a fixed bottom modal attachment.
I'm not sure but for now this not possible with Ionic. There options like this ionic-datepicker, but this isn't native, just a library.
There are various plugins available out there. You can find one here
Also you can use HTML Select/Option list to show up a native alike control that will display a list of single select-able items. Select/Option tag invokes OS specific native selector.
Have a look at it here. That demo might help you.
I'm using the Google SaveToDrive button on my webpage as shown here: https://developers.google.com/drive/savetodrive
However, the g-savetodrive button always shows up in a fixed size that does not match the rest of my UI/layout. Are there any parameters to it that we can change the size of the button?
I tried other possibilities that I saw in +1 and Google SignIn buttons also (like data-size, data-width, data-height), but none of them worked.
The short answer is: not easily.
The google api embeds the icon in an iframe, which means you'd have to do some fiddling with jquery to apply any style rules to the button.
see: How to apply CSS to iframe?
To make matters worse the img source is very small. Stretching it yields a very fuzzy image that I wouldn't recommend. At the very least you'll want to find a large drive image and use that instead.
I think your best bet is creating a custom button that emulates googles class and id tags. Hopefully you can reverse engineer the button click and hook your custom button up to the same functionality.
I've been trying to use Jquery UI, and I keep getting confused by it. So I've put together a minimal test-case here.
http://jsfiddle.net/vmZap/
Basically, I include JQUERY, JQUERY-UI, and the JQUERY-UI CSS file. Then I put this code on the page:
<button>Button</button>
Based on my reading, that button, should show up with the Jquery UI Signature look (complete with style and markup changes). As you can see in my fiddle, it doesn't. Is there some sort of call I'm missing that I need to use to initialize jquery-ui to try to do something rather than just sitting there?
I have been fiddling with this stuff for days, but when a test-case as simple as this doesn't work, I'm out of ideas.
If you want to use the jquery-ui button on all button elements, then in the onDomReady you need to add:
$('button').button();
This will apply the jquery-ui button styles to all elements matching your selector, in this case all button elements.
I haven't worked much with jQuery-UI, but don't you need a JS call to make the button look different?
$("button").button();