version 0.1.13 doesn't underline form fields about mui HOT 15 CLOSED

Can you see the underlines on the documentation site?
https://www.muicss.com/docs/v1/css-js/forms

I'm not seeing the problem myself so if you can include screenshots and browser information that would be very helpful.

from mui.

Drat. Yes, I can see them - in all my browsers. Must be me :)
I've been mucking with CSS all day.

from mui.

Ok, let me know when you figure out the problem. I'm going to keep the issue open in case there's something we need to do on our end.

from mui.

It doesn't happen in development, only when I package for production; so I
think my CSS of getting mangled during minification.

On another note, however, I've noticed that form labels don't wrap properly
on small screens. See the attached screenshot.

• William Summers
  On Jun 25, 2015 4:21 PM, "Andres Morey" [email protected] wrote:

Ok, let me know when you figure out the problem. I'm going to keep the
issue open in case there's something we need to do on our end.

—
Reply to this email directly or view it on GitHub
#26 (comment).

from mui.

Are you using cssmin? If so, setting "advanced" to false should fix the problem:
#21

Can you re-send the screenshot? I don't see it in the comment.

from mui.

Thanks for the screenshot!

This problem is a bit tricky. Since <label>'s are absolutely positioned I can't think of a straightforward way to push down the input box with CSS. Here are some options:

1. We can solve the problem for non-floating labels by removing position:absolute but this will only work if the <label> is placed before the <input> element:

<div class="mui-form-group">
  <label>My very long long long label</label>
  <input type="text" class="mui-form-control">
</div>

This will work but it's not a satisfying solution since it makes switching between floating/non-floating labels more cumbersome.

2. We can use text-overflow: ellipses to hide the overflow

3. We can use 1) for <labels> placed above <inputs> and 2) for <labels> placed below <inputs>

Any thoughts??

from mui.

I don't like the ellipsis solution. What about applying a class to the label? Mui-form-label and mui-floating-label, where mui-form-labels are not absolutely positioned?

from mui.

Falling that, different behaviors for label above and below would probably be ok

from mui.

The <label> element has to be placed before <input> element in order for the element to be in the flow of the document so using a classes-only solution won't work.

Ok, different behavior for labels above and below sounds good. Let's keep this issue open until it's implemented.

from mui.

@MetaTribal Placing the <label> element before the <input> element isn't a great solution because it breaks the css-only method MUI uses to animate/color labels on focus. Here's a pull request with another solution that uses a .mui-form-group-wrap-label modifier: #30.

Let me know what you think!

from mui.

Can we shorten it to mui-wrap-label ? Otherwise, looks ok
On Jun 27, 2015 10:31 AM, "Andres Morey" [email protected] wrote:

@MetaTribal https://github.com/metatribal Placing the element
before the element isn't a great solution because it breaks the
css-only method MUI uses to animate/color labels on focus. Here's another
solution that uses a .mui-form-group-wrap-label modifier:
#30 #30

Let me know what you think!

—
Reply to this email directly or view it on GitHub
#26 (comment).

from mui.

What do you think about this:

<div class="mui-form-group" data-mui-wrap-label="true">
  <label>My very loooooong label</label>
  <input type="text" class="mui-form-control">
</div>

I've been considering moving modifier classes to data-attributes.

from mui.

I'm not sure about other cases, but in this one I'd be OK with it.
On Jun 27, 2015 1:10 PM, "Andres Morey" [email protected] wrote:

What do you think about this:

My very loooooong label

I've been considering moving modifier classes to data-attributes.

—
Reply to this email directly or view it on GitHub
#26 (comment).

from mui.

Ok! It's live in v0.1.14!
https://www.muicss.com

from mui.

Just updated. Works a charm!
Thanks

On Jun 27, 2015, at 2:20 PM, Andres Morey [email protected] wrote:

Ok! It's live in v0.1.14!
https://www.muicss.com https://www.muicss.com/
—
Reply to this email directly or view it on GitHub #26 (comment).

from mui.