mdc_web icon indicating copy to clipboard operation
mdc_web copied to clipboard

0.5.0-pre MDCSelect

Open zapappa opened this issue 6 years ago • 0 comments

I don't know if you are soliciting comments on 0.5.0 but I'll chance it with this input. I prefer the newer versions of material-components-web Snackbar and Select components (especially the menu version of MDCSelect) so I tried including the material-components-web 4.0.0 js/css directly with mdc_web. It worked ok but not quite right (unsurprising).

Then I noticed mdc_web 0.5.0-pre and I tried that. Pleased to say most components worked fine but I had a problem with an MDCSelect component using "mdc-select mdc-select--outlined" classes. The mdc-notched-outline div was displayed below the mdc-select__selected-text div instead of being overlayed on top of it. The issue is fixed with:

       .mdc-notched-outline {
             top: 0;
       }

Thanks for an extremely useful product and I apologize if this is off-track. Below is the html markup I used, taken from a material-components-web example:

<div class="mdc-select mdc-select--outlined">
	<div class="mdc-select__anchor demo-width-class">
		<i class="mdc-select__dropdown-icon"></i>
		<div class="mdc-select__selected-text"></div>
		<div class="mdc-notched-outline mdc-notched-outline--upgraded mdc-notched-outline--notched">
			<div class="mdc-notched-outline__leading"></div>
			<div class="mdc-notched-outline__notch">
				<label id="outlined-label" class="mdc-floating-label mdc-floating-label--float-above">Fruit</label>
			</div>
			<div class="mdc-notched-outline__trailing"></div>
		</div>
	</div>
	<div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
		<ul class="mdc-list">
			<li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></li>
			<li class="mdc-list-item" data-value="grains">
				Bread
			</li>
			<li class="mdc-list-item" data-value="vegetables">
				Vegetables
			</li>
			<li class="mdc-list-item" data-value="fruit">
				Fruit
			</li>
		</ul>
	</div>
</div>

zapappa avatar Dec 09 '19 06:12 zapappa