Trying to position the following code on the right side of the nav-bar, but it's only displaying half of the menu correctly. No additional CSS has been added, this is using the default material design lite code.
The issue seems to be with my CSS https://codepen.io/russellharrower/pen/RgMJaR
My core getmdl
<link rel="stylesheet" href="https://getmdl.io/assets/components.css">
<script src="https://getmdl.io/assets/components.js"></script>
<script src="//code.getmdl.io/1.3.0/material.min.js"></script>
HTML CODE
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">SITE</span></span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" />
</div>
</div>
≪- MDL bottom right Aligned Menu Button -->
<button id="my-menu-bottom-right"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">share</i>
</button>
<!-- Menu items List , mdl-menu--bottom-right -->
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="my-menu-bottom-right">
<li class="mdl-menu__item">Facebook</li>
<li class="mdl-menu__item">Twitter</li>
<li disabled class="mdl-menu__item">Google Plus</li>
</ul>
</div>
</header>
https://i.sstatic.net/LzRKc.jpg
This automatically generated CSS seems to be causing issues, not sure what part of the code generates it or why.
element.style {
right: -35.1563px;
top: 40px;
width: 124px;
height: 160px;
}
Error discovered in:
.mdl-textfield{width:100% !important;}
I need to style it without affecting all .mdl-textfield globally, so I'll target the #id of the div before instead.