I'm currently writing some stylesheets for mobile browsers and have come across a strange issue in the Android browser. When changing the font-size CSS attribute of a text box the box gets bigger to accomodate the larger text. Doing this on a select box however does not change the size of the select box, but the text still gets larger (actually overlapping the top and bottom of the rendered form element).
Can anyone tell me if it's possible to increase the height of select boxes in the Android browser. Or if not point me in the direction of a list of CSS attributes that can be applied to them.
Thanks.
Another option you can use (tested on galaxy S running android version 2.1-update1):
select {
-webkit-appearance: listbox;
}
select, input {
width: 100%;
height: 40px;
line-height:40px;
border: 1px solid #999;
border-radius: 6px;
margin-bottom:10px;
}
This way the inputs and selects all look the same, clicking the select will open the options menu as usual.
This seems to be a browser bug. You can also reproduce it when you set your browser's text size to 'huge' (in settings). I added a new issue and suggest a workaround with a custom background image for now:
<select style="background: url('big-select-bg.png')"/>
try this one:
select{
-webkit-appearance: menulist-text;
}
Set the opacity of the select control to 0
Then place a span contorl styled to look like a textbox behind the select control so that the select control are sits directly on top of the span.
The user won't see the select control but when the user attemps to enter text into the span the dropdown options for the select control will appear.
After the user makes their selection use javascript to update the innerHTML of the span with the value of the select control.
Make sure the dimensions of the span and the select control line up well.
(Do not use an actual texbox control)
mealaroni.com
For me "-webkit-appearance: listbox;" solved the issue not completely.
I had to add a padding attribute additionally:
select {
-webkit-appearance: listbox;
width: 100%;
height: 35px;
line-height: 35px;
border: 1px solid #bbb;
border-radius: 4px;
padding: 0 0 1px 8px;
}
Related
I'm working in an Angular 9 project, using Material (SCSS stylesheets).
I have a Material select, there's many options and so you're able to scroll through them. The problem is, unless you knew there were other options, or happened to try a scroll, you wouldn't know the list extends. I want to resolve this by having the scroll bar always show.
How can I make the scroll always be visible in the material select element. I'm guessing I'll use some sort of style. I'm also using scss stylesheets.
Here's what shows now:
I want the scroll to always show, not just when you literally scroll down the element:
I also make a quick https://stackblitz.com/edit/always-show-scroll-material-select
The scroll is not showing because you are probably using the trackpad or a magic mouse. Using an external mouse will show the scrollbar just setting "overflow" to "auto" or "scroll".
If you want to show also the scrollbar using the trackpad or the magic mouse, you can still do it using the -webkit-scrollbar pseudo-element
In this post is also explained:
Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
In your particular case you could achieve this using these css lines:
::ng-deep .mat-select-panel::-webkit-scrollbar {
-webkit-appearance: none;
}
::ng-deep .mat-select-panel::-webkit-scrollbar:vertical {
width: 11px;
}
::ng-deep .mat-select-panel::-webkit-scrollbar:horizontal {
height: 11px;
}
::ng-deep .mat-select-panel::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
Using jade template with doctype html at the top.
Styling for input and select:
input, select {
...
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
input's border radius is shown correctly, but the select's border shows 5px, which is the user agent's value, even though investigating in the calculated tab shows 3px, from the style above, should be applied.
How is it possible that my style seems to have been applied, but the calculated value and the look of the select, do not match my style?
Please note that I am not trying to get rid of or replace the drop down arrow, I just want my input and select to have the same border-radius, but while the input looks good, this weird issue is happening with the select
Dev tools clearly shows that the user agent's 5px for border is being crossed off, and yet, this is the value being shown in the calculated value and visibly being applied to the element.
Any hints would be appreciated.
This is a little dated but I figured it should be answered nevertheless.
You have to add appearance: none to apply styling to those elements.
The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.
For more details see https://css-tricks.com/almanac/properties/a/appearance/
input, select {
width: 150px;
border-radius: 50%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
<select>
<option>foo</option>
<option>bar</option>
</select>
<br>
<br>
<input>
I don't understand why the search field on our website follows a margin-right CSS command BUT NOT a margin-left CSS command. How come?
.header-top .search-field {
border-top: none;
border-bottom: none;
height: 34px;
border-color: #EDEDED;
outline: none;
}
The search field shows up only after clicking on the search icon to the top left of the page. This icon also previously wouldn't move to the left through a margin-left CSS command but I was finally able to move it through the right CSS command. I wonder what's the difference between the two.
Will appreciate feedback.
Try to do below css :
.header-top .search-form{
position : initial
}
WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.
Example (jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?
The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
WebKit (Chrome) Screenshot
For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.
Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar
Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.
Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
You need jQuery + Underscore and
$(window).scroll
to check if the user already scrolled by himself,
_.delay()
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
$('#prompt_div').fadeIn('slow')
to fade in your prompt and of course
$('#prompt_div').fadeOut('slow')
to fade out when the user scrolled after he saw the prompt
In addition, you can bind Google Analytics events to track user's scrolling behavior.
WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.
Example (jsfiddle)
HTML
<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
CSS
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?
The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements [blog]. You can disable the default appearance and behaviour by setting -webkit-appearance [docs] to none.
Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:
Example (jsfiddle)
CSS
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
WebKit (Chrome) Screenshot
For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.
Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar
Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.
Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
You need jQuery + Underscore and
$(window).scroll
to check if the user already scrolled by himself,
_.delay()
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
$('#prompt_div').fadeIn('slow')
to fade in your prompt and of course
$('#prompt_div').fadeOut('slow')
to fade out when the user scrolled after he saw the prompt
In addition, you can bind Google Analytics events to track user's scrolling behavior.