java - Java - Thymeleaf - HTML:使用开关大小写的颜色字母:不需要的段落/换行符
问题描述
我正在研究一个由基因、蛋白质和分析组成的生物数据库。使用 Spring Boot 和 Thymeleaf,我想建立一个 Web 可视化。每个基因都显示在带有名称、描述和序列的页面上。该序列由字母 A、T、G 和 C 组成。我想为这些字母(作品)上色。但是,每个字母都写在一个新行中,而不是写到行满(然后写到下一行等)。在gene.html中,我在定义颜色时使用了small-tag(之前尝试过p,尽管这是我的问题的原因),但使用small没有帮助。
我希望,我提供的代码片段已经足够了(如果没有,告诉我你需要什么)
基因.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
<title>Gene</title>
<meta http-equiv="Content-Type" content="content/html; charset=UTF-8">
</head>
<body>
<!--import header-->
<header th:include="header"></header>
<div id="main">
<!--GeneID as page heading -->
<h2 th:text="'Gene: '+${identifier}"></h2>
<!--Gene description -->
<p th:text="${description}"></p>
<br/>
<!-- Sequence -->
<h3 th:text="'Sequence:'"></h3>
<!-- For each char in sequence-->
<th:block th:each="char:${sequence}">
<!--Print the char. Possibility to color encode the bases utilizing switch/case
<small th:text="${char}"></small> -->
<div th:switch="${char}">
<div th:case="'A'">
<small style="color: blue" th:text="${char}"></small>
</div>
<div th:case="'T'">
<small style="color: yellow" th:text="${char}"></small>
</div>
<div th:case="'C'">
<small style="color: forestgreen" th:text="${char}"></small>
</div>
<div th:case="'G'">
<small style="color: red" th:text="${char}"></small>
</div>
</div>
</th:block>
<br/>
<br/>
<!--Protein encoded by gene -->
<h3>Protein:</h3>
<a th:href="${'protein?id='+protein}" th:text="${protein}"></a>
</div>
</body>
</html>
基因控制器.java
package gui.spring.controller;
import db.sample.Gene;
import db.sample.Protein;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.Optional;
import static main.Main.query;
/**
* @author Miriam Mueller
* @since 05-12-2018
* @version 1.0
* Class to handle view of one Gene. Gene name, description and sequence are shown. The encoded protein is linked.
*/
@Controller
public class GeneController {
//All calls of localhost:8080/gene get to this controller
@RequestMapping(value = "/gene", method = RequestMethod.GET)
public String einGenAnzeigen(Model model, @RequestParam(value="id") String id) {
model.addAttribute("geneSize",query.getGenes().size());
model.addAttribute("proteinSize",query.getProteins().size());
model.addAttribute("assaySize",query.getAssays().size());
Optional<Gene> gene = query.getGeneByName(id);
if(gene.isPresent()) {
// if gene exists
String description = gene.get().getDesc();
String[] arraySeq = gene.get().getSequence().split("(?!^)");
Protein protein = query.getGeneByName(id).get().getProtein();
model.addAttribute("identifier", gene.get().getIdentifier()); //GenID
model.addAttribute("sequence",arraySeq); //gene sequence
model.addAttribute("description",description); //description
model.addAttribute("protein",protein.getIdentifier()); //encoded protein
}else{
// error messages, if no gene with called id exists
model.addAttribute("gene", "There is no Gene with this ID.");
model.addAttribute("protein","There is no Gene with this ID.Therefore, no reference protein was found.");
model.addAttribute("sequence","");
model.addAttribute("description","");
}
// name of html-template
return "gene";
}
}
感谢您的时间和精力:)
解决方案
发生的事情是该div
元素是一个块元素,这意味着它们将垂直堆叠而不是水平堆叠。例如,当您遍历序列时:
<th:block th:each="char:${sequence}">
<!--Print the char. Possibility to color encode the bases utilizing switch/case
<small th:text="${char}"></small> -->
<div th:switch="${char}">
<div th:case="'A'">
<small style="color: blue" th:text="${char}"></small>
</div>
<div th:case="'T'">
<small style="color: yellow" th:text="${char}"></small>
</div>
<div th:case="'C'">
<small style="color: forestgreen" th:text="${char}"></small>
</div>
<div th:case="'G'">
<small style="color: red" th:text="${char}"></small>
</div>
</div>
</th:block>
每一个div
都将显示在一个新的行中。您可以通过将display
这些 div 更改为inline
或inline-block
<div th:case="'A'" style="display:inline-block;">
<small style="color: blue" th:text="${char}"></small>
</div>
<div th:case="'T'" style="display:inline-block;">
<small style="color: yellow" th:text="${char}"></small>
</div>
<div th:case="'C'" style="display:inline-block;">
<small style="color: forestgreen" th:text="${char}"></small>
</div>
<div th:case="'G'" style="display:inline-block;">
<small style="color: red" th:text="${char}"></small>
</div>
或使用默认显示不是的另一个元素,block
例如span
. 删除div's
will 也可以,因为small
它也是一个内联元素。
推荐阅读
- ios - 单个本地化字符串中的多个复数
- python - 使用 Pandas 在 Python 中处理复杂的管道分隔 CSV/平面文件导入
- rust - 在 Rust 中实现 PHP array_column
- xml - 如何修改 xml 文件以处理这些查询?
- sql - 如何确保所有执行系列数据修改操作?
- javascript - 标准协议路径的规则是什么?
- javascript - 重写滚动事件或误触发滚动事件
- pandas - 如果总唯一值小于特定编号,如何查看每个 cloumns 的总 unqiue 值。在我的数据集中
- mysql - 使用 Sequelize 终止正在运行的查询
- python - 在 TF 2.1 中展平一个非常参差不齐的张量