Questions tagged [materialize]
An open-sourced, modern, responsive front-end framework based on Material Design
3,546
questions
0
votes
0
answers
11
views
using materialize datepicker how do you set the year dropdown to open up on a specific value
I am using Materialize pickers ,i set the year range for a datepicker as follows between 1980 and 2035
reference: datepicker
everything works as expected.
The issue i am having is when you open the ...
0
votes
1
answer
50
views
Change Collapse-Header colour when selection is made from a Select drop-down
Have a standalone Google Web App script that presents about five collapsible to a user. When one of these collapsibles is select it reveals a list of questions based upon Materialize's Select ...
0
votes
0
answers
16
views
How can I make the hamburger menu activate with materialize css in React?
Let's see, he explained to them, I already built my entire website that simulates a virtual store in React, it was a course of this in coderhouse. But the navbar does not work for me in mobile view. I ...
0
votes
0
answers
14
views
Why is the preview button in materialize-css carousel not working?
I want a carousel with next and previous button, but when i click the button, it is only working one time...
when i give this $('.carousel').carousel('next');
in the chrome console it works but as ...
0
votes
1
answer
67
views
Materialize CSS Text Area Undefined When Passed As Object
Within a Google Sheet there's a sidebar that runs an HTML file that calls Materialize CSS. This sidebar contains three text inputs, work fine, and one text area that keeps failing and wondered if ...
1
vote
1
answer
43
views
How to include external library in testing library/storybook
I'm using Storybook to create stories. I want to create tests of the stories using @storybook/testing-react. However, I'm also using materialize-react which requires that materialize.min.js is loaded.
...
0
votes
0
answers
15
views
HTML Materialize CSS Dropdown and SideNav not working in Angular
I am helping my friend to create a replica of scholarship portal for college project. I made the navbar using materialize css and gave the html and css file to my friend to integrate it with angular. ...
0
votes
0
answers
25
views
MaterializeCSS Navbar Component Alignment
I've started experimenting with MaterializeCSS the last few days, reorganizing an older web-based application that displays CSV files in a particular way. I don't do much FRONTEND work, so it's nice ...
0
votes
0
answers
21
views
Problem with Materialize CSS navbar when view mobile
The NavBar component was coded as a class, I wanted to do it as a function. When I was with class, everything worked fine when I inspected the screen for mobile, the navbar was applied and opened from ...
0
votes
0
answers
22
views
how to disable dates between two range materlizee css
I want to disable the date picker between two specific dates how to do that?? The issue is I cannot disable the dates between two specific dates like I want to disable from 2022-07-07 to 2022-07-28.
...
0
votes
0
answers
14
views
Scrollbar does not appear with Materializecss extended navbar with tabs
I am using MaterializeCSS's extended navbar with tabs to display content on my static website. I copied and pasted the example code into my project files, and while it seemed to work fine initially on ...
1
vote
0
answers
33
views
(Materialize:) Uncaught TypeError: Cannot set properties of null (setting 'tabIndex')
I just upgraded to Materialize 1.0.0 from 0.9, I replaced the files of materialize.min.js, Materialize.css and Materialize.min.css in my project but I am getting this error.
Uncaught TypeError: Cannot ...
5
votes
1
answer
175
views
Why are my icons being placed as a column instead of as a row?
I am trying to align these icons as a row using className="col s1" but when I run this code its displayed in a column for some reason. I've tried removing the container tag, adding it, ive ...
0
votes
1
answer
19
views
MaterializeCSS Uncaught TypeError: $(...).carousel is not a function
i got this console error while using MaterializeCss framework from https://materializecss.com/carousel.html#one! :
Uncaught TypeError: $(...).carousel is not a function
at HTMLDocument.<anonymous&...
2
votes
1
answer
83
views
How to add Materialize to rails 7
I tried many things to add Materialize CSS to rails 7 .
I need some helps to add Materialize to rails 7 .
i tried use
--css=materialize
0
votes
2
answers
56
views
How can I apply box Shadow to container similar to that of an elevated button or Materialize CSS on Flutter?
I have been struggling a lot to achieve this, for all box shadow solutions are just not suitable! Bellow is the result I want to have:
0
votes
0
answers
50
views
Django Materialize Multiple Dropdowns
This might be pretty extensive - so any help is greatly appreciated.
Similar:
Materialize CSS (with django) dropdown form not working
How to Implement 3-way Dependent/Chained Dropdown List with ...
0
votes
1
answer
30
views
Select dynamic elements is not displayed is materializecss modal
When I try to add options element to select in Svelte, using materializecss, the select shows no elements. I listed the exported option elements (the binded data) in a list and also I can see the ...
0
votes
0
answers
29
views
Why is materialize not responsive on my phone? [duplicate]
I'm designing a web app using Google Apps Script and I want to use MaterializeCSS for styling. It looks great on desktop and tablet, but it is incredibly small on my Android phone. To demonstrate the ...
1
vote
1
answer
32
views
Materializecss carousel with custom cards
trying to use materializecss carousel with cards instead of just images [such that image is to the left and texts are to the right side of the card], the anchor tag "<a class="carousel-...
0
votes
2
answers
158
views
jquery validation shows uncaught type error
Trying to implement jquery validation because I need to be able to validate hidden inputs.
I initialize the plugin in document ready but on submit, I receive the following error:
Uncaught TypeError: ...
0
votes
2
answers
22
views
DatePicker onClose returns undefined value
I have an issue with jquery datepicker in materialize, it always returns an undefined value in the onClose function:
<input type="text" class="datepicker">
...
$('....
0
votes
0
answers
9
views
Adding margin from text to box
So I have a "card" div from materialize, and currently the only thing I do not like about it is the fact that the text is too close to the top of the card, as shown in the image. Is there ...
1
vote
0
answers
25
views
Materialize. Get access to autocomplete element properties
I guess answer should be easy, but I´m going mad trying to find an answer.
Let´s say that I have a Materialize autocomplete element defined like this.
$('#element_id).autocomplete({
...
0
votes
0
answers
73
views
MaterializeCSS with Ruby (Navbar Dropdown Menu)
I am following this tutorial unfortunately you won't be able to view it because it's a paid feature.
I am very new to RoR and Materialize, I had a lot of trouble just setting this up now I am having ...
0
votes
0
answers
14
views
How to integrate Materialize's modal in Navigation Bar?
I am currently working on a project using Materialize CSS where a popup login portal will appear overlaying the home screen after clicking the login button located in the navigation bar.
The issue is ...
0
votes
0
answers
22
views
MaterializeCSS input date displaying prior day
When I show an input field with datepicker passing in a value from my SQL data, MaterializeCSS is displaying the value as the day before. It works if I reformat the date using slashes instead of ...
0
votes
1
answer
239
views
How to disable certain days and dates in MUI react datepicker based on a json array?
I have Laravel app that returns a json response of dates and days of the week that should be disabled in the datepicker
For example this is my datesOff constant when I console.log() it ['2022-05-08', '...
0
votes
0
answers
27
views
Why is the materializecss checkbox not showing up? React
The checkbox is displayed if added simply to html, if added via useState, then it is not visible. Please tell me how to add an element to the page correctly so that it is displayed correctly and in ...
0
votes
1
answer
35
views
How can I make materalize dropdown options the same size as the dropdown button
I am trying to make the dropdown options the same size as my dropdown button, using materializes dropdown menu.
Like you can see below, the dropdown options are wider than the button itself. Even with ...
1
vote
1
answer
44
views
Materialize Icons, why is arrow_right taking up more space than arrow_left
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?...
0
votes
1
answer
47
views
materializecss google apps responsive mobile font size
I have written a google web app using materializecss. All works well on a laptop. I have designed it to be responsive, testing by reducing the width of the browser on my laptop and again, it workds ...
2
votes
1
answer
126
views
Is there a way to center a card in a container using Materialize CSS?
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/...
1
vote
0
answers
42
views
I have problems with screen resolution upscaling of my responsive web designs
I have made multiple personal projects for practising website designs and different JS frameworks. For the most part, I've learned how to do responsive design, whether with pure CSS media queries and ...
0
votes
1
answer
28
views
How to Initialize Materialize Dropdown Button in React?
I have this code, and am trying to get the dropdown button to work. I can get the button to appear but nothing happens when clicked.
import React, {useContext} from 'react';
import {Link, useNavigate} ...
0
votes
0
answers
38
views
The FAB edit button opens modal but when select value is clicked on it closes modal
3.19.22
IT-Logger App issue
Author Greg Petropoulos
Problem Statement:
When the authenticated user hovers over the FAB the black edit button appears and is clicked on to show the modal and make a ...
0
votes
0
answers
98
views
Script loaded from content delivery network with no integrity check
Am running code quality analysis using LGTM tool on my flask app which uses Material CSS for its javascript. To access the javascript one should use(According to Documentation):
<script src="...
-2
votes
2
answers
75
views
CSS Input field design [closed]
I need to make a input box like the image below.
I'm using materialize and CSS.
0
votes
0
answers
107
views
How to implement autocomplete in multiple select dropdown with Materialize CSS?
I want to implement autocomplete feature in Multiple Select type of Dropdown with Materialize CSS (materializecss.com)
There are multiple values which I have to select. Currently, as the list is very ...
0
votes
1
answer
21
views
Materialize scrollspy is changing the URL and refreshing the page
Materialize scrollspy (https://materializecss.com/scrollspy.html) is changing the URL and refreshing the page.
I have used the same code mentioned in the Materialize document in my Vue.js project for ...
0
votes
0
answers
20
views
Radio button in inside materialize css accrodian header
Hi am using materialize css framework component collapsible.I want radio button checked when click on entire header and content body should expand.
HTML:
<li class="active">
...
-2
votes
1
answer
108
views
what is the equivalent to componentDidMount outside of class element?
I am trying to make a React component that will take data from an API and generate a number of collapsible FAQ cards. I can get the the questions to map properly on the page, however I cannot seem to ...
0
votes
1
answer
45
views
Materializecss tooltip not showing up
I am trying to use materialize tool tip for the first time using the example shown on its website. However, the tool tip is not showing up. What am I missing? Here is the link to the fiddle : https://...
0
votes
0
answers
70
views
How do I set a select value in materialize CSS? (NO JQUERY)
I am trying to set the value of my dropdown select, but there frankly isn't much documentation on any of this stuff anywhere. This is about all you get: https://materializecss.com/select.html
I am ...
1
vote
1
answer
86
views
Aligning materializecss Radio buttons and Text area
Here is the link to the fiddle https://jsfiddle.net/be21z7wj/2/
I am trying to create a question which has a radio button with options Yes and No. Along with this, there should be a text area where ...
0
votes
3
answers
157
views
How can i change a text of a button without changing it's icon
i have a "Pause" button with a pause_circle_outline materialize icon, and when it clicked i want to change the text to "Resume" and changing the icon to play_circle_outline, but ...
0
votes
1
answer
198
views
Materialize CSS - multiple select with disabled selected issue
Even on official MaterializeCSS page for Select when you select a value for multiple select you see the disabled selected "Choose your Option" and then the selected option(s).
It seems to ...
0
votes
0
answers
60
views
How Do I Add Options To Auto Complete From Variable via json materialize css
So Basically what im trying to do is have my for each function for firebase database append a new line to a json variable, and it does it successfully but when i try to init the auto complete box with ...
0
votes
0
answers
20
views
How to style only the datepicker element using materializecss and leave everything else unaffected
I have created and styled a form using HTML and CSS. The form includes a date-input, which I don't like. That's why I want to replace it with a datepicker from materializecss. I have included the ...
0
votes
1
answer
45
views
How can i add more options to a select element in html?
i tried to make a select element in html using materialize css library, and when i try to add dynamic options to the select (for example, a list which each element in the list is an option of the ...