Skip to content

Commit 2b2c335

Browse files
kdinevkdinev
authored
Merge pull request #4770 from IgniteUI/fix-#4752-7.3.x
fix(input-group): some japanese symbols don't fit the input box
2 parents e0ef99c + 3c89a7c commit 2b2c335

File tree

3 files changed

+61
-37
lines changed

3 files changed

+61
-37
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

+8-24
Original file line numberDiff line numberDiff line change
@@ -505,26 +505,24 @@
505505
position: absolute;
506506
width: 100%;
507507
transform: translateY(50%); /* 8px, base is 16px */
508-
line-height: rem(16px, map-get($base-scale-size, 'comfortable')) !important;
509-
height: rem(18px, map-get($base-scale-size, 'comfortable'));
508+
line-height: 1 !important;
509+
height: rem(18px);
510510
backface-visibility: hidden;
511511
will-change: transform;
512512
transform-origin: top left;
513-
transition: transform $transition-timing, color $transition-timing;
513+
transition: transform $transition-timing, color $transition-timing, margin $transition-timing;
514514

515515
[dir='rtl'] & {
516516
transform-origin: top right;
517517
}
518518
}
519519

520520
%form-group-label--cosy {
521-
line-height: rem(16px, map-get($base-scale-size, 'cosy')) !important;
522-
height: rem(18px, map-get($base-scale-size, 'cosy'));
521+
margin-top: rem(-2px);
523522
}
524523

525524
%form-group-label--compact {
526-
line-height: rem(16px, map-get($base-scale-size, 'compact')) !important;
527-
height: rem(18px, map-get($base-scale-size, 'compact'));
525+
margin-top: rem(-4px);
528526
}
529527

530528
%form-group-label--box {
@@ -534,6 +532,7 @@
534532
%form-group-label--float {
535533
overflow: visible;
536534
transform: translateY(-50%) scale(.75);
535+
margin-top: auto;
537536
}
538537

539538
%form-group-label--fixed {
@@ -566,8 +565,6 @@
566565
display: block;
567566
border: none;
568567
height: rem(32px, map-get($base-scale-size, 'comfortable'));
569-
padding: 0 0 rem(8px, map-get($base-scale-size, 'comfortable'));
570-
border-top: rem(8px, map-get($base-scale-size, 'comfortable')) solid rgba(0, 0, 0, 0);
571568
line-height: 0 !important; /* resets typography styles */
572569
width: 100%;
573570
min-width: 0;
@@ -576,6 +573,8 @@
576573
color: --var($theme, 'filled-text-color');
577574
outline-style: none;
578575
box-shadow: none;
576+
border-top: rem(3px) solid transparent;
577+
padding-bottom: rem(3px);
579578

580579
&::-webkit-input-placeholder {
581580
line-height: normal;
@@ -589,15 +588,11 @@
589588

590589
%form-group-input--cosy {
591590
height: rem(32px, map-get($base-scale-size, 'cosy'));
592-
padding: 0 0 rem(8px, map-get($base-scale-size, 'cosy'));
593-
border-top: rem(8px, map-get($base-scale-size, 'cosy')) solid rgba(0, 0, 0, 0);
594591
}
595592

596593
%form-group-input--compact {
597594
font-size: rem(map-get($base-scale-size, 'compact') - 1px, map-get($base-scale-size, 'compact'));
598595
height: rem(32px, map-get($base-scale-size, 'compact'));
599-
padding: 0 0 rem(8px, map-get($base-scale-size, 'compact'));
600-
border-top: rem(8px, map-get($base-scale-size, 'compact')) solid rgba(0, 0, 0, 0);
601596
}
602597

603598
%chrome-autofill-fix {
@@ -892,17 +887,6 @@
892887
$input-text-props: igx-type-scale-category($type-scale, $input-text);
893888

894889
@include igx-scope('.igx-typography') {
895-
%form-group-label {
896-
@include igx-type-style($type-scale, $input-text) {
897-
// This is embarrassing but there's no other
898-
// way to extract the font-size the user sets
899-
// in case they use custom typography :(
900-
// We need the padding so that the text doesn't get
901-
// cut off.
902-
padding-bottom: map-get($input-text-props, 'font-size');
903-
}
904-
}
905-
906890
%form-group-input {
907891
@include igx-type-style($type-scale, $input-text) {
908892
margin: 0;

‎projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts

+18-12
Original file line numberDiff line numberDiff line change
@@ -37,25 +37,25 @@ export class SelectPositioningStrategy extends ConnectedPositioningStrategy impl
3737
private deltaX: number;
3838
private itemTextPadding: number;
3939
private itemTextIndent: number;
40-
private inputBorderTop: number;
4140
private listContainerBoundRect: DOMRect;
41+
private itemTextToInputTextDiff: number;
4242

4343
private positionAndScrollBottom(contentElement: HTMLElement, outBoundsAmount: number) {
4444
contentElement.style.top = `${this.viewPort.bottom - this.listContainerBoundRect.height - this.defaultWindowToListOffset}px`;
45-
contentElement.firstElementChild.scrollTop -= outBoundsAmount - (this.inputBorderTop - this.defaultWindowToListOffset);
45+
contentElement.firstElementChild.scrollTop -= outBoundsAmount - (this.defaultWindowToListOffset);
4646
this.deltaY = this.viewPort.bottom - this.listContainerBoundRect.height -
4747
this.defaultWindowToListOffset - (this.select.input.nativeElement.getBoundingClientRect() as DOMRect).top;
4848
}
4949

5050
private positionNoScroll(contentElement: HTMLElement, CURRENT_POSITION_Y: number) {
51-
contentElement.style.top = `${CURRENT_POSITION_Y - this.inputBorderTop}px`;
52-
this.deltaY = CURRENT_POSITION_Y - this.inputBorderTop -
53-
(this.select.input.nativeElement.getBoundingClientRect() as DOMRect).top;
51+
contentElement.style.top = `${CURRENT_POSITION_Y - this.itemTextToInputTextDiff }px`;
52+
this.deltaY = CURRENT_POSITION_Y -
53+
(this.select.input.nativeElement.getBoundingClientRect() as DOMRect).top - this.itemTextToInputTextDiff;
5454
}
5555

5656
private positionAndScrollTop(contentElement: HTMLElement, outBoundsAmount: number) {
5757
contentElement.style.top = `${this.viewPort.top + this.defaultWindowToListOffset}px`;
58-
contentElement.firstElementChild.scrollTop += outBoundsAmount + this.inputBorderTop + this.defaultWindowToListOffset;
58+
contentElement.firstElementChild.scrollTop += outBoundsAmount + this.itemTextToInputTextDiff + this.defaultWindowToListOffset;
5959
this.deltaY = this.viewPort.top + this.defaultWindowToListOffset -
6060
(this.select.input.nativeElement.getBoundingClientRect() as DOMRect).top;
6161
}
@@ -140,6 +140,14 @@ export class SelectPositioningStrategy extends ConnectedPositioningStrategy impl
140140
const itemTopListOffset = itemBoundRect.top - this.listContainerBoundRect.top;
141141
const itemHeight = itemBoundRect.height;
142142

143+
const inputFontSize = window.getComputedStyle(inputElement).fontSize;
144+
const numericInputFontSize = parseInt(inputFontSize.slice(0, inputFontSize.indexOf('p')), 10) || 0;
145+
const itemFontSize = window.getComputedStyle(itemElement).fontSize;
146+
const numericItemFontSize = parseInt(itemFontSize.slice(0, itemFontSize.indexOf('p')), 10) || 0;
147+
const inputTextToInputTop = (inputHeight - numericInputFontSize) / 2;
148+
const itemTextToItemTop = (itemHeight - numericItemFontSize) / 2;
149+
this.itemTextToInputTextDiff = itemTextToItemTop - inputTextToInputTop;
150+
143151
let CURRENT_POSITION_Y = START.Y - itemTopListOffset;
144152
const CURRENT_BOTTOM_Y = CURRENT_POSITION_Y + this.listContainerBoundRect.height;
145153

@@ -155,17 +163,15 @@ export class SelectPositioningStrategy extends ConnectedPositioningStrategy impl
155163
CURRENT_POSITION_Y += START.Y;
156164
}
157165
}
158-
const inputBorderTop = window.getComputedStyle(inputElement).borderTopWidth;
159-
this.inputBorderTop = parseInt(inputBorderTop.slice(0, inputBorderTop.indexOf('p')), 10) || 0;
160166
const itemLeftPadding = window.getComputedStyle(itemElement).paddingLeft;
161167
const itemTextIndent = window.getComputedStyle(itemElement).textIndent;
162-
const numericPadding = parseInt(itemLeftPadding.slice(0, itemLeftPadding.indexOf('p')), 10) || 0;
168+
const numericLeftPadding = parseInt(itemLeftPadding.slice(0, itemLeftPadding.indexOf('p')), 10) || 0;
163169
const numericTextIndent = parseInt(itemTextIndent.slice(0, itemTextIndent.indexOf('r')), 10) || 0;
164-
this.itemTextPadding = numericPadding;
170+
this.itemTextPadding = numericLeftPadding;
165171
this.itemTextIndent = numericTextIndent;
166-
contentElement.style.left += `${START.X - numericPadding - numericTextIndent}px`;
172+
contentElement.style.left += `${START.X - numericLeftPadding - numericTextIndent}px`;
167173
contentElement.style.width = inputRect.width + 24 + 32 + 'px';
168-
this.deltaX = START.X - numericPadding - numericTextIndent;
174+
this.deltaX = START.X - numericLeftPadding - numericTextIndent;
169175
const currentScroll = this.getItemsOutOfView(contentElement, itemHeight)['currentScroll'];
170176
const remainingScroll = this.getItemsOutOfView(contentElement, itemHeight)['remainingScroll'];
171177

‎src/app/input-group/input-group-child.sample.html

+35-1
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,43 @@ <h3 class="sample-title">Line Style Input With Different Display Density</h3>
33
<!-- Basic text field -->
44
<igx-input-group>
55
<input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required />
6-
<label igxLabel for="firstName">Text Field</label>
6+
<label igxLabel for="firstName">日日日</label>
7+
<igx-prefix>
8+
<igx-icon>person</igx-icon>
9+
</igx-prefix>
710
</igx-input-group>
811

12+
<igx-input-group type="box">
13+
<input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required />
14+
<label igxLabel for="firstName">日日日</label>
15+
<igx-prefix>
16+
<igx-icon>person</igx-icon>
17+
</igx-prefix>
18+
</igx-input-group>
19+
20+
<igx-input-group type="border">
21+
<input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required />
22+
<label igxLabel for="firstName">日日日</label>
23+
<igx-prefix>
24+
<igx-icon>person</igx-icon>
25+
</igx-prefix>
26+
</igx-input-group>
27+
28+
<igx-input-group>
29+
<textarea igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required></textarea>
30+
<label igxLabel for="firstName">日日日</label>
31+
<igx-prefix>
32+
<igx-icon>person</igx-icon>
33+
</igx-prefix>
34+
</igx-input-group>
35+
36+
<igx-input-group type="border">
37+
<textarea igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required></textarea>
38+
<label igxLabel for="firstName">日日日</label>
39+
<igx-prefix>
40+
<igx-icon>person</igx-icon>
41+
</igx-prefix>
42+
</igx-input-group>
943
<!-- Basic text field w/ placeholder -->
1044
<igx-input-group>
1145
<label igxLabel>Label</label>

0 commit comments

Comments
 (0)