I have been trying to get my jQuery UI Select dropdown to be aligned on Chrome for some time. Its off by 1px however the list and the parent span.ui-selectmenu-button are both "151px".
All other browsers display it correct.
I've been going through the computer styles one by one but can't find anything.
Its instantiated with the common:
$("#mainlanguage").selectmenu();
And the select box which jQuery uses has basic styling on it. (SCSS)
jquery ui language !select
.mainSearch{
.ui-selectmenu-button {
background:$upsbrown;
outline-style:none!important; // reset
&.ui-state-hover{
border:0;
border-radius:0;
}
border:0;
border-radius:0;
left: 63.3%;
span{
background-color: $upsbrown;
background-position: 93.5% center;
//border-top: 1px solid $navtext;
color: $navtext;
font-size: 11px;
line-height: 18px;
position: relative;
padding-left: 6px;
max-width: 151px;
height: 21px;
z-index: 400;
webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
}
}
Related
I am trying to customize AntD using css-in-js. I am able to customize the component very successfully but run into an issue during instantiation. The props for the original AntD component are no longer available. This is a big issue. Does anyone have any work arounds to maintain the full props of the original AntD component.
I have used styled-components to style the AntD button , but am not able to retain the props.
const StyledButtonPrimary = styled(Button)
.ant-click-animating-node {
display: none;
}
&& {
border-width: 1px;
border-style: solid;
border-color: ${red500};
margin: 0;
background-color: ${red500};
border-radius: 4px;
color: ${white};
font-family: inherit;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
text-align: center;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
white-space: nowrap;
&:hover {
border-color: ${red700};
background-color: ${red700};
color: ${white};
}
&:active{
border-color: ${red700};
background-color: ${red500};
box-shadow: inset 0 0 0 1px ${red700};
animation-duration: 0s;
animation: none;
animation-fill-mode: none;
}
};
The code below is the styled button but I no longer have access to any of the original AntD Button props.
<StyledButtonPrimary >
Primary Button
</StyledButtonPrimary>
I've recently come across this issue that
pseudo selector :active doesn't display the same on React and Static page.
this is what I apply
css code exactly the same
I don't even understand why this selector renders on mobile differently according to the framework and static.
button {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
-webkit-appearance: none;
text-transform: none;
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
}
.form_button {
display: block;
position: relative;
padding: 8px 0 8px 58px;
border: 1px solid red;
border-radius: 8px;
margin-bottom: 18px;
width: 200px;
height: 100px;
text-align: left;
}
.form_button:active {
background-color: green;
}
please check out these both link below on Iphone chrome broswer. ( not Android)
React page - https://codesandbox.io/s/elated-smoke-o8m2xo?file=/src/index.css:0-476
Static page without framework - https://codesandbox.io/s/vigorous-dew-vssmej
Does anyone know about this issue?
or any solution for this?
for React Apps, when i want to hide the scrollbar using WEKBIT apparently i doesn't work on iOS web-view.
i'm using this code :
::-webkit-scrollbar {
width: 0px;
background-color: transparent;
overflow: hidden;
}
::-webkit-scrollbar-track {
background-color: transparent;
overflow-y: hidden;
display: none;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:focus {
background-color: transparent;
overflow-y: hidden;
display: none;
}
and it always shown up everytime, how do i fix that?
On my site, I have a few footer links that are showing the wrong border color for iOS devices when the link is visited. This is happening on Chrome and Safari for iOS.
Desktop
iOS
I searched through my code and I am not setting this style anywhere.
I have tried reproducing this in a fiddle/codepen, but since they don't let you redirect, I can't see what the a:visited looks like for mobile.
Code
.productsalessection {
width: 34%;
padding-top: 10px;
padding-right: 1%;
padding-bottom: 10px;
float: left;
font-family: Lato, sans-serif;
}
.productsalesbox {
width: 100%;
padding: 14px 12px;
float: left;
border-right: 1px solid #e2e2e2;
}
.productsalesbadge {
width: 80px;
height: 100%;
margin-right: 6px;
float: left;
border: 1px solid #ddd;
border-radius: 4px;
background-color: white;
}
img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
.productsalesheading {
margin-top: 3px;
color: #444;
font-size: 16px;
font-weight: 400;
text-transform: uppercase;
}
.productsalestext {
font-size: 12px;
line-height: 14px;
color: #777;
}
<a class="w-clearfix productsalessection" target="_blank" href="http://www.google.com">
<div class="w-clearfix productsalesbox">
<div class="productsalesbadge"><img src="http://www.chicmarket.com/images/SJ.svg">
</div>
<div class="productsalesheading">Trusted</div>
<div class="productsalestext">We proudly maintain a strong relationship with our customers.</div>
</div>
</a>
Changing the color of the a:visited works.
a:visited {
color: #C8C8C8;
}
But this solution is not ideal because this will mess with other a tags on my site.
I have also tried.
a:visited {
color: rgba(0, 0, 0, 0.0);
}
But instead of making the color transparent, it just makes the border black.
I don't normally post links to external sites, but if you would like to take a look and see the problem for yourself, you can check it out here.
Is there a simple fix for this that doesn't require me to set the a:visited color for each a tag that I have?
Looks like this was only happening to borders of divs inside of <a> tags on mobile. In order to fix this I had to not only set color: rgba(0, 0, 0, 0.0); for a:visited, but I had to select the specific div that had the border.
a:visited .productsalesbadge {
color: rgba(0, 0, 0, 0.0);
}
This completely removed the purple visited border I was seeing on mobile.
I need a quick solution to getting some decent layout working within the tabnav widget display area. I'm already using blueprint css for other aspects of the layout but I don't have enough CSS chops to figure out how to get blueprint containers to display within the tabnav's content area.
The tabnav's content area is <div class="main_tabnav_content" id="main_tabnav_content">
and this is the related css:
.main_tabnav {
color: #000;
border-bottom: 1px solid #ccc;
margin: 13px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
.main_tabnav ul {
margin: 0px;
padding: 0px;
}
.main_tabnav li {
display: inline;
overflow: hidden;
list-style-type: none; }
.main_tabnav li span.disabled {
color: #888888;
background: #FAFAFA;
border: 2px solid #DDDDDD;
border-bottom: none;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none;}
.main_tabnav a, main_tabnav a.active {
color: #000000;
background: #EEEEEE;
font-weight: bold;
border: 1px solid #ccc;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none; }
.main_tabnav a.active {
background: #FFFFFF;
border-bottom: 3px solid #FFFFFF; }
.main_tabnav a:hover {
color: #FFFFFF;
background: #CCCCCC; }
.main_tabnav a:visited {
color: #000000; }
.main_tabnav a.active:hover {
background: #FFFFFF;
color: #000000; }
.main_tabnav_content {
background: #FFFFFF;
padding: 20px;
border:1px solid #ccc;
border-top: none;
z-index: 2;
}
I'd like to be able to put some columns inside the main_tabnav_content area like this
<div class="span-5 colborder">
stuff
</div>
<div class="span-5 colborder">
stuff
</div>
<div class="span-5 colborder">
stuff
</div>
At the moment the columns are displayed but the main_tabnav_content box doesn't expand around them. Any suggestions for how to get the blueprint layout nested inside the main_tabnav_content area?
From Blueprint: screen.css:
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;}
.last, div.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
and also:
div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
I think if you add this <div class="clearfix"></div> before the end of the main_tabnav_content div it should fix the float problem.
Do you have the css for the span-5 & colborder classes? It sounds like it might be a float problem. Basically what's happening is when you add the columns to the main_tabnav_content div, the div doesn't expand, right?