Questions tagged [materialize]
An open-sourced, modern, responsive front-end framework based on Material Design
3,564
questions
0
votes
1
answer
26
views
Material Angular has auto focus on first button until I click
The first button in this form field has always autofocus
It disappears when I click somewhere else
<form [formGroup]="addFundsForm">
<mat-form-field ...
0
votes
1
answer
34
views
mat-tab as a link click on label and just open link
I have such a problem i have: inside 4 mat-tabs i want to add one more..and it will just a label when we click on it it opens provided link..i m trying to do simply like that but it doesnt work
...
1
vote
0
answers
18
views
closeOnClick not working in materialize css dropdown
I have a website and i am using materialize css and i have a profile icon and when you click on that icon i show a dropdown having multiple sub-items but whenever i click on any sub-item, the dropdown ...
0
votes
1
answer
63
views
Conflict between Materialize CSS and html5-qrcode Library - Webapp created with Google Apps Scripts
Can anyone bring some light in this issue:
I created a basic webapp form with Google Apps Scripts to scan Qr codes (library https://unpkg.com/html5-qrcode) and send the data to Google Sheet. It will ...
0
votes
1
answer
35
views
Unresponsive select box in materialize
I'm using materialize with a node backend and js front end. I'm trying to submit a form. I have the following:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1....
2
votes
0
answers
33
views
Materialize regex based validation of a series of numbers
I'm using materialize with a node backend and js front end. I'm trying to submit a form. I have the following:
<body>
<div class="container">
<div class="row"...
0
votes
0
answers
13
views
Materialize.css datepicker: offset in month display
I'm having a problem with a datepicker under materialize 1.0.0
Here is the HTML code :
<input id="date_echeance" value="" type="date" class="datepicker" name=...
2
votes
3
answers
110
views
Nothing shows in my console from a filtered object
I am building a simple mattress shop for my school. I need to filter by price range and firmness. I have the items object hardcoded and need them to be filtered. I am just trying to get it logged ...
0
votes
0
answers
23
views
How to update minDate and maxDate for start date and end date dynamically using Materialize 1.0.0' s Datepicker?
I'm new to javascript and using Materialize as CSS framework.
I'm implementing two datepickers for a start and end date. I'm struggling with setting the maxDate and minDate dynamically.
maxDate for ...
0
votes
0
answers
14
views
aurelia materilaize component md-chips close option
i have an array that looks as follows
`0: {tag: '[email protected]', __observers__: {…}}
1: {tag: '[email protected]', __observers__: {…}}
2: {tag: '[email protected]', __observers__: {…}} `
I am using md-...
0
votes
0
answers
13
views
A button shifts to the right at materializecss FeatureDiscovery close
When FeatureDiscovery component closes the remaining button shifts to the right a little.
How do I fix that, and stop it from shifting?
Look for yourself
I am using version 1.0 of materializecss
0
votes
1
answer
46
views
How do we change the cursor starting position of a text field component of Material UI (Version 5.14.6)?
How do we change the cursor starting position of a text field component of Material UI? We are using the latest version of material UI and we are using Test Field component in my project but the ...
0
votes
0
answers
11
views
Materialize CSS select multiple change displayed values
I have this line of codes using Materialize CSS select multiple elements
<div class="input-field col s12">
<select multiple>
<option value="" disabled ...
0
votes
1
answer
29
views
CSS conflict betwenn symfony's twig tempalte and materialize's checkboxes
I'm using the Twig template of Symfony 6 along with the Materialize framework. I have a ManyToMany relationship between a client and offers. Therefore, when creating my client, I want to assign one or ...
1
vote
1
answer
29
views
overlapping problem with checkboxes in materialize
I have built a website that is a quiz and designed it with "Materialize".
Now I have the problem that the texts of the answers overwrite each other. The distance between the checkboxes ...
0
votes
1
answer
20
views
Is there a way to fix this box issue on materialize Css dropdown?
I am learning materialize CSS. I encounter an error When I hover on the dropdown. it creates weird the box. How to fix it
and my code is
<nav class="blue darken-4">
<div ...
1
vote
0
answers
15
views
Materialize CSS change display of selected values
I have this line of codes using Materialize CSS select elements
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose ...
0
votes
1
answer
18
views
Choices not being rendered in template
Working in Django. I've added choices and the necessary field in my model. The choices are well populated in the admin site, but not rendered in the template.
I've double checked several times and ...
0
votes
0
answers
6
views
How to change the background color of weeks after the current week in Static Date Picker
Right now i have the current week with a different color and the rest of the weeks with the same color.
with this code i can reproduce the above image:
<StaticDatePicker
displayStaticWrapperAs=...
0
votes
0
answers
17
views
Using mySQL syntax within html script tag [duplicate]
I have a mySQL database. Let's say I have a table with columns name, number, and location. I want to be able to call {{name}} and {{number}} within a script tag in an html file. For ex. if the id of ...
1
vote
2
answers
48
views
Materializecss 2.0.1 : problem with Label in Selects
Im using Materializecss 2.0.1 and the in the select dissapear.
My code:
<select required class="validate" name="id_provincia" id="id_provincia"> <option value=&...
0
votes
2
answers
331
views
React-leaflet don't show correctly in Modal
everyone! I try to use react-leaflet in my React Project with Materialize style. When i open Modal component i don't see map. I installed npm install react-leaflet, also added in index.html <link ...
0
votes
0
answers
24
views
How to init dynamic list of options with react and materialize css
I'm doing my study project and chose materialize as css framework, i'm have some trobles with it, but i'n not want change it because i'm almost finished.
I need to add select element with dynamically ...
1
vote
1
answer
105
views
Formatting dates to dd/mm/yyyy in a Google Apps Script html template table
I'm developing an app in Google Apps Script to access data in sheets and display it in a html app.
I've been able to show the data regions I want from the spreadsheet, and it contains a column which ...
0
votes
0
answers
98
views
materialize dbt model in custom schema
I have model2.sql in my dbt project
select *
from {{ ref('model1') }}
after compilation I need to get
select *
from 'dwh'.'analytics'.'model1'
and materialized it into schema "analytics_test&...
0
votes
0
answers
45
views
Cumulative Layout Shift pagespeed lighthouse first
I followed suggestions in a post regarding eliminating render blocking on Google fonts and this is the result from https://pagespeed.web.dev/ and its buddy Lighthouse.
I added the following to the ...
0
votes
1
answer
80
views
(HTML, CSS) Refused to load the script
Help me, please! I was deploying html website into Heroku, but i got this error...
Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js' because it ...
-2
votes
1
answer
37
views
I don't know why, when I Import materialize has problems Material UI REACTJS
Before, when i don't import materialize
it's ok
not import materialize
After, when i imported materialize in index.js it broke my page like this
the page have a container grid 12 column but i don't ...
0
votes
1
answer
238
views
How to line break the selected option text in a MaterializeCSS select
I have a MaterializeCSS form with selects which have more text than the default width can show.
Currently, the text is a single line that is simply cut off at the widget edge.
The expanded dropdown of ...
0
votes
0
answers
32
views
Why does my modal keeps popping up even if there is no input errors?
I am currently using HTML/CSS/JS and Materialize CSS for a webpage. The problem I am having is getting the Materialize CSS modal to show up at appropriate times such as when an user made an error. In ...
0
votes
0
answers
74
views
Materialize labels not working correctly in shadowRoot of web-component
I am currently working on web components which use
JQuery (3.6.3) and materialize (1.0)
The labels of the materialize components do not work in shadowRoot for some reason.
Instead of moving above the ...
0
votes
1
answer
48
views
How to make the materializecss dropdown work when added dynamically
Following is an example of a sample webform I made in Google Apps Script, where I'm trying to dynamically add three select dropdowns and an input element whenever the add button is clicked. The ...
0
votes
1
answer
34
views
Can't resolve 'src/assets/materialize/js/materialize.js'
Can't resolve 'src/assets/materialize/js/materialize.js' I have this problem, and IDK how to fix the problem, when I start the server this problem appears.
5 unchanged chunks
Build at: 2023-01-06T15:...
0
votes
1
answer
26
views
Is the events option in MaterializeCSS supposed to highlight dates?
According to the docs, the events option is
An array of string returned by Date.toDateString(), indicating there
are events in the specified days.
Seems to me, this is supposed to highlight dates in ...
0
votes
0
answers
21
views
Ability to minimize modal window with materializecss
How can we minimize a modal window created using materializecss.
Here is a working fiddle.
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/...
0
votes
0
answers
81
views
Dropdowns On Materialize.CSS Pulling Data Dynamically From Google Sheets
I use Materialize.CSS elements which I added to a Google Sheets sidebar and my goal is to pull data (dynamically changing names) from a Google Sheets tab to a dropdown in a sidebar.
So when the ...
0
votes
1
answer
25
views
Jquery Autocomplete with Ajax Call not working
Im adding enhancements to an existing rails 5.1 app. I need to add autocomplete with data retrieved from a Mysql database. The application has Jquery, simple_form, and materialize all included. My ...
0
votes
1
answer
41
views
Dynamically created Select Options behave differently when called from a button vs directly in function Materialize CSS
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, {});
});
const container = document....
1
vote
1
answer
95
views
Materialize CSS returns previously selected value from the EventListener on a Select
document.addEventListener("DOMContentLoaded", function () {
const selects = document.querySelector("select");
const instances = M.FormSelect.init(selects, {});
const selectOption = document....
1
vote
1
answer
197
views
Setting background color of checkboxes in materialize using CSS variables
I use materialize CSS and generate checkboxes dynamically. I want different checkboxes to have different colors.
When I'm trying to set the color inline, it doesn't take effect:
<input type="...
0
votes
1
answer
537
views
How to have a favorites button Add a card to a seperate page called favorites.html
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg&...
0
votes
0
answers
16
views
Materializ.min.css link is not working on staging server
On localhost, everything is working fine. But as I pushed my code to the staging server some of the styling was effected. I checked various links i-e; bootstrap, font awesome, materialize, all of them ...
1
vote
0
answers
121
views
How to set up an Add To Favorites Button in JS with Materialize and Firebase
I have been using materialize CSS for buttons on some cards in my application and wanted to create a button that when clicked it adds the user's favorite item to another page that I have in HTML ...
0
votes
1
answer
256
views
Azure SQL DW Materialized Views
I am trying to understand but its not obvious to me in the documentation of Azure SQL DW, if you materialize a view and any of the base tables of the view is being updated with data or data is deleted ...
1
vote
0
answers
39
views
Is there anyway to move the card reveal action button to the bottom of the card in Materialize CSS?
Is there a way to move the button that reveals the card to be at the bottom of the card instead of off to the side? For example: Having it be where the link placeholder text is and still reveal the ...
0
votes
0
answers
261
views
Why Materialize template redirect from localhost to 127.0.0.1 after login?
I have added a custom login handler for Github:
const handleLoginGithub = (
params: LoginGithubParams,
errorCallback?: ErrCallbackType
) => {
axios
.get(authConfig....
3
votes
1
answer
441
views
Vue 3 button is jumping on v-show
Can anybody advice how can I fix this jumping button?
I am using MaterializedCSS framework.
<h3 class="my-3">{{ name }}</h3>
<hr />
<transition name="fade&...
0
votes
1
answer
440
views
C# IronXL (Excel) + LINQ memory issue
My goal is to find all the cells in an Excel containing a specific text. The Excel is quite large (about 2Mb) and has about 22 sheets. Historically we had problems with Interop, so I found IronXL ...
0
votes
0
answers
80
views
How to get data or selected tags from Materialize Chips to Flask
I've been trying to get the tags selected in a Chips field of Materialize CSS, but without success, can anyone help me?
Full HTML Template:
<form action="{{ url_for('add') }}" method=&...
0
votes
1
answer
126
views
materializecss: tabs with pagination (or indicator there is more)
Following this: https://materializecss.github.io/materialize/tabs.html there is horizontal scrolling if the number of tabs exceeds the horizontal space.
However, is there a way to indicate this to ...