Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow customization of button text in icon #182

Closed
atesca09 opened this issue Sep 12, 2021 · 10 comments
Closed

Allow customization of button text in icon #182

atesca09 opened this issue Sep 12, 2021 · 10 comments

Comments

@atesca09
Copy link

For localization purposes I need to be able to customize the text of the button in the Zebra_DatePicker_Icon.

https://github.com/stefangabos/Zebra_Datepicker/blame/72ac8a09105909deed9d68dda9d6172eedbeb6e0/src/zebra_datepicker.src.js#L1220

The names of the days and months can already be overwritten.

@stefangabos
Copy link
Owner

hah! how come nobody ever noticed that!

@stefangabos
Copy link
Owner

...but isn't that like never visible?

@atesca09
Copy link
Author

With the default stylesheet it is pulled out to the left. But because of the line-height not being 16px I want to use my own icon-font and ::before { content: ... } so I ended up with something like this
image

@stefangabos
Copy link
Owner

so you don't want the icon, but only text?

@stefangabos
Copy link
Owner

are you sure you are including the CSS correctly? you should always see the icon and never the text. or, you could use something like font-size: 0

@atesca09
Copy link
Author

Yeah I can hide the text with font-size: 0;, but I'd like to use the text and set it with an property on init.

image

@stefangabos
Copy link
Owner

stefangabos commented Sep 12, 2021

but why aren't you using the library's CSS because it already has text-indent: -9000px
don't get me wrong, i can update the library and change that text, I just want to understand the scenario you are in, and why would you go that way?
so, the CSS for the icon is this

    background: url('icons.png') no-repeat center top;
    border: none;
    cursor: pointer;
    display: block;
    height: 16px;
    line-height: 0;
    padding: 0;
    position: absolute;
    text-indent: -9000px;
    width: 16px;

changing just

background: url('icons.png') no-repeat center top;

to point to your pen icon would fix things

@atesca09
Copy link
Author

I'm not using text-indent because I was planning on using the button text. But I can only use the text, if I'm able to set the text on init. I guess I can work around that.

@stefangabos
Copy link
Owner

no, it's cool, i will add that option

@stefangabos
Copy link
Owner

I pushed a fix. Look in the docs for the show_icon property

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants