In the project, we used angular material and created a theme for it. Everything is defined globaly (src/styles/theme.scss and theme file is imported to src/styles.scss) so that changes are available everywhere.
Unfortunately, there is a race because the inputs are displayed correctly only after refreshing the page.
how I style the components:
mat-form-field {
.mat-form-field-flex {
border: 1px solid $form-border--color;
}
...
}
Related
I have Ajax file upload control on an aspx page. The drag and drop zone of the control is visible on Chrome and mozilla but not on IE10. I understand that it should be visible on browsers which support HTML5 and CSS3. I believe IE10 has the support.
I went through the CSS and found this difference
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; visibility: visible;">Drop files here</div> (In Chrome)
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; display: none; visibility: hidden;"/> (In IE10)
In case of IE10, The display is set to none and visibility to hidden.
My question specifically is
At what point is this browser specific css rendered? so that I could get to why this is happening even when there is support for HTML5 and CSS3
I believe I cannot change this property in my code as it would be overwritten again in case of IE10.
EDIT:
I did try to edit the css by setting display to "block" and visibility to "visible". But this creates a disproportionate view with scroll bars which is not an ideal solution in my case
catch it with jquery.
// let the dropzone load first
setTimeout(function () {
$('.ajax__fileupload_dropzone').text('Drag Drop/Click');
if ($.browser.msie) {
$('.ajax__fileupload_dropzone').css({'visibility': 'visible','display':''});
}
}, 10);
this got it to show but it would not work right. I updated the toolkit from 15.1.2.0 to 15.1.3.0 and this seems to fix the problem. The odd thing is the night before I had no problems with IE.
I'm using gmaps.js to create map in a site based on twitter bootstrap and the google maps zoom in/ zoom out buttons don't appear. Also I noticed when you click the marker the 'x' close button doesn't appear. Here is the link to the page.
http://www.smileconnectcard.co.uk/FindPractice/SearchResults?location=London%2C%20UK
Any help would be much appreciated.
There is an issue with Bootstrap that conflicts with google maps api. The issue applies max-width:100% to all images. This is acceptable in most cases, but it causes a conflict with google api.
There have been various attempts to fix this and various reverts by the bootstrap developers - https://github.com/twbs/bootstrap/issues/1552.
To fix this so that it only affects the google map I would recomend using the following css
#map label { width: auto; display:inline; }
#map img { max-width: none; }
On inspecting, img tag has max-width: 100%
So try this, it is working.
img {
max-width: none;
}
Maybe happened due to CSS Conflict.
Update: As I suspected, it is a CSS Conflict.
it happened because of your layout.css
img {
max-width:100%; // change it here
}
I'm going crazy with this.
Using bootstrap for rails + less-rails gem and some styles are completely different on development and production.
Example:
a styles do have a black background-color on the hover event. I overwrote the a:hover style already via
background-color: none !important;
but it still shows up this weird black background on the hover event. Inspecting the element via Chrome does not even show this CSS style! So where does it come from?
Also, the font is different (dev vs live) and other minor things.
On the other hand, buttons and most major elements (well, lead etc etc) are working fine.
Where does this difference come from and how do I make dev versus live the same CSS appearance?
I deploy my app on heroku btw.
Thanks for any help.
I think you are using other style on your application, something like a scaffold for generator, scaffold will generate scaffold css. I'm use scaffold and i'm having scaffold.css.scss on my apps, Here's style of link on scaffold.css.scss
a {
color: #000;
&:visited {
color: #666;
}
&:hover {
color: #fff;
background-color: #000;
}
}
You should remove style of link or you can remove scaffold style on your apps if you won't it.
Twitter bootstrap do not have style link with a black background, by default.
If you don't have other style on your app and only use twitter bootstrap you should find style of link that bring about an issue
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"