I've been facing a strange problem in Microsoft Edge, I'm using Pseudo Selector :after to add an arrow to all the links in a paragraph but Microsoft Edge automatically changes the color to BLUE and above that you cannot even access the Pseudo Selector in Edge.
At first I thought, it was some theme styles, I set up a small html page with 1 link and Pseudo Selector but it changes color to blue here as well but works fine everywhere even in Internet Explorer!
Any help would be great.
No one seems to be facing this problem, I've searched some of the blogs.
<html>
<head></head>
<body>
<style>
a{
color: rgba(51,51,51,1) !important;
text-decoration: none !important;
}
a:before{
content: "\25B6" !important;
padding-right: 10px;
color: rgba(51,51,51,1) !important;
text-decoration: none !important;
}
</style>
Some Link
</body>
</html>
Your question is already answered in an other post:
Unicode displaying strange in Edge
Setting the font-family to:
font-family: "Segoe UI Symbol";
seems to do the trick.
Related
I am extensively using the showPopupDialog(...) function of Dialog and it works fine. I remember that in the past it didn't work on Android or there were problems on Android, but now it works pretty well on Android.
But I have a styling problem with Android. Basically I want there to be a Component shown in the middle of the Dialog. This is the easiest case, sometimes I add buttons on the south side. In both situations, however, I can put the content of the Dialog popup exactly on the center on iOS only, while on Android there are problems.
This is my current CSS:
#media platform-and {
PopupContentPane {
margin: 0px;
padding: 1.5mm;
padding-bottom: 3.0mm;
}
}
#media platform-ios {
PopupContentPane {
margin: 0px;
padding: 1.5mm;
padding-top: 0px;
}
}
The main difference between iOS and Android is that while iOS works correctly with this CSS whether the arrow is up or down, on Android, to get the same result of iOS, I would need a CSS made like this:
#media platform-and {
PopupContentPane-ArrowTop {
margin: 0px;
padding: 1.5mm;
}
PopupContentPane-ArrowBottom {
margin: 0px;
padding: 1.5mm;
padding-bottom: 3.0mm;
}
}
Or something similar (with a few more tweaks).
So, on Android, when the arrow is on the bottom I need an extra padding-bottom. That'all, but it's not possible because currently there aren't an UUID for the PopupContentPane when the arrow in on the top and another UUID when the arrow is on the bottom.
Any idea or workaround? Thank you
(I add that so far this is the only situation where I need to use the #media tag of CSS to differentiate iOS styles from Android styles.)
Originally when we wrote the popup dialog it was an iOS only feature since the styling were only on iOS. We used a 9-piece image border to do the popup and we didn't want to replicate that theme element in every one of the native themes so we left it to the developer.
Later on we came up with the ability to show an arrow on a RoundRectBorder. Another advantage was the move on iOS/Android to flat design which made the previously complex dialog style into a simple solid white popup. So we implemented this cross platform in white. But because iOS has the pre-existing image border it's still used on iOS and wasn't removed. We should probably remove it and deal with the minor compatibility issues that arise.
I recently worked on that in InteractionDialog here: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/components/InteractionDialog.java#L786-L815
It might make sense to do something similar for Dialog which doesn't seem to have that code anywhere: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/ui/Dialog.java#L1209
Im trying to create an acordion with react and styled-components.
Im trying changing display: none to display:block and adding a transition, but it changes with no transition, it only works fine if i remove the display property on the styled-component but i can see part of the div if i remove that property.Sorry for my english and thanks
https://codesandbox.io/s/z2nj50z46p?fontsize=14
I think your problem was in this part of the css
const AcordionItemWrapper = styled.div`
width: 100%; // This is now 100% and not 80%
height: auto;
overflow: hidden;
background-color: blue;
`;
And this change produces this result.
This ensures that your darkgoldenrod tab is 100% of it's containers width. When it is active the dropdown is also 100%.
After further investigation I have found your problem. Some mark up issues, plus browser applies a default margin on certain html elements. In this case paragraph has a default margin being applied. background color is ignored when margin is used.
The below link should be what you want.
https://codesandbox.io/s/nkj7mx73jj
Website: http://wearetechnology.com/
We have custom social media icons in the header and the footer of the above site.
Everything looks fine on the computer, even when I resize the browser window but when we pull up the site on a smart phone the icons resize to different sizes (skinny, smaller, etc.).
We'd like them to stay the same size as on the regular site but I can't seem to find the correct area in CSS that is changing.
Here is the CSS that I am using:
.social-networks .facebook a{background-image:url(images/facebook-wat.png) !important; width:32px !important; height:32px !important;}
.social-networks .twitter a{background-image:url(images/twitter-wat.png) !important; width:32px !important; height:32px !important;}
.social-networks .linkedin a{background-image:url(images/linkedin-wat.png) !important; width:32px !important; height:32px !important;}
.social-networks .google a{background-image:url(images/google-wat.png) !important; width:32px !important; height:32px !important;}
I have added to the media.css file but nothing seems to work.
Any help is appreciated.
have you added this in your html head ?
<meta name="viewport" content="width=device-width, initial-scale=1" />
Does anyone know how to increase the amount of rows shown at one instant for date pickers and general pickers in Sencha Touch 2.0?
For example, by default, a datepicker shows 3 rows at a time but I would like to show 4.
Solution to your question lies here
Sencha Touch Custom Picker Form Field
I recently looked into this again and came up with a solution using css ( this will show 5 rows on the picker instead of the normal 3):
.x-sheet.x-picker {
min-height: 305px !important;
}
This works in Sencha Touch 2.0.1. The "!important" thing isn't necessary. Just put this css in after everything else.... For my case I have an application.css that is created using sass but I also have an app.css that is applied after that for any tweaks.
I would just set height but it would be overridden by the elements style which looks like this:
element.style {
bottom: 0px !important;
height: 220px !important;
left: 0px !important;
right: 0px !important;
z-index: 8 !important;
}
So by setting the min-height it will take precedence over height...... I am not sure if this is the best way and I am open to suggestions/improvements.
Im my web page there is a div with width 0 which has a left and right border of 1px width each.
In Firefox when I give the following code it holds the div with 50px width, but it happens to be 48px wide in IE7.
<div style="width: 48px; border: #a9a9a9 1px solid; height: 30px;">test div</div>
Can anyone help me resolving this issue?
Thanks in advance.
Looks like IE box model bug. If in Quirks mode, IE subtracts border, padding, marginfrom element width. See the diagram below:
If you declare correct DOCTYPE for your HTML, this problem should go away.