Hi All,
Using Ionic Angular 8 but this would apply to the older versions too. In short I love the MD ion-input with outline and stacked label. However the stacked label is way too small for my users to read and are trying to increase the font size.
I have successfully increased the label size by changing the following property:
.label-floating.input-fill-outline.sc-ion-input-md-h
.label-text-wrapper.sc-ion-input-md {
transform: translateY(-55%) scale(1.05);
}
However the border outline is getting overlapped as the picture below.
I’m struggling to find the property to fix this. In the ionic libibrary there is a function called notched controller notch-controller.js. It talks about $form-control-label-stacked-scale being set to 0.75 and looks like this is hard-coded in the function. Is there a work around for this? (Without the needing to manually change this code?). I have provide an example stacklblitz as well. Many thanks in advance.
/**
* If the element is visible then we can set the notch width.
* The notch is only visible when the label is scaled,
* which is why we multiply the width by 0.75 as this is
* the same amount the label element is scaled by in the host CSS.
* (See $form-control-label-stacked-scale in ionic.globals.scss).
*/
notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);