We Keep Coding

React/HTML/CSS button text not centering on mobile; works fine on all desktop browsers

I'm totally perplexed by this - the app is a simple React project, but the button is simple HTML with CSS styling. The text inside the button element - which should be centered - works fine on all desktop browsers, but everything is right-aligned on iPhone. The button includes a FontAwesome icon and some text, which are on different lines, but when I remove either it doesn't make a difference, the problem persists. I don't have the ability to inspect the code on my phone, and all desktop iPhone emulators online don't show the problem. Does anyone have any idea what might be causing this?
JavaScript/JSX (state contains FontAwesome icon and text):
<div className='textcontainer'>
<button disabled={this.state.disabled}
onClick={e => this.handleOpen(this.props.id)}
className='opencapsule'
id={this.props.title + '_button'}>
{this.state.clock}
<span className='opentext'> {this.state.status}</span>
</button>
</div>
Relevant CSS:
.textcontainer {
padding: 5px;
display: flex;
}
.opencapsule {
margin:0 auto;
color: white;
width: 80px;
height: 80px;
font-size: 2.5rem;
line-height: .8rem;
border-radius: 3px;
border: 1px solid white;
background-color: gray;
cursor: pointer;
outline: none;
}
.opentext {
font-size: .8rem;
line-height: 1rem;
}
Live version of current app: https://timecapsule.now.sh/capsules

This should fix it:
On your button element, .opencapsule, add display: flex; and justify-content: center;, like so:
.opencapsule {
margin:0 auto;
color: white;
width: 80px;
height: 80px;
font-size: 2.5rem;
line-height: .8rem;
border-radius: 3px;
border: 1px solid white;
background-color: gray;
cursor: pointer;
outline: none;
display: flex; //add this
justify-content: center; //add this
}
I'm not completely sure why the icons are not being centered on mobile, it has something to do with the behavior of the <svg>. I tried many other ways of centering it on iphone, such as, text-align: center;, and margin: auto; and others, but the only way that worked for me on mobile was to center the icon by making the button display: flex and justify-content: center.

Try adding the webkit center to .opencapsule
text-align: -webkit-center;

Making css numbers to look pretty

I have the code which is in this fiddle
.numberCircle {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
display: table;
padding: 10px;
margin-top: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<div class="numberCircle">368585760</div>
Thanks to the one who had this fiddle, I updated it with my changes:, now without adding additional html elements, is it possible to design every single number inside the box to look like this
http://prntscr.com/gi26iz
I was trying to use the css3 first child, 2nd child etc etc but I am not sure what to do.

If you can't change the markup, you can try this with jquery - replacing the contents of the div with each digit wrapped into a span.
See a demo to get you started:
var html = $('.numberCircle')
.text()
.split('').map(function(e){
return "<span>" + e + "</span>";
}).join('');
$('.numberCircle').html(html);
.numberCircle span {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
/*display: table;*/
display: inline-block; /* CHANGED */
padding: 10px;
margin: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numberCircle">368585760</div>

I think the only way to do is use javascript to add styling to each elements. There is no css like :nth-letter

Progress bar in input type range

Is it possible to actually make a progress bar from input range? Someone is typing a number and bar is moving to the right with changed background color on left side of thumb, depends how big the number is. Here is live DEMO http://jsfiddle.net/xnehel/ur26k9cx/2/ `
input[type=number]{
font-size: 20px;
padding: 5px;
}
input[type=range]{
margin-left: -200px;
position: absolute;
top:7px;
}
input[type=range]{
-webkit-appearance: none;
width: 170px;
}
input[type=range]::-webkit-slider-runnable-track {
height: 35px;
background: #ddd;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 35px;
border: 0;
width: 16px;
background: goldenrod;
}
input[type=range]:focus
{
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
`
Aight found perfect solution for my problem:
LIVE DEMO

Currently, there is no pure CSS and input[type="range"] cross browser solution. If you're looking for something like IE's implementation of ::-ms-fill-lower and ::-ms-fill-upper which no other browser has implemented at this time.
You might be able to fake it with a bit of javascript and additional elements.

Removing Chrome style for input text (list)

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;
}

Cannot use custom select box using backbone js

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/