materialize 相关问题

此表单字段中的第一个按钮始终自动对焦当我点击其他地方时它就消失了此表单字段中的第一个按钮始终自动聚焦当我点击其他地方时它就消失了 <form [formGroup]="addFundsForm"> <mat-form-field floatLabel="always" class="h-[118px] w-[199px]" appearance="outline"> <mat-label>Amount</mat-label> <div class="flex justify-center items-center relative top-3"> <div class="custom-input">{{customAmountCoin}} </div> <span class="text-gray-100 text-2xl font-semibold flex items-center"> <svg></svg> <div>-Coins</div> </span> </div> <div class="flex relative top-1"> <button mat-icon-button tabindex="0" (mousedown)="startDecrement()" (mouseup)="stopDecrement()" (mouseleave)="stopDecrement()"> <div class="text-white">-</div> </button> <div class="flex items-center text-sm font-semibold text-primary-500"> <input matInput style="color: #ea0a8e; font-size: 16px" formControlName="addFundsFormControl" type="number" class="text-center font-semibold text-primary-500"> </div> <button mat-icon-button tabindex="1" (mousedown)="startIncrement()" (mouseup)="stopIncrement()" (mouseleave)="stopIncrement()"> <div class="text-white">+</div> </button> </div> </mat-form-field> </form> 您可以通过两种方式解决此问题：您可以更改此行<form [formGroup]="addFundsForm">：<form [formGroup]="addFundsForm" [autofocus]="false"> 您可以添加隐藏输入来捕获自动对焦行为，如下所示： <form [formGroup]="addFundsForm"> <input type="text" style="display:none"> <mat-form-field floatLabel="always" class="h-[118px] w-[199px]" appearance="outline"> <mat-label>Amount</mat-label> ....... </form>

css angular angular-material materialize

回答 1 投票 0

如何使用 Materialise 日期选择器正确设置完整日期

我刚开始使用 Materialise Date Picker，在正确设置完整日期值时遇到了问题。下面是我的步骤... 我的 HTML 我刚开始使用 Materialize Date Picker，并且在正确设置完整日期值时遇到了问题。以下是我的步骤... 我的 HTML <div class="input-field col s6"> <input id="DatePicker" type="text" class="datepicker" /> <label class="" for="DatePicker">Date Picker</label> </div> 我的日期选择器 JavaScript var mDatePicker = document.querySelector("#DatePicker"); var optionsDPS = { disableDayFn: function (day) { console.log("value:", day); return day; } } M.Datepicker.init(mDatePicker, optionsDPS); 当我通过 Firefox 打开开发人员工具时，单击日历时会得到以下值：为什么 Materialise 将每个日期值的选取器值设置为 19:00:00？不应该是00:00:00吗？如何让这些值全部为 0，同时仍然是真实的日期值？我尝试使用 setHours(0, 0, 0, 0)，但没有成功。我只是对所有数字感到困惑，为什么 19 会出现在这个组合中.. var mDatePicker = document.querySelector("#DatePicker"); var optionsDPS = { disableDayFn: function (day) { console.log("value:", day); return day; }, defaultDate: new Date(), // Set the default date to the current date setDefaultDate: true // Enable setting the default date } M.Datepicker.init(mDatePicker, optionsDPS); 此修改应将默认日期设置为当前日期，时间设置为 00:00:00。如果想设置默认日期为特定日期，可以替换new Date()

javascript materialize

回答 1 投票 0

有什么方法可以在materializedcss中将按钮的标题从大写字母更改为小写字母吗？

我正在使用物化CSS来设计我的个人网站。当我使用该按钮时，其标题始终以大写字母显示。我试图改变它，但没有成功。谁能帮我解答一下...

materialize

回答 6 投票 0

React-leaflet 在 Modal 中无法正确显示

大家！我尝试在我的 React 项目中使用 Materialise 风格的 React-leaflet。当我打开模态组件时，我看不到地图。我安装了npm install react-leaflet，也在index.html中添加了大家！我尝试在我的 React 项目中使用 Materialise 风格的 React-leaflet。当我打开模态组件时，我看不到地图。我安装了 npm install react-leaflet，还在index.html [email protected]/dist/leaflet.css 中添加了“ 完整性=“sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=” 跨域=“”/> import React, { useEffect, useRef } from "react"; import PropTypes from "prop-types"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; export const MapModal = ({ lnglat }) => { const mapRef = useRef(null); useEffect(() => { // Clean up the map instance when the modal is closed return () => { if (mapRef.current) { mapRef.current.remove(); } }; }, []); return ( <div id='MapModal' className='modal'> <div className='modal-content'> <MapContainer center={[48.0196, 66.9237]} zoom={5} style={{ height: "50vh", width: "100%" }} ref={mapRef} > <TileLayer attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' /> <Marker position={lnglat}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer> </div> </div> ); }; MapModal.propTypes = { lnglat: PropTypes.array, }; 请帮我解决这个问题吗？将此添加到导入中import 'leaflet/dist/leaflet.css';我遇到了同样的问题，这解决了它。你需要添加一个中间组件来等待引导模态完成初始化，即从你的主组件中添加一个中间组件，在中间组件中你必须设置一个设置的超时时间，例如： useEffect(() => { setTimeout(function() { setShowMap(true); }, 2000); }, [isShowMap]); //In the return: { showMap ? < CustomMap lat = { lat } lng = { lng } setlat = { setlat } setlng = { setlng } />: < div > < /div> }

reactjs modal-dialog materialize react-leaflet

回答 2 投票 0

如何制作Materialise Jumbotron

我正在尝试构建一个像这样的注册页面注册页面我检查了源代码，它使用角度材料设计。所以无法弄清楚如何使用 Macialize.css 本身来做到这一点。我...

css angularjs materialize

回答 2 投票 0

物化中的选择框无响应

我正在使用带有节点后端和js前端的materialize。我正在尝试提交表格。我有以下内容：我正在使用带有节点后端和js前端的materialize。我正在尝试提交表格。我有以下内容： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <div class="container"> <div class="row"> <div class="col s6"> <div class="card"> <div class="card-content"> <span class="card-title">Form Example</span> <div class="input-field"> <input type="text" id="zip" name="zip" class="validate" pattern="\d{5}" title="Please enter a 5-digit zip code" /> <label for="zip">Zip Code</label> </div> <div class="input-field"> <select id="area" name="area" class="validate"> <option value="2000">2,000 sqft</option> <option value="3000">3,000 sqft</option> </select> <label for="area">Area</label> </div> </div> <div class="card-action"> <a class="waves-effect waves-light btn" id="submitButton">Submit</a> </div> </div> </div> </div> </div> <div id="hot-container" class="mt-4">  </div> 我的第二个字段（区域）有错误，该字段呈灰色且半可见。它没有反应。我做错了什么？看起来 validate 类不适用于 select 元素。 docs 中找到的示例并未说明 validate 类。也许，验证（即拒绝任何空值）可能已内置在 select 元素中。关于半可见的问题，你能检查一下height类是否有固定的div.container值吗？理想情况下，容器应根据其承载的物品数量进行扩展。

javascript node.js materialize

回答 1 投票 0

具体化。访问自动完成元素属性

我想答案应该很简单，但我要疯狂地寻找答案。假设我有一个像这样定义的 Materialize 自动完成元素。 $('#element_id).autocomplete({ ...

properties autocomplete materialize

回答 1 投票 0

如何在nodejs中使用MaterializeCSS？

我运行了以下命令： npm 安装 Materialize-css --save npm 安装hammerjs --save npm 安装 jquery --save 然后在我的 app.js 中，var Materialize = require('materialize-css'); 乙...

node.js materialize

回答 7 投票 0

如何更改Material UI（版本5.14.6）文本字段组件的光标起始位置？

我们如何更改Material UI 文本字段组件的光标起始位置？我们正在使用最新版本的 Material UI，并且我们在我的项目中使用 Test Field 组件，但是 cu...

reactjs material-ui angular-material material-design materialize

回答 1 投票 0

物化中复选框的重叠问题

我建立了一个测验网站，并使用“Materialize”进行设计。现在我遇到的问题是答案的文本相互覆盖。复选框之间的距离...

html css checkbox materialize

回答 1 投票 0

sweetalert 2 中的输入不可输入或无法在materializecss 模式中输入

我有一个模式，当我点击添加账单按钮时，它会弹出sweetalert2，下面提供的代码来自他们的文档，所以我认为代码没有问题，无论如何，我的

javascript css materialize sweetalert sweetalert2

回答 6 投票 0

有没有办法解决物化CSS下拉菜单上的这个框问题？

我正在学习物化CSS。当我将鼠标悬停在下拉列表上时遇到错误。它创造了奇怪的盒子。如何修复它我的代码是我正在学习Materialize CSS。当我将鼠标悬停在下拉列表上时遇到错误。它创造了奇怪的盒子。怎么解决我的代码是 <nav class="blue darken-4"> <div class="container"> <div class="nav-wrapper"> <a href="#" class="brand-logo">FSPN</a> <ul class="right hide-on-med-and-down"> <li><a href="#">Home</a></li> <li><a href="#" >About FSPN</a></li> <li><a href="#" class="dropdown-trigger" data-target="practice-menu">Practice <i class="fa-solid fa-caret-down fa-sm right"></i></a></li> <li><a href="#">Team</a></li> <li><a href="#">Contact</a></li> </ul> </div> <ul id="practice-menu" class='dropdown-content'> <li ><a href="#">Corporate Law</a></li> <li ><a href="#">Banking & Finance</a></li> <li ><a href="#"> Litigation & Arbitration</a></li> <li ><a href="#">Conveyance & Real Estate</a></li> <li ><a href="#">Loan Recoveries & Restructuring</a></li> <li ><a href="#">Mining, Oil & Gas</a></li> <li ><a href="#">Tax Law</a></li> <li ><a href="#">Regulatory</a></li> </ul> </div> </nav> 我通过添加到 CSS 来修复 .dropdown-trigger{ border: none; outline: none; }

css materialize

回答 1 投票 0

选项未在模板中呈现

在 Django 中工作。我在模型中添加了选择和必要的字段。这些选项已在管理站点中很好地填充，但未在模板中呈现。我已经仔细检查过好几次了

django forms materialize

回答 0 投票 0

materialize 相关问题

最新问题