last day (14 days later) » 

3:17 PM
0
Q: md-input-container and label not aligned

MosheI am trying to create a filter for price, and I am stuck on aligning these elements correctly. With this code: <div formGroupName="price.baseMSRP" fxLayout="row"> <span>Price</span> <md-input-container> <input mdInput type="number" min="{{data.price.min}}" max="{{data.price.max...

 
Can you include the css that you're using?
 
@Kellen, I am not using any custom CSS
 
The screenshot you attached has some sort of styling applied to it. Where is that CSS coming from?
 
The CSS is coming straight from angular material beta2 @Kellen
 
Gotcha. Unfortunately, I can't diagnose the issue unless I see the CSS from Angular. Would you happen to have the form in a development environment that you could share?
 
3:17 PM
@Kellen, Yeah I can do that, is there a way to privately share this info with you?
 
Um, I just started some sort of chat. You seeing this? I'm not sure if it's private though.
 
Hello!
I'll delete it as soon as you let me know you got this
 
Got it! I'll take a look within the next hour.
 
Did you record the link?
guess I can't remove it... not a big deal. No problem, I'll be here in an hour as well
 
3:35 PM
Yes, I have it pulled up in a tab. Sounds good.
 
3:46 PM
If the site is broken (404) or some issue, It's cause I'm constantly devving on it; closer to the hour I will cease development so you can observe
Hello Madara
 
Okay, sounds good. I shouldn't need to refresh it, I'll be playing in Chrome's inspector.
 
Okay awesome, thanks!
Ignore the big font-size on "Price" it was a bad test ;(
 
4:25 PM
.ng-untouched.ng-pristine.ng-valid{
height: 42px;
 margin-bottom: 10px;
}

.ng-untouched.ng-pristine.ng-valid p{
box-sizing: border-box;
padding: 10px 10px 0 0;
margin: 0;
}
Not a perfect solution, but it seemed to do that trick. I wanted to try out a flex-box property, but I guess you're currently working on the work.
 
Hmm, let me take a look at that
Do you have a screenshot of how it looks
 
I would, but I refreshed the page and the labels were gone
 
I moved it to an accordian
under Price
If yoou paste that into SO
I'll mark you complete for your effort
just reuploaded the page
 
Okay, honestly, if you just add box-sizing: border-box;
padding: 10px 10px 0 0; to the first label, it looks pretty good.
But it would still be centered with the input field.
Im sorry, I mean if you did padding-right: 10px; + the border box property.
The only issue with aligning items with margin or padding is that it's not consistent among browsers.
 
Can't believe in 2017 we still have browser wars lol
 
4:36 PM
Yeah, perhaps when Google owns the universe, everything will be Chrome. I can take another stab at it after work hours, if you want. I'm happy to help.
 
That would be kind, thank you so much
 
4:53 PM
Sure, no problem!
 

last day (14 days later) »