Questions tagged [material-design]

1

votes
2

answer
1.5k

Views

WPF Material Design Raised Button Hovered state

I'm trying to recreate a material design look & feel for a button. For the focused (hovered) state the guidelines say to make a 12 % #000000 shade over the button. I was wondering how this could be achieved in WPF. I've been looking around a good option would be to add a non-hittable rectangle over...
Bart Pinnock
1

votes
1

answer
363

Views

How to change colour scroll-overflow indicators?

When the user scrolls to the edge of a list or TabView, an animated blue circle appears on the ending edge. What is this called, and how do I change the colour of it? Cheers.
haz
1

votes
1

answer
1.3k

Views

Material design Spinner using TextInputLayout.OutlinedBox styling

I am currently using Material Design TextInputLayout OutlinedBox as shown below: I am trying to add a dropdown box Spinner under my TextInputEditText, and would like to keep the same styling: OutlinedBox. I see that dropdowns seem to be supported in Material Design, Material Design Text Fields. As...
PhilBlais
1

votes
1

answer
382

Views

Angular material multi select get selected value on hide

Scenario : I have a filter in angular material multi-select Todo : I want to get the selected values on hide of dropdown.. I googled and tried to find the doc but could not found any ref to add hide event to miltiselect
Md. Parvez Alam
1

votes
1

answer
34

Views

Material design wave effect not applied to dynamically created button

I am trying to create buttons by using jQuery's append method. However the buttons which where created by jQuery don't have the wave effect if I click on them. The button that I created in HTML has the wave effect. Why is it different? How can I get the wave effect to also appear for the button whic...
InFlames82
0

votes
1

answer
16

Views

Error: BrowserModule has already been loaded. in MDB-Angular Lazy Loading

i am facing this problem while creating the new project on MDB angular . I have created multiple modules like public , tutor and student . public module is not lazy loaded while others are lazy loaded . public module is working perfect . import { BrowserModule } from '@angular/platform-browser'; im...
Muhammad Sohaib
0

votes
0

answer
4

Views

How to display placeholder Chips within ChipGroup in xml?

I have a layout with a ChipGroup whose chips will be populated programmatically, but I want to visualise how chips will look like within the layout, is there a way to show fake chips like for example using the tools namespace?
glisu
1

votes
0

answer
54

Views

Is there an upgrade guide for the lesser versions of materialize-css?

There isn't another question that answers this from what I've seen. I need to go from 0.98.2 -> v1-alpha. The only update guide I can find is from 0.100.2 -> v1. There are lots of breaking changes between 98 and 100 that I can't find a guide for. Am I stuck trying to debug it based on the changelog?
Dylan Buth
1

votes
1

answer
36

Views

Contacts page - use List or build layout with standard Views

I am trying to recreate a page like screenshot below. There are some approaches that comes to my mind but I can't decide which one would be the best. Create a listview and add each row layout accordingly to it. use a constraintlayout and specify how each element would be placed against the other one...
1

votes
1

answer
248

Views

CollapsingToolbarLayout - how to pin toolbar and another view but still have parralax for header image?

Lets take a look at what i would like to achieve first: So the yellow area will be for text. it should not move. it should always be in a static position pinned. The toolbar should likewise also be static and always pinned. But the blue part will have an image in it. It should shrink when scrolled...
j2emanue
1

votes
1

answer
72

Views

Material UI next simple dialog add new contact

I am using the material-ui next branch and using the following example as reference for building a dialog. https://material-ui-next.com/demos/dialogs/ https://codesandbox.io/s/7rq8nl11x I wanted to know the best way to let the user enter a new contact as per material guidelines ie how to handle the...
Rahul Ravindran
1

votes
0

answer
81

Views

Google material icons not rendered using wkhtmltopdf

I am using google material icons on my website and converting the HTML page to PDF using wkhtmltopdf plugin https://github.com/wkhtmltopdf/wkhtmltopdf. I have used a material icon like below in the page account_balance It renders fine on the browser. But when I run the command to convert the page i...
rach8garg
1

votes
0

answer
50

Views

Tab key changes the position of textfield inside table

I'm receiving a weird behavior which is: when using tab key to switch between TextField for the first time, the position of the TextField changes a little. The following screen shot might better explain the situation. As shown above, only the position of TextField named 'treatmentType' is not change...
Liutong Chen
1

votes
1

answer
55

Views

Rendering these Angular2 components with plain JavaScript

I need to achieve the following. Could you please give me some advises or recommendations to go in the right direction? Thanks. Goal to achieve: Complete the file: index.html (code below) by adding needed CSS AND JAVASCRIPT references so it can render the components: {, , } taken from here: https://...
davidesp
1

votes
0

answer
265

Views

Angular Material Theming, changing colors programatically

I'm using custom theming as per the instructions HERE and it works great! Except I want my users to have the ability to choose their own colors. I can't seem to figure out how to programmatically change theme colors in my components. Specifically, I want to get the colors for my users from a databas...
Jus10
1

votes
1

answer
1.3k

Views

Reduce white space around Angular material panel

I am trying out material expansion panel with Angular 5. It is working fine but there is a lot of whitespace around the main content that I would like to reduce but I am not sure what classes or styles I should use for that. Summary
Anand
1

votes
0

answer
131

Views

MDL Checkbox Function MaterialCheckbox.check() doesn't work on ajax content

I am working with MDL Checkbox where i need to delete all values at once. As i did some research and looks like old method is deprecated : Deprecations for MDL Data Table Checkbox and mdl-data-table--selectable can't be used anymore. HTML Code: Sr. No Name Gender Date of Birth Anniversary Address...
Sahil Pasricha
1

votes
1

answer
159

Views

Cannot change accent on materialdesigninxaml

I'm trying to add the MaterialDesign accents to a MenuItem, actually I've managed this partially, this is what I did so far: Menu creation: container definition: I defined a Color converter to display as Ellipse color: public class ColorToBrushConverter : IValueConverter { public object Convert(obj...
Steven
1

votes
1

answer
44

Views

Material Design Lite - nav header looks very small on Samsumg S4 or S4

When using standard examples with Material Design Lite, I see that the header and tabs bars looks very small. How come? How to solve this? This is the code: .content-grid { max-width: 480px; } MzFaster search Enter your query... more_vert About Categories ContactUs Legal information Featured Feat...
tjm1706
1

votes
1

answer
133

Views

360dp is layout looks different on various phones

I have a folder in my android app labeled: values-sw360dp I have tested this on different phones who's smallest width is 360: Configuration config = context.getResources().getConfiguration(); int x = (int)config.smallestScreenWidthDp; //x = 360 but all these phones look different(some buttons are n...
fred shmed
1

votes
0

answer
72

Views

Create, modify and display an instance of a component

using Angular2+, Material I just can't find an answer for hours, so I'll give it a try here: I'm working on a tab-layout. I can add new tabs dynamically, that's working. But instead of just displaying some 'raw' data as content, I want it to be an entire component but with individual values My appro...
Runnable
1

votes
1

answer
113

Views

How to set Foreground of a TextBlock in a nested grid?

I've a TextBlock inside a Grid which is inside a PopupBox provided by MaterialDesignInXaml, a sample structure: xmlns:materialDesign='http://materialdesigninxaml.net/winfx/xaml/themes' I'm trying to apply the TextBlock foreground as a global resource in my App.xaml: but not seems to be working, any...
oÆÞ
1

votes
0

answer
33

Views

in gulp command i get error in angularjs

if i run gulp serve to run project i have error like this so please help me because i am new in angular in localhost run properly but in c panel i have this issue Error: spawn EACCES at exports._errnoException (util.js:1026:11) at ChildProcess.spawn (internal/child_process.js:313:11) at Object.expor...
yagnik devani
1

votes
1

answer
28

Views

Toolbar now showing main AppBar

I am trying to customize the AppBar with a ToolBar, the title and menu area is hidden by the layout that I inject in the toolbar. The code of my activity layout is this one: .... Other components of my activity. .... And here the code of my activity. @Override protected void onCreate(Bundle savedIns...
edutesoy
1

votes
2

answer
391

Views

Material design layout grid more than 12 colum

I'm trying to create a grid to which has one column per day of the month. So I need up to 32 columns in a single row (1st label + days of the month) I'm using a for in order to add divs dynamically. @{ Days: for (var i = 1; i
1

votes
0

answer
70

Views

Indeterminate progressbar animation disappeared after adding indeterminateDrawable

I need to add Radius the Horizontal progress bar with indeterminate. but I've lost the cool indeterminate animation. progressbar_states.xml: if i use android:scaleGravity='center' the bar being filled from the center and if remove this line, the bar filled from the left side. but how I make the bar...
Michael Vish
1

votes
0

answer
42

Views

Font Stacks in Android

I was reading the Material Design specs on typography and came across the following: For both Android and web properties, the font stack should specify Roboto, Noto, and then sans-serif. I started reading up on what a font stack is here and here and it appears to make sense on a high-level perspecti...
coolDude
1

votes
0

answer
358

Views

Bootstrap-Material-Design 4 Dropdown not opening in Jhipster(Angular 5)

I am trying to use a creative-tim Material Bootstrap 4 Theme in my jHipster project, but after so many tries I am not able to make the Dropdown or Floating Label components working. Stuff I tried: 1. Added files in vendor.ts import '../../../../node_modules/jquery/dist/jquery.js'; import '../../../....
Rachna
1

votes
1

answer
34

Views

make switch button show another form

I have this switch on/off button, I want to make it shows another form when clicking on and when you click off I want to get back the 1st form here's my code : transfer market bank I have tried using jquery toggle() but it's only showing the 2nd form without making the 1st form disappeared $('#butto...
Alan Ge
1

votes
0

answer
280

Views

Change status bar scrim color with collapsing toolbar layout

I`m using android palette API to extract colors from the downloaded images by picasso, and accordingly i wanna change status bar and collapsing toolbar color. i managed to change the collapsing toolbar but i cant with the status bar! and this is my code collapsingToolbar.setBackgroundColor(palette....
M.Ali
1

votes
0

answer
84

Views

Attach material.io menu component to all elements with same class

I'm trying to figure out a way to attach the material.io menu across a webpage that has multiple menus. I tried to use jQuery each function but obviously the code does not work. Here is the original code suggested by material.io (works for one menu only) var menu_element = document.querySelector('.o...
Ahmed Fouad
1

votes
0

answer
581

Views

How to change color of a material skin control in runtime C#?

I am using the material skin theme in my windows form app in C#. I have inserted some materialSingleLineTextField with a blue accent color. When the user haven't insered all information and clicks on the Print button, all the required text fields should turn to red. How can I implement this? Also...
Yu_Jain
1

votes
4

answer
212

Views

How to make splash screen image visible in navigation bar also?

I have an image which I want to place in splash screen in such a way that it is visible in navigation bar also at the top. Normally the image is visible in full activity except the navigation bar. But I want it to start from navigation bar also as in swiggy app splash screen. Below is the related im...
Ankit Srivastava
1

votes
1

answer
150

Views

ReactJS + Material Design: How to get theme colors outside component?

In my ReactJS app.js I defined a theme: const theme = createMuiTheme({ palette: { primary: { main: '#54BD40', }, }, }); I am using the React wrapper for Chart.js and I want to set-up a chart graph. But I am not sure how I can use the primary/main color from my theme: import React, { Component } from...
Jordy
1

votes
0

answer
362

Views

Bottom navigation prevents last item of recyclerView

I am designing an application. Main activity contains tabLayout. Each tab has RecyclerView. However I can't see last item of the RecyclerView. I think bottomNavigation prevents. How can I change last position of viewPager? What should I do? You can see my main activity layout code below. My app imag...
Orhan Avan
1

votes
0

answer
139

Views

materalize autocomplete scroll issue

Hi I am using materal design framework for a autocomplete functionality. the problem is that when i type something in input file drop-down list is coming and i have set max-height and overflow scroll so it autocomplete list should scroll. problem is that when i start scrolling in scrollbar it automa...
Rahul
1

votes
0

answer
44

Views

Meteor with React and Materialize initialization without jQuery

So, what module do I need to include in my file to be able to initialize materialize scripts like this: var elem = document.querySelector('.dropdown-trigger'); var instance = M.Dropdown.init(elem, options); I'm using materialize with meteor and React and I've installed materialize through Atmosphere...
Karol
1

votes
1

answer
20

Views

Third line clipping with padding in material designs Three-Line list

I'm working on a java app for android where I'm displaying some info in a Three-Line list. Material designs guidelines for three-line lists: Primary text font: Roboto Regular 16sp Secondary text font: Roboto Regular 14sp Tile height: 88dp Text padding, left: 16dp Text padding, top: 16dp Text pad...
amani2k
1

votes
0

answer
57

Views

Setting spaces between mdl grids

I have recently learnt material design lite I am using MDL grids in my html page to make three uniform divisions in a single row. some text some another text more text But in second division, Instead of adding some text, I want to let the division be empty .That is only left(first div) and right(th...
1

votes
0

answer
99

Views

How to animate menu items on Toolbar

Can anyone please guide me on how this animation here could be done? I know that the Logo and Text is done through Shared Elements but how about the other views? How was the toolbar icons and back button animated? and how was the incoming list translate to top? Thanks in advance.

View additional questions