- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我是 VueJS 的新手。我正在使用 Vue 和 Bootstrap 开发一个应用程序。该页面被分解为左侧边栏、顶部导航栏、中心 View 和右侧边栏,如下所示:
我想开发一个滚动条,这样只有中间的内容可以滚动
代码如下:
import GridView from 'src/components/Dashboard/Views/GridView.vue'
import ListView from 'src/components/Dashboard/Views/ListView.vue'
import DetailsView from 'src/components/Dashboard/Views/DetailsView.vue'
export default {
methods:{
changeView(){
if(this.gridView === true){
this.gridView = false;
}
else if(this.gridView === false){
this.gridView = true;
}
},
openDetailsSection() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
showSection.style.width = "80%";
// showSection.classList.remove("col-xl-12", "col-md-6");
})
},
closeDetailsSection(){
if(detailsSectionOpen === true){
detailsSectionOpen = false;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.remove("col-xl-3");
showSection.classList.remove("col-xl-9", "col-md-6");
showSection.classList.add("col-xl-12", "col-md-6");
// Remove info button
const infoButton = document.getElementById('infoButton');
if (infoButton) {
infoButton.parentNode.removeChild(infoButton);
}
},
},
data(){
return {
detailsSectionOpen: false,
gridView: true,
shared: false
}
},
components: {
ListView,
GridView,
DetailsView
},
mounted(){
let folders = document.getElementsByClassName('folder-rectangle');
folders = Array.from(folders);
folders.forEach((folder) => folder.addEventListener('click', this.showButton));
}
}
.context-menu-item:hover {
background-color: #E91E63 !important;
}
.plus-circle-btn{
font-size: 70px;
color: #E91E63;
border: none;
cursor: pointer;
}
li .btn:hover{
color: #E91E63;
}
.details-ul li{
width: 261px;
height: 29px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 14px;
text-align: left;
line-height: 1px;
padding: 5px;
}
.color{
background-color: #DCF3FD;
}
#context-menu-icon{
color: #424242;
}
.header-rectangle {
height: 155px;
background: #F5F5F5;
border: 1px solid #E0E0E0;
border-radius: 0px;
border-bottom: none;
}
.footer-rectangle {
height: 65px;
background: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 0px;
vertical-align:middle; text-align:center;
}
#image {
height: 16px;
border: 0px;
color: #878D99;
}
.file-name-style{
height: 26px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 5px 15px;
}
.file-size-style{
height: 26px;
color: #9E9E9E;
font-family: 'Source Sans Pro';
font-size: 12px;
text-align: left;
line-height: 1px;
padding: 10px 15px;
}
.breadcrumb-hr {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 25px;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.breadcrumb-hr-details {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.details-section-hr{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.folder-rectangle {
height: 63px;
background-color: #FFFFFF;
border: 1px solid rgb(189, 189, 189);
border-radius: 0px;
}
.folder-selected {
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
.file-selected {
height: 63px;
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
#folder-image{
width: 29px;
height: 20px;
color: #878D99;
font-size: 30px;
}
.context-menu{
width: 197px;
height: 400px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 5px;
box-shadow: 0 0 5px #333;
}
.context-menu-span{
padding-left: 10px;
color: #424242;
}
.btn{
background-color: none;
border: none;
color: grey;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
.folder-name-style{
text-align: left;
margin-bottom: 0px;
margin-top: 13px;
margin-left: 15px;
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.folder-size-style{
text-align: left;
margin-left: 15px;
margin-bottom: 13px;
margin-top: 8px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
color: #9E9E9E;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
}
#no-padding{
padding: 0px;
}
#grid-view{
overflow-y: scroll;
}
#grid-view::-webkit-scrollbar {
width: 1em;
}
#grid-view::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#grid-view::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
<template>
<div>
<div class="content" style="padding-top: 3px;" id="show">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;">
Files
</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="gridView === false" @click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="gridView === true" @click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
<button v-if="!detailsSectionOpen" class="btn" id="infoButton" @click="openDetailsSection">
<i class="fa fa-info-circle"></i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr">
<div>
<!-- Grid view secation begins here -->
<grid-view v-if="gridView === true" :folders="folders" :recentFiles="recentFiles" id="grid-view" >
</grid-view>
<!-- List View section begins here -->
<list-view v-if="gridView === false" :folders="folders" :recentFiles="recentFiles">
</list-view>
</div>
</div>
</div>
<details-view v-if="detailsSectionOpen" id="details"></details-view>
</div>
</template>
我正在尝试为 id="show"开发一个滚动条,这样两个条之间的内容就可以滚动了,但我做不到。
有人可以帮我解决这个问题吗?我真的很感激任何帮助。谢谢!
最佳答案
设置一个固定的高度
并使用overflow-y
,例子:
#show {
height: 600px;
overflow-y: scroll;
}
关于javascript - 如何为中心内容开发滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54975595/
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: How to align a to the middle of the page 这是一个简单的问题,应该有一个简
我想知道如何在屏幕中央的ListView中生成2个itens。 class _CategoriesState extends State { List categories = ["Anterio
我需要修复 UICollectionView 的一个小问题,当在 6s 设备尺寸上时,我得到如下布局: 但是,我想知道将它们居中以使其成为两条线的最佳方法是什么,或者我应该将它们缩小一点以便可以放置其
我尝试在 UIImageView 中居中 CAShapeLayer 但没有成功,我找到了解决方案,将其(CAShapeLayer)添加到 UIVIew,然后将 UIVIew 添加到 ImageView
一直在从线性布局和相对布局切换,因为我想实现图像的居中。 显示图片:
* { margin:0; padding:0; } /** General Style Info **/ body { background: #003d4c; co
我目前正在尝试修改我在 Wordpress 上的 Royal Slider 插件 (http://dimsemenov.com/plugins/royal-slider/) 我的目标是将所有标题的文本
我已经坚持了一段时间,因此简化了我的要求。当您单击标记时,信息窗口将打开,当用户缩放时,我希望该标记位于 map 的中心。这不起作用,但我认为它很接近: function bindInfoWindow
/* Linked Styles */ body { padding: 0 !important;
这个问题在这里已经有了答案: How do I center floated elements? (12 个答案) 关闭 7 年前。
这个问题在这里已经有了答案: Is there an equivalent to background-size: cover and contain for image elements? (1
我试图让我的页眉停留在页面的中间,不管我在什么窗口大小。 我试过使用 Bootstrap。 StackOverflow 还有这个 CSS。 .section-t
我有一个 1600 像素宽的页面。主要区域虽然只有 900 像素宽。我有一个导航应该固定在页面的中心(它是)。我的问题是当我打开页面时,页面固定在左侧而不是在打开时居中。当用户访问该网站时,我需要做什
我正在尝试找到 View 的中心。对于非旋转 View ,该值是正确的,但对于旋转 View ,它不正确,因为中心 (0,0) 正在旋转。在缩放的情况下,即使缩放后宽度和高度也保持不变 我正在使用以下
预期效果是将 Kartennummer 和 Passwort 集中。 这怎么可能? 我为此使用了一个自定义类: import 'package:flutter/material.dart'; impo
我管理着许多 Maven 项目。他们中的大多数部署到我们的内部 maven 存储库。现在我想开始向 Maven Central 发布一个项目。到目前为止,我有一个父 POM,它指定了我们内部存储库的
我试图锚定两个进展,但我看不到获得预期结果的方法。 我希望左边的进度条固定在左边,右边的条固定在中心固定(如下图所示) (下图显示调整大小的表格) 我尝试将控件放在具有各种 anchor 的停靠面板上
我正在玩 Angular 模态 ui 对话框。我想知道有什么方法可以让它居中?我发现了一个类似的问题: Twitter Bootstrap - Center Modal Dialog 但无法使其工作,
是否可以将值标签放置在条形上,使它们位于条形的中心? 如果我设置条形 align: "center",则条形上的标签将关闭且不居中。 $(function() { var d
http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-signalr-20-s
我是一名优秀的程序员,十分优秀!