Am developing windows phone app with backbone.js using phonegap. When i try to use a custom select box like this image. it always shows the default select box like this
Why it is not displaying the custom select box?
My Code
HTML:
<select class="custom-select custom-select-smaller no-border" id="lang-select">
CSS:
.custom-select {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
border: 2px solid #dfdfdf;
color: #6b6b6b;
height: 38px;
font-size: 11px;
line-height: 38px;
padding: 0 6px;
position: relative;
width: 100% !important;
display: block !important;
}
.custom-select.custom-select-smaller {
height: 34px;
line-height: 34px;
}
.custom-select.custom-select-smaller:after {
top: 14px;
}
#lang-select{
z-index:~1000;
}
Styling a element is always tricky and not reliable.
You may wanna add the following styles to get it to work in webkit & firefox
-webkit-appearance: initial;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
But it's not possible (so far as I know) to make it work in IE. If you wanna get consistent results, try to use ul+li with hidden tags.
or just use a plugin like http://adam.co/lab/jquery/customselect/
Related
I'm encountering a problem where radio buttons work inconsistently.
The buttons only respond on some touch devices (iPhone & iPad) when the right side of the outer element is touched.
Desktop works fine.
If the user touches the radio button directly the button doesn't respond.
The weird thing is this doesn't happen on all touch devices. Some will work fine while others won't.
I tested on iPhone X and it works fine but iPhone 11 and iPad don't.
It works on mobile Chrome but not Safari and Firefox.
I've included the js, HTML, and css of one radio button below.
Thanks for you any help.
Js
document.querySelector("#s89fdf874ee_services > li:nth-child(1) > div > label")
HTML
<label><div class="icheckbox_square-blue checked"><input type="checkbox" id="s89fdf874ee_services_0" name="s89fdf874ee[services][]" value="2" checked="checked" style="position: absolute; visibility: hidden;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div><span class="control-label__text">
Buyback</span></label>
CSS
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
--zd_bold: LatoBold,var(--zd_fallback_font);
--zd_heavy: LatoHeavy,var(--zd_fallback_font);
--zd_fallback_font: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--zd_regular: LatoRegular,var(--zd_fallback_font);
--zd_semibold: LatoSemibold,var(--zd_fallback_font);
font-size: 14px;
line-height: 1.42857143;
color: #333;
font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
list-style: none;
box-sizing: border-box;
display: inline-block;
max-width: 100%;
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
cursor: pointer;
font-weight: 700;
margin-left: -20px;
I know the title is familiar, but the answers weren't !
The answers here :
Button onclick event not working in iOS unless you go away from app and back, then it works
OnClick not Working on Ios11
Safari on iOS 9 does not trigger click event on hidden input file
onclick event doesn't work on iphone
Click events not firing on iOS
How do I use jQuery for click event in iPhone web application
jQuery click events not working in iOS
JavaScript OnClick not working on iOS
Make onclick work on iphone
https://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html
https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
didn't work for me, so before marking this question as duplicate, check my code :
THIS IS HTML :
<script>
function showalert() {
alert("I am an alert");
}
</script>
<div id="replace1" >
<br><br><br>
<a class="btnxyspace" onClick="alert("sometext");"><input type="button" value="Hi"></a>
<!-- <button value="HI" onclick = "showalert();">-->
<br><br><br>
</div>
THIS IS THE CSS :
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,300,300i,4 00,400i,700,700i,900,900i');
* {
font-family: Montserrat;
font-size: 14px;
}
.U3Gxm-butn {
border: 1px solid #E77817;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 5px;
color: #E77817;
cursor: pointer;
background:white;
margin:0 auto 10px;
width: 100%; /* Set a width if needed */
display: block; /* Make the buttons appear below each */
float: left;
}
.U3Gxm-butn:focus, .U3Gxm-butn:hover {
background: #E77817;
outline: 0;
color: #fff;
}
.actn-disabled{
cursor: not-allowed !important;
background: #dddddd !important;
color: black !important;
pointer-events: none;
}
.actn-selected{
background: #fba250 !important;
color: black !important;
}
#loading
{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image
{
position: absolute;
top:30%;
left: 40%;
z-index: 100;
}
td {
word-wrap: break-word;
}
/* Below class use for op position */
.xspace{
position: relative;
top: 20px;
}
.xspace:first-letter{
position: relative;
top: 20px;
text-transform: capitalize;
}
.xspacedown:first-letter{
padding-bottom: 0%;
text-transform: capitalize;
}
.xspaceop{
position: relative;
top: 50px;
style:overflow-x:auto;
}
.xyspace:first-letter {
text-transform: capitalize;
}
#replace1 > .xyspace{
display:inline-block;
}
#replace1 > .xyspace:first-letter{
text-transform: capitalize;
}
.ntfnbkpjob1{
cursor:pointer;
}
I have created separate HTML and CSS files in my xCode project and this is how i am loading my html file in swift :
let url = Bundle.main.url(forResource: "webview", withExtension: "html")
webView.loadFileURL(url!, allowingReadAccessTo: url!)
Have tried everything possible, changed CSS to cursor:pointer, did everything mentioned in these solutions, nothing seems to work.
These solutions might be relating to their problem.
Every problem has different answer !
Can anyone suggest anything that works in this scenario ?
<a class="btnxyspace" onClick="alert("sometext");"><input type="button" value="Hi"></a>
Shouldn't your on click look like this onClick="alert('sometext')" ?
I'm guessing you are talking about this one as button is commented out.
Currently, my select looks like this1,
however, I would like to have it look like this2, the default iOS select dropdown.
The problem I think is, that I cannot edit all of the code, some is locked (I'm using WordPress).
Here's my code:
-webkit-appearance: menulist !important;
border: 0;
and here's the default code:
height: 40px;
font-size: 14px;
line-height: normal;
color: #000;
margin: 0;
background: #fff;
width: 100%;
padding: 0 10px;
text-align: left;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
If I delete this code from the DOM, the select looks the way I want it to, but how can I achieve this look given the circumstances with CSS or Javascript?
I'm currently having an issue with my website and a chat service that we are trying to implement. I've narrowed it down to a CSS issue associated with the border-box property.
The problem only exists in Internet Explorer 11 as well. The box displays correctly in Mozilla, Chrome and even older versions of IE. Once the user clicks the "Need Help, Live Chat" button on the left side of the website, they are unable to see their entry text. I know that the data is being entered and works, but for some reason the field does not display what the user types. I figured it was a sizing issue, which was proven correct by displaying the page with out CSS in IE 11, I can see the entry in the box, but once the CSS is enable, it vanishes again from the field. I've tried many edits to get it to work without success, but ended up switching to the padding-box just to see if it works. That seems to be working in both browsers, but in IE 11 the text hugs the bottom border and looks bad.
Is there a way I can either fix the border-box to get the text to display in the correct area, or is there a way that I can float the text upwards while using the padding-box to make it look better?
Here is the page that the chat code is enabled on: https://www.sundancevacations.com/company/privacy-statement/
This is the code I am currently working with.
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
display: block;
}
audio,canvas,video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],template {
display: none;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
a {
background: transparent;
}
a:focus {
outline: thin dotted;
}
a:active,a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: .67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,strong {
font-weight: 700;
}
dfn {
font-style: italic;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code,kbd,pre,samp {
font-family: monospace,serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub,sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em;
}
legend {
border: 0;
padding: 0;
}
button,input,select,textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,input {
line-height: normal;
}
button,select {
text-transform: none;
}
button,html input[type=button],input[type=reset],input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],html input[disabled] {
cursor: default;
}
input[type=checkbox],input[type=radio] {
box-sizing: border-box;
padding: 10px;
width: 1%;
}
input[type=search] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
And currently my box sizing looks like this:
*,input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: padding-box;
}
Any help would be greatly appreciated.
So I was able to figure out the issue here.
Turns out that border-box setting was being over-ridden by an entry buried in another section of the CSS. It was added 10px of padding around everything, which was causing the text to be displayed out of the area, thus creating the illusion that nothing was being typed.
I turned it down to just 5px and the border-box setting is now working properly. The secondary file of CSS (kept in a separate place) is what did me in. The padding was tagged with an !important tag causing it to override the settings of the chat box.
Thanks for the help everyone!
Add this to the top of your stylesheet:
html,
body {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
Remove this:
*, input[type="search"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: padding-box; }
If you have anymore box-sizing rule anywhere else, make sure you know what you are doing. I suggest that if there any that were part of the template you do not touch. Any extra box-sizing properties that you added yourself you should remove.
html,
body {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: black;
}
<input name="email" id="email" style='background: #fff url("https://storage.googleapis.com/code.snapengage.com/wbg/blank.gif"); list-style: none; margin: 0px; padding: 0px; border: currentColor; border-image: none; left: 35px; top: 85px; width: 310px; height: 20px; text-align: left; color: black; line-height: normal; text-indent: 0px; clear: none; font-family: "lucida grande","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; float: none; display: block; position: absolute; z-index: 2; min-height: 20px; max-height: 20px; min-width: 310px; max-width: 310px; text-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;'
type="text" size="10" value="">
I am trying to build a custom input text list. I have an image I would like to use as arrow, so that I can click and show the list of values.
I am also using AngularJS.
The following code does not work as expected. My issue is: I see a black arrow on the left of the yellow arrow when passing over or clicking (otherwise no arrow)
Here's a link to try it (no yellow arrow is shown, but there is some white space on the right of the undesired black arrow): http://jsfiddle.net/wbo3pt9u/
Here's the code.
<input type="text" list="typeL" ng-model="tipo" class="list" placeholder="Type">
<datalist id="typeL">
<option ng-repeat="objectType in objectTypes"
value="{{objectType.typeWorkOfArt}}" } />
</datalist>
</input>
CSS:
.list {
background: url('../images/arrow.png') no-repeat top right;
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding:0 30px 0 10px !important;
color: #58585A;
overflow: hidden;
margin: 10px;
}
.input {
border-radius: 20px;
width: 160px;
height: 33px;
-webkit-appearance: none;
border: 2px solid #c1c4c6;
line-height: 29px;
cursor: pointer;
font-weight: normal !important;
font-style: italic;
font-size: 1.250em;
padding: 0 1em;
color: #58585A;
margin: 10px;
}
I also tried to use a , which worked correctly: no black arrow and single click. Now that I switched to this element, it does not work. How can I fix it?
Solved by introducing this CSS lines:
input::-webkit-calendar-picker-indicator {
display: none;
}