小编Fra*_*ank的帖子

VSCode中CSS的代码折叠

我无法折叠代码以在Css的编辑器中工作。在html和js中，我都可以根据注释折叠代码，这使我可以创建整洁的组。但是在CSS中，您无法折叠注释。有谁知道一种方法来启用此功能或另一个在Css文件中创建代码组的不错的技巧？这是一些图片。

在这里，您可以看到“自己的课程”注释旁边没有减号按钮：

但是在这里您可以看到注释在js中很好地折叠，这使我可以创建漂亮的代码组：

css editor indentation folding visual-studio-code

Fra*_*ank

2018 06-11

3
推荐指数

1
解决办法

857
查看次数

获取 Angular 自动完成值

所以我遵循了它的 Angular Material Autocomplete 的 Angular 文档，但我已经花了两天时间从自动完成中获取选择的价值。基本上我想要的是自动完成显示人类的名字和姓氏，但选项的值必须是整个人类对象。然后，我只想在选择 Human 时对 SelectedHuman 进行 console.log。对此的任何解决方案可能都可以。

这是一个演示项目：https : //stackblitz.com/edit/angular-hnu6uj

这是html文件：

<input [(ngModel)]="SelectedHuman" (change)="OnHumanSelected()" matInput [formControl]="MyControl" [matAutocomplete]="auto" placeholder="Human">

<mat-autocomplete #auto="matAutocomplete" [displayWith]="AutoCompleteDisplay">
  <mat-option *ngFor="let human of arrFilteredHumans | async" [value]="human">
    {{human.Name}} - {{human.Surname}}
  </mat-option>
</mat-autocomplete>

Run Code Online (Sandbox Code Playgroud)

这是 ts 文件：导出类 AutocompleteDisplayExample 实现 OnInit {

  SelectedHuman: Human;
  MyControl = new FormControl();
  arrFilteredHumans: Observable<Human[]>;
  arrHumans = [
    new Human('1K59DN3', 27, 'John', 'Smith'),
    new Human('9VH23JS', 67, 'William', 'Shakespeare'),
    new Human('0QNF1HJ', 44, 'Elon', 'Musk')
  ];

  ngOnInit() {
    this.arrFilteredHumans = this.MyControl.valueChanges.pipe(
      startWith(''), …

Run Code Online (Sandbox Code Playgroud)

autocomplete angular-material angular

Fra*_*ank

lucky-day

2
推荐指数

1
解决办法

7072
查看次数

为什么我的 div 在悬停时都显示在同一位置？

我想创建一个顶级菜单。我已经创建了这个，它可以让组件在必须时变得可见，但我的问题是我不知道如何让每个组件menu-sub-item都显示在悬停按钮下。

body {
  margin: 0
}

.menu {
  height: 20px;
  width: 100vw;
}

.menu-main-item:hover+.menu-sub-item {
  display: flex;
  position: absolute;
  top: 20px;
}

.menu-sub-item {
  display: none;
  z-index: 1;
  flex-direction: column;
}

.menu-sub-item:hover {
  display: flex;
  position: absolute;
  top: 20px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="menu">
  <button class="menu-main-item">This is 1</button>
  <div class="menu-sub-item">
    <button>Sub 1.1</button>
    <button>Sub 1.2</button>
    <button>Sub 1.3</button>
  </div>
  <button class="menu-main-item">Ok 2</button>
  <div class="menu-sub-item">
    <button>Sub 2.1</button>
    <button>Sub 2.2</button>
    <button>Sub 2.3</button>
  </div>
  <button class="menu-main-item">Another 3</button>
  <div class="menu-sub-item">
    <button>Sub 3.1</button>
    <button>Sub 3.2</button> …

Run Code Online (Sandbox Code Playgroud)

html css flexbox

Fra*_*ank

2020 01-16

2
推荐指数

1
解决办法

69
查看次数

在单独的线程中执行 run_coroutine_threadsafe

我有一个永远持续运行的脚本（它检查文件中的更改）。每当制作奇怪的文件时，我都需要发送 Discord 消息。

问题是，事件监视函数（def run(self):如下）来自子类，所以我无法将其更改为async def run(self):. 因此我不能使用await channel.send()
我的解决方案是像这里解释的那样使用run_coroutine_threadsafe： https: //stackoverflow.com/a/53726266/9283107。效果很好！但问题是，消息被放入队列中，并且在该脚本完成之前永远不会发送（在我的情况下是：永远不会）。我假设发送消息函数被放入该脚本所在的线程中，因此线程永远不会到达它们？

也许我们可以将其放入run_coroutine_threadsafe一个单独的线程或其他东西中？这是我能做的最小的例子，它仍然显示了我的子类问题。

import discord
import os
import asyncio
import time

# CHANNEL_ID = 7659170174????????
client = discord.Client()
channel = None

class Example():
    # Imagine this run comes from a subclass, so you can't add sync to it!
    def run(self):
        # await channel.send('Test') # We can't do this because of the above comment
        asyncio.run_coroutine_threadsafe(channel.send('Test'), _loop)
        print('Message sent')

@client.event
async def …

Run Code Online (Sandbox Code Playgroud)

python async-await python-asyncio discord.py

Fra*_*ank

lucky-day

2
推荐指数

1
解决办法

2658
查看次数

使用 Flexbox 时垂直对齐输入

如何让输入框垂直居中对齐？我尝试将 vertical-align: "middle" 添加到几个地方，但没有取得任何成功。我觉得 flexbox 是这里问题的一部分？

.container {
  /* Flex Properties */
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

.item {
  background-color: orange;
}

label {
  width: 100px;
  display: inline-block;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="item">
    <label>Gee my iefwaf fwats: </label>
    <input>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

html css flexbox

Fra*_*ank

2019 01-12

1
推荐指数

1
解决办法

4273
查看次数

在悬停时着色HTML表格边框

tr当我将鼠标悬停在它上面时,我希望有a的顶部和底部边框来改变颜色.我遇到的问题是tr上面的悬停式覆盖悬停样式(至少这是我认为正在发生的事情).

在我的示例中,第一个项目正确悬停,但在第二个和第三个项目中,只有底部边框突出显示:

table {
  border-collapse: collapse;
}

th {
  background-color: rgb(231, 231, 231);
}

td {
  border-bottom: 2px solid rgb(214, 214, 214);
  border-top: 2px solid rgb(214, 214, 214);
}

table tr:hover td {
  border-bottom: 2px solid red;
  border-top: 2px solid red;
}

Run Code Online (Sandbox Code Playgroud)

<table>
  <tr>
    <th>COMPANY</th>
    <th>CONTACT</th>
    <th>COUNTRY</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

Run Code Online (Sandbox Code Playgroud)

html css

Fra*_*ank

lucky-day

1
推荐指数

1
解决办法

184
查看次数

填补剩余的窗户高度

我知道这个问题之前已被问过多次,但我似乎没有把我的榜样弄好.如何让紫色div填充窗口的剩余高度？

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 100%;
            margin: 0;
        }

        .container {
            display: flex;
            flex-flow: column;
            height: 100%;
        }

        .topbox {
            background-color: red;
            flex: 0 1 40px;
        }

        .bottombox {
            background-color: purple;
            flex: 1 1 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="topbox"></div>
        <div class="bottombox"></div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

html css flexbox

Fra*_*ank

lucky-day

0
推荐指数

1
解决办法

92
查看次数