Move this topic
css corner
in Using jQuery UI
•
6 years ago
I edited theme with 8px corner for dialog, tooltip etc. I don't want corner for form fields and prefer to keep them normal. So is there a trick to override corner setting for spinner that it looks without corner?
1
Replies(27)
Re: css corner
6 years ago
Don't ever edit themes! Write CSS overrides in your own file that you load after the theme instead. If you edit your theme, you will then have to do it all over again every time you update to a new version of JQUI.
Examine the page in the DOM using your friendly desktop browser's inspection and debug features. JQUI adds convenient CSS classes to widgets and sometimes to parts of widgets. Between this and the widget HTML structure, you should be able to figure out how to write selectors to differentiate between spinners, form fields, dialogs, tool tips, etc.
Leave a comment on watusiware's reply
Re: css corner
6 years ago
Thanks for the advice. I have a theme with round corner. In my own css I don't have a class for spinner. Please advice how is the css I have to add to my own css to set corner of spinner back to its default/standard? I am unfamiliar with css. I greatly appreciate your help.
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
" I am unfamiliar with css"
You need to be familiar with CSS in order to write web pages. I'd suggest learning it. You will not even be able to understand jQuery selectors without first knowing something about CSS.
If you are unwilling to learn, I'd suggest you stick with JQUI themes they way they come, rather than monkeying with the theme CSS.
Leave a comment on watusiware's reply
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
Or just tell me which css class should I look into to copy/paste it to my own css just setting 0px for corner?
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
If you meant by overriding below in my own css:
- .ui-corner-tl {
border-top-left-radius: 8px;
}
.ui-corner-tr {
border-top-right-radius: 8px;
}
.ui-corner-bl {
border-bottom-left-radius: 8px;
}
.ui-corner-br {
border-bottom-right-radius: 8px;
}
I don't want to override corner globally, I just want corner of spinner set to 0px. How is possible?
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
You will need a more specific selector. Write a selector that combines CSS classes.
Learn some CSS! You can't do much of ANYTHING with web pages without learning it, let alone with jQuery.
You need to select, for example. ui-corner-tr with another class or classes or other selector(s) that will select - for example, tooltips. Or whatever it is you want to change.
If you use the browser's inspection tools, you can see what classes are set on what, and you can formulate a selector. You can even trying it out right in the browser, without changing your code.
Leave a comment on watusiware's reply
Re: css corner
6 years ago
by 'more specific selector' do you mean:
<input id="blah" name="value">
var spinner = $( "#blah" ).spinner();
then define .blah class as my desired?
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
See this:
https://jsfiddle.net/nimasdj/scc4xnbh/
why any changes on css px doesn't affect on corner of spinner to remove all corners?
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
Re: Re: css corner
6 years ago
Many thanks. I appreciate your patience to bear with me. Awesome support.
My jQueryUI needs at current time are simple: just dialog/tooltip/spinner/datePicker. I hate to ask for more, but if you kindly help for my another post regarding confirmation dialog to delete database rows I will be just fine with jQueryUI.
My jQueryUI needs at current time are simple: just dialog/tooltip/spinner/datePicker. I hate to ask for more, but if you kindly help for my another post regarding confirmation dialog to delete database rows I will be just fine with jQueryUI.
Leave a comment on jakecigar's reply
Re: css corner
6 years ago
Thanks for trying to help, I did exactly the same as you said, and there is no-corner any more, but please see how right side icons, look like:
http://expirebox.com/download/b2b8147e766f829b583606330d5e972d.html
(both links has the same file)
How to fix the corner of icons?
I thought I have to add a class for
.br .ui-icon {
and set radius to 0, but it seems I am wrong, please advice which class I should use to remove corners of left side top-down icons? even .br .ui-corner-all { did not help.
Only ui-widget did solve my problem. However it works now, but please confirm if I am in correct path to use ui-widget instead?
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
I won't download mystery files from some mysterious sites. Either update the fiddle or share a link to your page.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: css corner
6 years ago
That was a screenshot to show that unless I used the css on your jsFiddle link to remove corners, corners actually are removed now, but top-bottom arrows in right side of spinner still have corner, so I guess I should change
.br ui-spinner
in your jsFiddle sample to:
.br ui-widget
to remove corners of top-bottom arrow keys in right side of spinner? Am I correct? Or I should override another class?
.br ui-spinner
in your jsFiddle sample to:
.br ui-widget
to remove corners of top-bottom arrow keys in right side of spinner? Am I correct? Or I should override another class?
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
Icons don't even HAVE a corner radius! And I can't even imagine what you think an icon might look like "without a corner radius". Icons are just images. They are what they are.
In any case, it is time for you to stop guessing at solutions and start learning. I gave you the best links for learning!
Leave a comment on watusiware's reply
Re: css corner
6 years ago
If you look at screenshots I sent the link, you will see strangely enough they have corner!
If I change my custom css from ui-spinner to ui-widget then this is solved! Isn't it odd?
If I change my custom css from ui-spinner to ui-widget then this is solved! Isn't it odd?
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
"If I change my custom css from ui-spinner to ui-widget then this is solved! Isn't it odd?"
Not odd at all, since an icon is not a spinner, and ui-widget has nothing to do with icons!
BTW, Jake's solution will remove corners from any spinner that is enclosed in a <span class='br'>. (The class doesn't HAVE to be "br" - Jake just made that up as an example.) Just pick a class name that is somehow meaningful to you.) It was unclear if you want to remove corners from a specific spinner (or spinners) or ALL spinners. Did you want to remove it from all spinners, or just certain ones?
You keep guessing at solutions. It is clear you don't understand the first thing about CSS. That is not meant as a criticism, but a statement of fact. I gave you the links where you can learn. If you learn a few basics, you can work it out yourself. And even if you cant, if you will take the time to learn just a little bit, it will be much easier for us to understand your questions.
At least make a new Fiddle to show your problem so that we can understand what you mean. Fiddles are a lot more useful than screenshots. And most people here will down download any files that you provide.
Leave a comment on watusiware's reply
Re: css corner
6 years ago
I want to remove it from all spinners. So what should I do? Isn't it enough to enclose all of them with that span tag? Or is there a better way?
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
And I don't understand what you mean I am guessing. I said with .br ui-spinner, as you see in screenshot top-bottom arrows still have corner, and when I change css to .br ui-widget, the corner of arrows are removed too. Just look at screenshot and you'll see what I am saying.
Leave a comment on nimasdj1's reply
Leave a comment on jakecigar's reply
Re: Re: css corner
6 years ago
No.
But you can make your localhost public for a short while with ngrok - secure introspectable tunnels to localhost
JΛ̊KE
Leave a comment on nimasdj1's reply
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
"when I change css to .br ui-widget, the corner of arrows are removed too. Just look at screenshot and you'll see what I am saying."
I haven't the foggiest idea what the "corner" of an arrow is!
But if you say so! So, you solved your problem, right? You removed the corner from the arrow, whatever that means.
Make a jsFiddle. It's what we use here for demos and working out problems.
Leave a comment on watusiware's reply
Leave a comment on nimasdj1's reply
Re: css corner
6 years ago
You seem to think this is a case of team programming. It is not. You prepare demos, and we look at them. No downloading no looking at pictures you loaded to some mystery site.
Learn jsfiddle or hire someone to oversee your work.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: css corner
6 years ago
Ok, let's forget about this discussion, if You just advice for that table row confirm deletion dialog, I will be just fine. Thanks for your patience to bear with me. greatly appreciated.
Leave a comment on nimasdj1's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to nimasdj1's question
{"z633898716":[14737000007000052,14737000006999021,14737000006999023,14737000006999025,14737000006999041,14737000006999045,14737000006999047,14737000007000059,14737000006999059,14737000007000063,14737000007000065,14737000007000067,14737000007000069,14737000007000071,14737000007000073,14737000007000075,14737000006999085],"z7664639":[14737000007002025,14737000007002029,14737000007002083,14737000007002167,14737000007002169,14737000007002179],"z2950240":[14737000007002093,14737000007002161,14737000007002173,14737000007002177,14737000007002181]}