Responsively hiding prefix icons in forms is buggy

[sushruth]

Applying any of the .hide-* classes to .prefix in an input field are resulting in buggy UI. Properties margin-left and width:calc(100% - 3rem) of the inputs and/or labels leave empty space in the place of icon.

[acburst]

Can you post a simple codepen to demonstrate the issue? it would help us identify the problems more quickly.

[sushruth]

@acburst This should help explain the problem: http://codepen.io/sushruth/pen/NqMVXE . Try resizing the window.

[DanielRuf]

@media only screen and (max-width: 992px){
  .input-field .prefix.hide-on-med-and-down ~ label,
  .input-field .prefix.hide-on-med-and-down ~ input {
    margin-left:0;
  }
  .input-field .prefix.hide-on-med-and-down ~ input{
    width: 100%;
  }
}

[tomscholz]

Closed due inactivity. Feel free to reopen it, if it's still necessary.