Is there a proper way to have 2 differently styled jquery ui buttons on the same page?
I am able to copy css around for the second button but there are a lot of different !important styles that I keep needing to add a second !important after the first in order to change the style.
for ex:
.ui-state-active {
background:none !important;
background-color:#E1E1E1 !important;
color:#000 !important;
}
I will then have to go and add right after (and it needs to be after
.new-theme.ui-state-active {
background:none !important;
background-color:red !important;
color:#000 !important;
}
the problem is these important styles are all over for each state so I have to mind where they go. Is this normal or is this usually handled a different way?
Are you using an older version of jQuery UI that requires you to use !important to override their styles? Newer version have fixed this: Use of !important in jquery-ui.css should be avoided.
If you can/are using a newer version, try getting rid of !important and instead rely on selector specificity to get your desired results.
I would recommend using jqueryui-speciffic css. Except difficulties with different button stylings, there may be performance problems while rendering larger amounts of buttons.
This resource is relatively old but I found it very valuable while using jqueryui css.
Related
How do I change the direction of Angular Material progress bar for RTL languages?
There is a css translate function that needs to be hacked, but I am not sure how to do this.
As an update, it appears this 'just works' in Material 7.3.6 using the 'dir' property.
<mat-progress-bar value="90" dir="rtl"></mat-progress-bar>
You can manually override it via CSS using the following code:
::ng-deep .mat-progress-bar[dir='rtl'],
:host-context([dir='rtl']) ::ng-deep .mat-progress-bar {
transform: none;
}
Once I find a better way I will inform you
I'm using columntoggle mode because the output style is what I need/like. The system adds that row/button with "Columns..." (presumably so that you can pick which columns at run-time...which doesn't seem to work on my droid anyway. I just want to remove it.
Here is a demo: http://jsfiddle.net/ezanker/28tNw/
Basically you can just add the following CSS to hide the button:
.ui-table-columntoggle-btn {
display: none;
}
I have a jsfiddle to show what I'm trying to do: http://jsfiddle.net/n9bSC/3/
The jsfiddle works well and does not demonstrate the bug.
In my actual code, the transfer finishes directly below the target (instead of directly at the target).
I've tried removing the float, adding various "position" styles, etc.
Any thoughts on what could be causing the behavior that I've described?
I don't fully understand this, but I think the problem is fixed.
Our CSS had:
body{
position: relative;
}
So I now change that to "inherit" on the page where I'm doing the jquery-ui transfer effect.
Then, I use conditional CSS for only IE7 to do this:
.joyride-tip-guide {
margin-top: -10px;
}
(I'm using Joyride and noticed that changing the body position messed up the Joyride tour step positioning for Internet Explorer 7.)
To apply behavior: url(PIE.htc); to all css files in the project seams to be very long story and with each new version i need to repeat it again.
Is there jquery ui CSS3Pie versions i can find somewhere?
OR
Is it possible to add CSS3Pie support in separate css file, so in such case it will be possible to use that css for any new jquery ui version.
I am trying to do such fix for jquery UI that in my custom css:
.ui-corner-top, .ui-corner-left, .ui-corner-right, .ui-corner-bottom { behavior: url("PIE.htc"); }
.ui-corner-all, .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br { behavior: url("PIE.htc"); }
But it is not working.
At the same time such fix working for my styles, for example if a have style
.mystyle
{
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border: solid 2px #36405c;
}
Than i could define this and it will be working:
.mystyle
{
behavior: url("PIE.htc"); /*it will be working*/
}
So i am assuming that it is not working in jquery UI case because jquery UI has multiple places with .ui-corner-* declarations with different radiuses.
Anyway is it possible to do something with that?
Any ideas someone?
You could create your own theme with http://jqueryui.com/themeroller/, set all the border-radius to 0 and then apply your styles to ".ui-corner-all"
I developed a good site layout which works like a charm in Webkit and FF based browsers... but in IE 7 and 8 everything get broken up like.
I've never seen so much difference between Safari/Chorme and IE. I tried different DOCTYPEs but there was no difference.
If I remove all the jquery css everything works fine.
You can see it working on [removed]
Can anyone hint me on how to solve this mess?
You have a compatibility issues, I think you need to override the ui-state-default and .ui-state-hover classes on the buyitui.css file to fit IE.
You can use firebug in firefox to go throught the css files.
To overide the css, create one css file and put all the overrides on this file and place it on the bottom of all the css files. Assuming you make sure you are not using inline style sheet.
EDIT:
You need to override this three:
<div class="clear"/>
<div class="separator" style="width: 950px; margin-left: auto; margin-right: auto; float: right;"/>
<div id="pie" style="float: right;">
The Problem seems on the clear class you have above the separator. When you do clear both, all the floating is cleared and the separator is getting up of the page with the height exanding almost all over the page.
Try to change this and you will see the changes:
This could not be the exact solution, but it really points out the problem on your pages.
on the clear class
remove the clear:both; or make it clear:none;
on the separator class
add float:right and margin-right:200px;
on the pie id
add float:right; and margin-right:200px;
the jquery accordion was what was breaking everything, regeneratd and problem solved (just the regular no standars on IE)