Bootstrap: Alert component - click area size for touch devices
Hello,
I noticed in the alerts component with the "x" you guys put 14px by 24px size.
When the recommend size by Apple鈥檚 iPhone Human Interface Guidelines is 44px by 44px for touch interfaces. I know this is not an IOS app, but people will be viewing bootstrap from a web browser on devices.
Source : https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1
I was wondering why did you not put it 44px by 44px and is this something you plan to change in the future.
Thank you
stevenbriscoeca
All 4 comments
why did you not put it 44px by 44px
believe it or not, sometimes things aren't done on purpose ;)
while i believe 44x44px may be a tad on the excessive side in terms of size, i'd agree that the actual active/touch target size could be increased a bit (particularly horizontally)
patrickhlauke
on 1 Jun 2016
What do you have in mind? Enlarge only the target area or enlarge the image?
patriciamarchand
on 3 Jun 2016
I would suggest changing the output from:
.alert-dismissible .close {
color: inherit;
position: relative;
right: -1rem;
top: -0.125rem;
}
to:
.alert-dismissible .close {
color: inherit;
position: relative;
right: -2rem;
top: -1rem;
padding: 1rem;
}
Here's a before and after screenshot (see below). The thin red dotted box represents the clickable/touchable area.
LarryAzevedo
on 19 Sep 2016
Sent a pull request with @LarryAzevedo's solution (#21112)
rwaltenberg
on 9 Nov 2016
Related issues
eddywashere
路
3Comments
athimannil
路
3Comments
devfrey
路
3Comments
kamov
路
3Comments
iklementiev
路
3Comments
Most helpful comment
I would suggest changing the output from:
.alert-dismissible .close { color: inherit; position: relative; right: -1rem; top: -0.125rem; }to:
.alert-dismissible .close { color: inherit; position: relative; right: -2rem; top: -1rem; padding: 1rem; }Here's a before and after screenshot (see below). The thin red dotted box represents the clickable/touchable area.
