登录 注册

登录

问题 content builder怎么写表单的布局代码呢?

更多
2017年05月13日 11:42 #1 作者: 武松
<table style="height: 246px; width: 705px;">
	<tbody>
		<tr>
			<td>
				<div class="control-group form-inline">
					<div class="control-label">{ItemNumber:label}</div>
					<div class="controls">{ItemNumber:item}</div>
				</div>
				<div class="control-group form-inline">
					<div class="control-label">{projectname:label}</div>
					<div class="controls">{projectname:item}</div>
				</div>
				<div class="control-group form-inline">
					<div class="control-label">{Projectmanager:label}</div>
					<div class="controls">{Projectmanager:item}</div>
				</div>
				<div class="control-group form-inline">
					<div class="control-label">{Itemclassification:label}</div>
					<div class="controls">{Itemclassification:item}</div>
				</div>
				<div class="control-group form-inline">
					<div class="control-label">{projectsource:label}</div>
					<div class="controls">{projectsource:item}</div>
				</div>
			</td>
			<td>
				<div class="control-group form-inline">
					<div class="control-label">{Projectlevel:label}</div>
					<div class="controls">{Projectlevel:item}</div>
				</div>
				<div class="control-group form-inline">
					<div class="control-label">{Projectbase:label}</div>
					<div class="controls">{Projectbase:item}</div>
					<div>&nbsp;</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月13日 11:42 #2 作者: 武松
这个代码前台显示不理想,底下有空格,我删了保存,还是会出来,是什么问题?这个布局的目的是显示双栏。

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月13日 23:25 #3 作者: Joomla之门
请提供一下网站前后台的相关账号、网址,以及具体问题的截图(比如你说的“底下有空格”到底指什么?)。由于我对 content builder 这个组件很陌生,所以需要你尽可能提供详细的资料,以便我准确理解你的问题。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月14日 01:02 #4 作者: 武松
就是我贴的代码地下有这个“&nbsp”空格,我删掉在编辑器里保存就会又生成。

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月14日 08:57 #5 作者: Joomla之门
你在第一个帖子里面提供的代码,末尾就有一行:
<div>&nbsp;</div>

这个代码就表示一个空格。你把这一行删除试试。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月14日 09:34 #6 作者: 武松
删掉保存就又出现了,这段代码有什么问题吗?

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月14日 09:49 #7 作者: 武松
本帖含有机密信息

本帖含有机密信息

这个前台单栏,想布局上双栏,怎么写代码呢?

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月15日 22:04 #8 作者: Joomla之门
刚才根据你提供的管理员账号,我进入了你网站后台,进入了那个 view 的编辑界面,看到编辑器窗口里面输入的是以大括号(花括号)表示的替换标记。如果将编辑器切换到源代码模式,就能看到 DIV 容器包含着这些替换标记。

看到这里,我有个疑问:

这些替换标记是你自己输入的,还是系统自动生成的?
如果是你自己输入的,你是在“源代码模式”直接输入 DIV 容器那种格式,还是在“WYSIWYG”模式输入花括号这样的格式?
你想要“双栏”是怎么个双栏法?能否说明白点?


另外,你所说的那个“删不掉的空格”的问题,解决了没有?我登录进去好像找不到那个空格了,看到的代码与你在第一个帖子里面提供的代码都不同。不知道是我进错了页面,还是你已修改了代码,还是你已经解决了问题?

顺便提醒一下:麻烦你以后提问的时候,把问题描述清楚、清楚、清楚、清楚,重要的事情我说了4遍,不知道能否让你明白?我每次看你提的问题都非常辛苦,几乎不来来回回问几遍是弄不明白你的问题的。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月15日 23:51 #9 作者: 武松
是系统自动生成的布局,前台看表是单栏的,想变成双栏好看点,你看前台,添加记录的表格很长,感觉不太好,怎么写代码,变成双栏,是这个问题。前面的代码不管了

登录 或者   注册一个会员帐号 来参与讨论

更多
2017年05月16日 09:05 #10 作者: Joomla之门
既然是系统自动生成的,那就直接针对系统生成的结果来处理。直接看源代码:
<div class="control-group form-inline">
<div class="control-label">{copyright_owner:label}</div>
<div class="controls">{copyright_owner:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{Registration_number:label}</div>
<div class="controls">{Registration_number:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{The_name_of_the_copyright:label}</div>
<div class="controls">{The_name_of_the_copyright:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{Publication_date:label}</div>
<div class="controls">{Publication_date:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{All_authors:label}</div>
<div class="controls">{All_authors:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{Type_of_copyright:label}</div>
<div class="controls">{Type_of_copyright:item}</div>
</div>
<div class="control-group form-inline">
<div class="control-label">{The_original_work:label}</div>
<div class="controls">{The_original_work:item}</div>
</div>


这段代码没有使用表格(table),而是用了 DIV。实现双栏的话,table 方式最简单, DIV 稍微复杂一些。从上述源代码看,原本的设计是“单栏”布局,因为同一级的 DIV 容器默认是“纵向排列(上下)”,而不是横向排列。所以,如果你想改成双栏,就需要手工添加一些额外的 DIV 容器对这些同级 DIV 进行分组,把上述字段变成每组两个字段为同一级,接下来两个字段为同一级,而他们的上一级则为同一级。简单示范如下:

<div class="row1">
<div class="control-group form-inline  left">
<div class="control-label">{copyright_owner:label}</div>
<div class="controls">{copyright_owner:item}</div>
</div>
<div class="control-group form-inline right">
<div class="control-label">{Registration_number:label}</div>
<div class="controls">{Registration_number:item}</div>
</div>
</div>
 
<div class="row2">
<div class="control-group form-inline left">
<div class="control-label">{The_name_of_the_copyright:label}</div>
<div class="controls">{The_name_of_the_copyright:item}</div>
</div>
<div class="control-group form-inline right">
<div class="control-label">{Publication_date:label}</div>
<div class="controls">{Publication_date:item}</div>
</div>
</div>
 
 
<div class="row3">
<div class="control-group form-inline left">
<div class="control-label">{All_authors:label}</div>
<div class="controls">{All_authors:item}</div>
</div>
<div class="control-group form-inline right">
<div class="control-label">{Type_of_copyright:label}</div>
<div class="controls">{Type_of_copyright:item}</div>
</div>
</div>
 
<div class="row4">
<div class="control-group form-inline left">
<div class="control-label">{The_original_work:label}</div>
<div class="controls">{The_original_work:item}</div>
</div>
</div>

我添加了几个 DIV 容器,对你的字段进行了分组及分级。请仔细看新增 DIV 及新增的 class,原来纵向排列的 1 3 5 7 增加了 “left” 这个类,原来的 2 4 6 增加了 “right” 这个类。

然后,通过自定义 CSS 来实现 DIV 的双栏效果(让 left 属性的字段靠左,让 right 属性的字段靠右):

#adminform .left {
  margin-left: 10%;
  width: 40%;
}
 
#adminform .right {
  float: right;
  margin-right: 10%;
  position: relative;
  top: -71px;
  width: 40%;
}

从前台看,这7个字段就被分成了两栏(第4行只有1个字段所以仍然靠左)。我已经帮你操作了,你验收结果即可。

最后解释一下:我并非编程高手,也不是 CSS 专家。上述代码或许仍有不够高明之处,暂且抛砖引玉。如果题主对 DIV 分栏这种技术有兴趣,建议自行百度(或谷歌)进行深入学习。

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论