I am using mdl-select in an angular-cli project on a form but cannot seem to get the label to show / float once a drop down value has been selected. The placeholder works fine but only shows whilst no value selected as it should. All other aspects of mdl-select is working perfectly though. Seems like an issue in css but I have not introduced any new css outside of mdl and material related css.
Component HTML
<mdl-select label="Country" floating-label [(ngModel)]="this.currentc">
<mdl-option *ngFor="let c of cl" [value]="c">{{c.Description}}</mdl-option>
</mdl-select>
Angular-cli.json
"styles": [
"../node_modules/angular2-mdl/scss/material-design-lite.scss",
"../node_modules/#angular2-mdl-ext/select/select.scss",
"../node_modules/#angular2-mdl-ext/popover/popover.scss",
"../node_modules/material-design-icons/iconfont/material-icons.css"
],
Related
I am building a Dashboard using Python Dash. I am using Materialize.css Framework for css. I want to create a Navigation Bar which the Unordered List must be shown on any devices either Mobile, Desktop. I am referring to this website Extended Nav Bar with Tabs. How do I get the webpage more responsive?
The sample code is posted here
layout = html.Div(id='main-page-content',children=[
#nav wrapper starts here
html.Div(
children=[
#nav bar
html.Nav(
#inside div
html.Div(
children=[
html.A(
'Dashboard Analytics',
className='brand-logo',
href='/'
),
#ul list components
html.Ul(
children=[
html.Li(html.A('Configuration', href='/apps/config')),
html.Li(html.A('Segmentation', href='/apps/segmentation')),
html.Li(html.A('Main Page', href='/apps/users')),
],
id='nav-mobile',
className='right hide-on-med-and-down'
),
],
className='nav-wrapper'
),style={'background-color':'#008EFE'}),
],
className='navbar-fixed'
),
])
#define the external urls
external_css = ['https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css']
for css in external_css:
app.css.append_css({'external_url': css})
external_js = ['https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js']
for js in external_js:
app.scripts.append_script({'external_url': js})
when I view the webpage in mobile the options must be shown in Side Navigation. So I can navigate through different pages without actually going back in mobile devices.
In the link you gave, the example contains the following element, which is missing from your layout:
<i class="material-icons">menu</i>
This is the button that opens the menu on mobile devices. Specifically, the data-target property is essential, as it triggers the on-click event.
Unfortunately, there is currently no easy way in Dash to add this attribute to an HTML element (see this thread).
In addition, you forgot to give the nav element the class name 'nav-extended', but I don't know how essential that is.
I work with Jade (pug) and Nodejs.
I created a dropdown button, so that user can choose an item, but it didn't show in the application. There is no dropdown there. I've already use display:block and clean the browser cache. But still stuck here.
Here is my .pug file:
.filters-nav
.btn-group.m-r-15
button.btn.btn-inverse.dropdown-toggle.waves-effect.waves-light.btn-custom(type='button', data-toggle='dropdown', aria-expanded='false')
span.btn-label
i.fa.fa-filter
| Add filters
span.caret
ul.dropdown-menu.filters-dropdown(role='menu')
li
a(href='#', data-filter='table_1_filter_0') Instrument ID
li
a(href='#', data-filter='table_1_filter_1') Instrument Code
I wonder if it is CSS, but all I know is CSS doesn't related to element visibility at all.
Maybe this will help, its pug plus the css
li.dropdown.btn.btn-default
span.glyphicon.glyphicon-th-list
............
https://codepen.io/thehumanscience/pen/qbLepW
I just upgraded an Orchard website from 1.7.1 to 1.9.1 and it seems like a number of things were broken in the process. I managed to fix all of them except for one - all of my navigation items in the menu lost the links to their associated content items, so when I started adding them back in for some reason the front-end start duplicating everything. I'm on a custom theme and the menu started showing up properly, but it's duplicating all menu items right in the root with <option /> tags. I can hide those through CSS easily enough, but it's also adding "undefined" in here too, something I can't seem to target and hide.
Any idea why this is happening?
Update I figured out the "undefined" part - it's more of the content menu items being blown out, but this time it was a custom link (just a #, since it didn't go anywhere) that didn't have a URL, so it was showing as undefined. The rogue <option /> values are still here, though I can hide them via CSS. I just don't like that they are in the markup at all.
I setup a custom content definition, query and projection inside Orchard (1.8) and just about everything with it works great, including overriding the display view on the projection page's URL. The only issue I'm running into is when I put that same projection in a widget, I can't seem to figure out how to override the view for it. The automatically generated HTML is this:
<p class="text-field"><span class="name">Name:</span> <span class="value">/** Title from content item **/</span></p>
<p>more</p>
<p>asdfasdfasdrerfwerqaq324f421 more</p>
<p class="date-time-field date-time-field-date">
<span class="name">Date:</span>
<span class="value">/** Date from content item **/ </span>
</p>
I've tried using the Shape tracer to create an alternate view, but even when I only have #Display(Model.Content) in the new view, it still puts all of that extra stuff in it which is more than I need to show on this view. The shape tracer says the active template is my new one with only that value in it, so I'm not sure where all the extra HTML is coming from here (though it does show on the HTML tab of the Shape tracer).
How can I override the view for this widget?
If the extra HTML is only appearing when you post the projection as a widget it is probably due to wrapper tags added through code or through the widget wrapper template. Try either of these methods:
Check Widget.Wrapper.cshtml to see if that view template contain the extra HTML. I don't remember if this shape shows up in the shape tracer, it might show up under the wrappers section.
You can also try the trick below - this can remove unwanted markup in some cases, I use it for the menu navigation widget. It removes any wrappers that were added through code. Make your widget template look like this:
#Display(Model.Content)
#{
Model.Metadata.Wrappers.Clear();
}
Basically creating a webpage with a dropdown menu I wrote following a tutorial. My page layout consists of 3 separate tables which include 1 for the title/banner, one for the drop down menu and one for the body/content.
The problem I am having first off is that when I scroll over my drop-down menu it drops behind my body/content table. I found a fix for this which was to include z-index:-1. This worked perfectly in IE but after testing it in chrome it prevented links and iframes to be interacted with on the content/body table.
#bodytable {width:1100px;
height:100%;
margin:auto;
position:relative;
top:10px;
z-index:-1;
}
The entire .css code can be found here:
http://pastebin.com/T97JAjQ8
Try giving them each a positive z-index value. Obviously the higher numbes will be "on top" of the other with lesser value. Instaed of giving a table "-1", give it something positive, like 10 and make the dropdown menus "20". You can even set the z-index of the body, to 0 as a baseline.
I haven't confirmed this, but it could be that chrome doesn't like negative z-index values.
Giving Negative z-index makes your element to go under body or wrapper div and hence, prevent them to be interacted because the body element is on the top of that table when you click the event occurs on the body tag not table tag. You have to give positive z-index value. Default stack order of elements is determined the position where the element is defined. For example, your table will be have a larger z-index value if it is defined after menu div. You can fix your problem by changing only the current stack order. By just changing that negative value to positive.
element {
z-index:1;
}
The above code will set the target element to be on top of others beside the current stack order.