热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

为什么MaterializeCSS会限制视口?

我正在使用MaterializeCSS库通过

我正在使用MaterializeCSS库通过Firebase构建网络应用。到目前为止,一切都进行得很顺利。视口仅占据仪表板中屏幕的一半-它会切断一半的内容!

为什么MaterializeCSS会限制视口?

我还添加了一个FAB(浮动操作按钮),其位置为absolutebottom:0;right:0;,但它仍漂浮在页面的一半以下!

为什么MaterializeCSS会限制视口?

真的很感谢您的帮助,因为它会减慢此项目的后端开发速度。

这是我的代码:























Profile Picture
add


This is how other people will see you,whether they are members or group leaders.









[Group editor here]



// When user signs in
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in
var email = user.email;
var emailVerified = user.emailVerified;
// Display email under right tab
document.getElementById("emailDisplay").innerHTML = "Hi," + user.email + ".";
// Display email in sidebar
document.getElementById("sidebar-email").innerHTML = user.email;
// Display profile picture
document.getElementById("profileImageCurrent").innerHTML = "";
// Set version to the client version defined above
document.getElementById("version").innerHTML = "You're running version " + clientVersion;
// Get user data from Firestore
var docRef = db.collection("users").doc(user.email);
docRef.get().then(function(doc) {
if (doc.exists) {
var userChurch = JSON.stringify(doc.data());
userChurch = JSON.parse(userChurch);
userChurch = userChurch["church"];
db.collection("churches").where("literalName","==",userChurch)
.get()
.then(function(querysnapshot) {
querysnapshot.forEach(function(doc) {
// doc.data() is never undefined for query doc snapshots
var literalChurch = doc.data();
literalChurch = JSON.stringify(literalChurch);
literalChurch = JSON.parse(literalChurch);
console.log(literalChurch["literalName"]);
document.getElementById("churchName").innerHTML = literalChurch["literalName"];
});
})
.catch(function(error) {
console.log("Error getting documents: ",error);
});
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:",error);
});
} else {
// User isn't logged in
window.location.replace("index.html");
}
});
// Log out user
function userLogOut() {
firebase.auth().signOut().then(function() {
window.location.replace("index.html")
}).catch(function(error) {
// If there's somehow an error logging out
window.location.replace("error.html");
});
}
function addMember() {
console.log("Feature has not yet been implemented.");
M.toast({html: 'This feature has not yet been implemented!'})
}
// the css
nav {
padding-left: 20px;
padding-right: 20px;
}
nav i {
color: #ffffff;
}
.email {
font-size: 20px;
}
.s12 {
padding-left: 20px;
padding-right: 20px;
font-size: 20px;
}
.version {
font-size: 20px;
}
.tabs .indicator {
background-color: #039be5 !important;
}
.tabs .active {
background-color: #039be5;
}
.fixed-action-btn {
position: absolute !important;
bottom: 0;
right: 0;
}
.membersEditor {
height: 100%;
}
.addphoto {
color: white;
padding: 0px;
width: 100%;
}
#accountInfo {
height: 100% !important;
}




推荐阅读
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 本文深入解析了Java面向对象编程的核心概念及其应用,重点探讨了面向对象的三大特性:封装、继承和多态。封装确保了数据的安全性和代码的可维护性;继承支持代码的重用和扩展;多态则增强了程序的灵活性和可扩展性。通过具体示例,文章详细阐述了这些特性在实际开发中的应用和优势。 ... [详细]
  • 浅析python实现布隆过滤器及Redis中的缓存穿透原理_python
    本文带你了解了位图的实现,布隆过滤器的原理及Python中的使用,以及布隆过滤器如何应对Redis中的缓存穿透,相信你对布隆过滤 ... [详细]
  • JUC(三):深入解析AQS
    本文详细介绍了Java并发工具包中的核心类AQS(AbstractQueuedSynchronizer),包括其基本概念、数据结构、源码分析及核心方法的实现。 ... [详细]
  • IOS Run loop详解
    为什么80%的码农都做不了架构师?转自http:blog.csdn.netztp800201articledetails9240913感谢作者分享Objecti ... [详细]
  • 深入解析HTML5字符集属性:charset与defaultCharset
    本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset,帮助开发者更好地理解和应用这些属性,以确保网页在不同环境下的正确显示。 ... [详细]
  • importpymysql#一、直接连接mysql数据库'''coonpymysql.connect(host'192.168.*.*',u ... [详细]
  • MySQL 5.7 学习指南:SQLyog 中的主键、列属性和数据类型
    本文介绍了 MySQL 5.7 中主键(Primary Key)和自增(Auto-Increment)的概念,以及如何在 SQLyog 中设置这些属性。同时,还探讨了数据类型的分类和选择,以及列属性的设置方法。 ... [详细]
  • 本文详细介绍了 InfluxDB、collectd 和 Grafana 的安装与配置流程。首先,按照启动顺序依次安装并配置 InfluxDB、collectd 和 Grafana。InfluxDB 作为时序数据库,用于存储时间序列数据;collectd 负责数据的采集与传输;Grafana 则用于数据的可视化展示。文中提供了 collectd 的官方文档链接,便于用户参考和进一步了解其配置选项。通过本指南,读者可以轻松搭建一个高效的数据监控系统。 ... [详细]
  • PTArchiver工作原理详解与应用分析
    PTArchiver工作原理及其应用分析本文详细解析了PTArchiver的工作机制,探讨了其在数据归档和管理中的应用。PTArchiver通过高效的压缩算法和灵活的存储策略,实现了对大规模数据的高效管理和长期保存。文章还介绍了其在企业级数据备份、历史数据迁移等场景中的实际应用案例,为用户提供了实用的操作建议和技术支持。 ... [详细]
  • 在配置Nginx的SSL证书后,虽然HTTPS访问能够正常工作,但HTTP请求却会遇到400错误。本文详细解析了这一问题,并提供了Nginx配置的具体示例。此外,还深入探讨了DNS服务器证书、SSL证书的申请与安装流程,以及域名注册、查询方法和CDN加速技术的应用,帮助读者全面了解相关技术细节。 ... [详细]
  • 在ElasticStack日志监控系统中,Logstash编码插件自5.0版本起进行了重大改进。插件被独立拆分为gem包,每个插件可以单独进行更新和维护,无需依赖Logstash的整体升级。这不仅提高了系统的灵活性和可维护性,还简化了插件的管理和部署过程。本文将详细介绍这些编码插件的功能、配置方法,并通过实际生产环境中的应用案例,展示其在日志处理和监控中的高效性和可靠性。 ... [详细]
  • 技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志:使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
author-avatar
手机用户2502938985
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有