html - display inline doesnt work correctly -
i have code:
the image placed behind input element , not next (with small margins).
this how works now: inline doesnt work
i not every item 1 followed other without overlap
css
.mfc-number-step { margin: 10px; input { width: 202; height: 41px; } } .mfc-number-step__status--error { border-color: red; background: #fff3f2; } .mfc-number-step__status--disabled { color: #8b8b8b; } .mfc-number-step__button { width: 41px; height: 41px; } input, img { display: inline; }
html
<div class="mfc-number-step"> <input type="text" ng-class="{'mfc-number-step__status--error' : mfcnumberstepstatuserror === 'true' , '.mfc-number-step__status--disabled' : mfcnumberstepstatusdisabled === 'true'}" ng-disabled="mfcnumberstepstatusdisabled === 'true'" value="{{mfcnumberstepunitmeasure}}" class="mfc-number-step__input"/> <img src="{{mfcnumberstepsubtracticon}}" class="mfc-number-step__button"/> <img src="{{mfcnumberstepaddicon}}" class="mfc-number-step__button"/> </div>
first @ should use ng-src instead of src attribute inside img tags if want load images curly brackets.
using angular markup {{hash}} in src attribute doesn't work right: browser fetch url literal text {{hash}} until angular replaces expression inside {{hash}}. ngsrc directive solves problem.
are using sass? because in normal css cant nest css classes did in .mfc-number-step.
Comments
Post a Comment