标签: materialize

Materialize.css 从输入元素中删除样式

我想让 Materialize.css 卡在双击时可编辑。为此，我将输入放在卡片 div 中，而不是 p 中。

div.row
each cards
  div.col.m4.s12
    div.card.teal
      div.card-content.white-text
        if openCard
          //input(type='text' value='#{text}')              
          textarea.materialize-textarea #{text}
        else                   
          p #{text}

Run Code Online (Sandbox Code Playgroud)

问题是输入（和文本区域）元素具有广泛的材料设计样式，包括输入下方的线条。在其他场合它看起来很整洁，但在卡片内部它完全没有必要。

有没有办法从输入元素中删除样式，以便它可以在双击编辑模式下使用？

或者也许还有其他解决方案，如何通过双击卡片进行编辑，而不涉及重复使用以前样式的元素？

ps 我在 Meteor 中运行它，并且有 Jade 预处理器。然而，这些事实不应影响问题或答案。

javascript css materialize

Mar*_*als

2015 05-12

3
推荐指数

1
解决办法

1万
查看次数

Canvas 元素未在 iOS 设备上呈现

我的网站上有一个画布元素，可以在桌面浏览器和 Android 设备上完美呈现，但不会在 iOS 设备（iPad、iPhone）上呈现 - ios 上的 Safari 和 Chrome 都不会。我使用 Materialise 作为我的 CSS 框架。

我需要在代码中添加一些内容吗？

这是现场版本

var next; //initialize for interval
	//paint random colored pattern on profile screen
	function paintCanvas() {

		const c = document.querySelector("#canvas");
		const ctx = c.getContext("2d");
		c.width = window.outerWidth;

		const width = c.width;
		const height = 612; //canvas height

		const min = 0;
		const max = width;
		const yMid = height/2;
		var y1 = yMid;
		var y2 = yMid;

		function getRandomColor(){

			let r = Math.floor(Math.random()*256); …

Run Code Online (Sandbox Code Playgroud)

html javascript canvas ios materialize

wlh*_*wlh

2017 03-10

3
推荐指数

1
解决办法

8204
查看次数

底部表单的 Bootstrap 模态

对于我的上一个项目，我在网站上使用了Material Design，现在我切换到Bootstrap。现在，我正在寻找一种如何在屏幕底部向用户创建引导模式显示操作的方法。它们的行为仍然与常规情态动词相同。我正在寻找一个类似于MaterializeCSS 的底部表单模态的模态。引导程序可以做到这一点吗？或者有现有的方法可以做到吗？

html javascript css materialize twitter-bootstrap

作者

lucky-day

3
推荐指数

1
解决办法

9260
查看次数

垂直对齐文本列表上的冒号

我正在做一个网站项目，使用 Materialise 框架。

有一行文本我想垂直对齐所有冒号。这是文本的示例：

Project:Intimate House  
Location : Pulau Putri, Puri - West Jakarta - Indonesia  
Site Area : 160 sqm  
Building Area : 210 sqm  
Design Phase : 2016 
Construction Period : April 2016 - July 2017

Run Code Online (Sandbox Code Playgroud)

这是我想要的垂直对齐冒号的结果

Project                : Intimate House  
Location               : Pulau Putri, Puri - West Jakarta - Indonesia  
Site Area              : 160 sqm  
Building Area          : 210 sqm  
Design Phase           : 2016 
Construction Period    : April 2016 - July 2017

Run Code Online (Sandbox Code Playgroud)

下面是我尝试创建的代码（https://codepen.io/bukuchaga/pen/xJNdeq）HTML：

Project:Intimate House …

Run Code Online (Sandbox Code Playgroud)

html css materialize

RO6*_*635

2018 08-15

3
推荐指数

1
解决办法

9427
查看次数

将 MaterialCSS 或 Bulma 的 Sass 版本集成到 Svelte 中

我正在寻找有关如何将 Materializecss 或 Bulma 的 sass 版本集成到 Svelte 的说明。我的目标是能够将单个组件（如按钮组件或卡片组件）导入到单个 svelte 组件中。此外，我希望能够利用 Bulma 提供的 sass 变量。

我已经寻找了一些关于如何做到这一点的教程，但我还没有找到任何东西。

有任何想法吗？

materialize bulma svelte svelte-component svelte-3

Mos*_*she

lucky-day

3
推荐指数

1
解决办法

2724
查看次数

我如何将 Materialize CSS 和 JavaScript 组件集成到 Svelte 中

我是 Svelte 的新手，我想用它来构建我的下一个项目。

我想将 Materialize 用于 CSS 和 JavaScript 组件，但我找不到设置它并与 Svelte 集成的方法。

我怎么能那样做？

javascript materialize svelte

The*_*Guy

lucky-day

3
推荐指数

1
解决办法

2442
查看次数

我在Materialize CSS中遇到了这个奇怪的问题,其中侧栏与"主"面板和页脚中的内容重叠(参见图像:大多数内容在页面上被删除,标题中的"m"是标题的一部分)文本"问题提交"),即使我相信我已正确设置网格.它发生在Chrome和Safari上(我也不希望IE).这是我的文档的基本结构,其中所有下面的标记都在标记内<body>(它是一个Jinja模板,脚本包含,所有内容都位于"基础"模板中):

<header>
  <nav class="top-nav green">
    <div class="container">
      <a href = "#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a>
    </div>
    <div class="container">
      <div class="nav-wrapper"><span id="logo-container" class="brand-logo">{{ self.title() }}</span></div>
    </div>
  </nav>
  <ul id="nav-mobile" class="side-nav fixed">
    <li class="logo"><a id="logo-container" href="/" class="brand-logo">Brand Name</a></li>
    <li></li>
    <li></li>
    <li></li>
    {% block navlinks %}
    <li class="bold"><a href="/" class="waves-effect waves-teal">Back to Home</a></li>
    {% endblock %}
  </ul>
</header>
<main>
  <div class="container">
    <div class="row">
      <div class="col s12">
        {% block jumbo_content %}{% endblock %}
      </div>
    </div>
    <div class="row"> …

Run Code Online (Sandbox Code Playgroud)

html css jinja2 materialize

use*_*347

2015 07-27

2
推荐指数

1
解决办法

7161
查看次数

materialize css:即使在手机上也总是显示侧面导航？

我正在使用materialize css.我正在使用侧面导航,并希望即使在移动设备上也可以看到.我正在使用以下代码,但它不起作用.

@media only screen and (max-width: 992px) {
    .side-nav{
        visibility: visible;
        opacity: 100;
    }
}

Run Code Online (Sandbox Code Playgroud)

它一直隐藏在小屏幕上.

html css materialize

moh*_*mar

lucky-day

2
推荐指数

1
解决办法

3261
查看次数

物化网格做5列

我有div s12,我怎么能在Materialise 5列中做到？

我的代码:

<div class="col s12">
  <div class="col s12 l2"></div>
  <div class="col s12 l2"></div>
  <div class="col s12 l4"></div>
  <div class="col s12 l2"></div>
  <div class="col s12 l2"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

请帮助做5个相同的列.12/5不完全分享.

html css frameworks materialize

Blo*_*SER

2018 07-16

2
推荐指数

1
解决办法

3690
查看次数

物化网格s12在移动视图中不起作用

我正在尝试使用ruby on rails建立一个网站,它将在不同的屏幕尺寸上具有不同的样式.我正在使用materializecss这样做.

面临以下问题:

<div class="row">
  <div class="col m2 l3 blank"></div>
  <div class="col s12 m8 l6 yield">
    <%= yield %>
  </div>
  <div class="col m2 l3 blank"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

'div blank'用于'div yield'左右两侧的空白区域

我希望div.yield在大屏幕(笔记本电脑)上占50%的屏幕,中型屏幕(平板电脑)占66%,小屏幕占用100%的屏幕(手机)

当我在dekstop上的Chrome浏览器上测试时,我得到了理想的结果.在窗口调整大小时,'div yield'在宽度<600px时采用100%屏幕尺寸,在宽度> 992px时采用50%.

一切都很好,直到现在.

但是当我切换到铬的移动仿真模式时,'div yield'不接受宽度<600px的s12类,而是为宽度<600px服务m8类.

以下是两个结果的屏幕截图

左边一个是普通模式下的铬浏览器,宽度减少到357px.(这是我想要的结果

右边一个是移动仿真模式下的铬浏览器,宽度设置为357px.在这个m8类中,而不是类s12.(不想要)

截图

为什么会发生这种情况,以及如何解决这个问题？

materialize