I've created a text field with a little cogwheel, that offers options in a popup menu about how to treat the search string. For some parts, it uses a flexible box layout.
In Firefox, I get the expected result:
.
In Webkit browsers (Safari and Vivaldi), I get this result:
As you can see, the cogwheel doesn't stay in line. This is my main concern. I'm not too worried about the menu text not stretching as that can easily be solved with giving any of its containers a width.
I currently don't have Chrome, but I suspect it might render it in a similar fashion as the other Webkit browsers.
Here is the css that I think is relevant to my problem.
.flex-search {
position: relative;
display: -webkit-flex; // <--
display: flex; // <--
-webkit-align-items: stretch; // <--
align-items: stretch; // <--
width: 100%;
border: 1px solid #222;
border-radius: .4em;
background-color: #fff;
}
.flex-search > :first-child {
-webkit-flex: 1; // <--
flex: 1; // <--
}
.flex-search > :last-child {
width: 2em; // <--
border-left: 1px solid #ccc;
cursor: pointer;
}
And here's a full code snippet of the search field:
$( '.flex-search input[type="radio"]' ).click( function() {
$( this ).closest( 'span' )
.css( 'display', 'none' )
.delay( 500 )
.queue( function ( next ) {
$( this ).removeAttr( 'style' );
next();
} );
$( this ).closest( 'fieldset' )
.find( 'input[type="text"]' )
.attr( 'placeholder', $( this ).closest( 'label' ).text() )
.focus();
} );* {
margin: 0;
padding: 0;
border: medium none;
border-spacing: 0;
outline: none;
outline: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
text-decoration: none;
text-indent: 0;
list-style: none outside none;
background: none repeat scroll 0 0 transparent;
}
*::-moz-focus-inner {
border: 0;
padding: 0;
}
html {
color: #222;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-align: left;
height: 100%;
}
body {
font-size: 1.4rem;
line-height: 1.5em;
min-height: 100%;
background-color: #fff;
}
div {
margin: 150px auto 0;
width: 300px;
}
::-webkit-input-placeholder {
color: #666;
font-size: 85%;
}
:-moz-placeholder {
color: #666;
font-size: 85%;
}
::-moz-placeholder {
color: #666;
font-size: 85%;
}
:-ms-input-placeholder {
color: #666;
font-size: 85%;
}
:focus::-webkit-input-placeholder {
color: #ccc;
}
:focus:-moz-placeholder {
color: #ccc;
}
:focus::-moz-placeholder {
color: #ccc;
}
:focus:-ms-input-placeholder {
color: #ccc;
}
.flex-search {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
width: 100%;
border: 1px solid #222;
border-radius: .4em;
background-color: #fff;
}
.flex-search > :first-child {
-webkit-flex: 1;
flex: 1;
}
.flex-search > :last-child {
width: 2em;
border-left: 1px solid #ccc;
cursor: pointer;
}
.flex-search > :last-child:after {
content: '\00a0';
display: block;
width: 100%;
height: 100%;
background: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAEG0lEQVQ4EQEQBO/7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQAAAADAAAAG8AAAAAAAAADAAAAM8AAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAAAAAAAAAAAAAACIAAAAEwAAAAYAAAAHAAAALwAAACQAAADRAAAA2QAAACkAAABdAAAAvAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAIEAAADHAAAAAAAAAAAAAAAAAAAAAAAAAMcAAACBAAAAFAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwAAAD4AAAAsAAAAG4AAAAAAAAAAAAAAG4AAACwAAAA+AAAAOwAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAiAAAAM8AAAAGAAAAVAAAABcAAAAAAAAA6QAAAKwAAAD6AAAAMQAAAHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFcAAAD4AAAAgQAAAIEAAAD4AAAAVwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhwAAAOwAAAASAAAAEgAAAOwAAACIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA6eSOOoDWnnAAAAABJRU5ErkJggg==' ) no-repeat center center;
opacity: 0.5;
}
.flex-search > :last-child:hover:after {
opacity: 1;
}
.flex-search > :last-child > :first-child {
position: absolute;
right: -1px;
bottom: 0;
display: none;
padding: 0 .25em 2.1em 0;
color: #fff;
}
.flex-search > :last-child:hover > :first-child {
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flex-search label {
display: block;
cursor: pointer;
background-color: #ccc;
}
.flex-search label > span {
position: relative;
display: block;
font-size: 85%;
text-align: right;
padding: .2em .8em .2em 30%;
}
.flex-search label:hover > span,
.flex-search input[type="radio"]:checked ~ span {
color: #999;
background-color: #eee;
}
.flex-search input[type="radio"]:checked ~ span:before {
position: absolute;
left: .7em;
content: '✔';
}
.flex-search input[type="radio"] {
display: none;
}
.flex-search input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: .2em .8em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<fieldset class="flex-search">
<span>
<input type="text" name="id" placeholder="contains">
</span>
<span>
<span>
<label><input type="radio" name="t-id" value="c" checked="checked"><span>contains</span></label>
<label><input type="radio" name="t-id" value="s"><span>starts with</span></label>
<label><input type="radio" name="t-id" value="e"><span>ends with</span></label>
<label><input type="radio" name="t-id" value="i"><span>equals</span></label>
</span>
</span>
</fieldset>
</div>Do you have any idea why I am not getting the expected result in Webkit browsers and how I can get it to work in them?
I suspect my code might actually be more complex than it needs to be. If you have suggestions on how to simplify, that is greatly appreciated as well of course, but I'm mainly focused on how to make the current code work in Webkit browsers.
