小门没有拿起 CSS

Question

我正在使用来自 http://www.7thweb.net/wicket-jquery-ui/ 的 Wicket JQuery UI 项目。我已经成功地创建了一个可排序的解决方案，它允许我在 2 个以上的可排序列表上使用 JQuery 中的 connectWith 功能。我想通过使用 JQuery 占位符选项来扩展此解决方案，以显示可排序项将被删除的位置。我可以在生成的 javascript 中看到占位符选项，但我在占位符选项中输入的 CSS class 似乎未正确应用。

我已经在 wicket:head 标签中添加了 CSS，但仍然没有被选中。但是，如果我在 IE11 中调试页面并手动将样式添加到 DOM Explorer Style 选项卡，占位符或多或少会响应 JQuery 示例如何在此处工作，https://jqueryui.com/sortable/#placeholder.

这告诉我该选项有效，但 CSS 未被拾取。我错过了什么？

谢谢

编辑：第一行是在我的 class 中设置 jquery 选项。第二行显示占位符选项是 Wicket javascript 输出中设置的最后一个选项。我还添加了占位符引用的 CSS，并显示 CSS 已正确添加到 Wicket 应用程序。

//sets the JQuery option. Used to also setup the connectWith and forcePlaceholderSize properties.
this.options.set( "placeholder", Options.asString( "itemPlaceholder" ) );

//Wicket Javascript output
jQuery('#crewOrder20').sortable({ "receive": function (event,ui) {var attrs = {"u":"./dashboard?0-1.IBehaviorListener.1-dashboardPanel-webMarkupContainer-crewSchedules-0-crewSchedule-box-boxBody-availability-0-crewOrder","c":"crewOrder20"};var params = [{"name":"hash","value":ui.item.data('hash')},{"name":"index","value":ui.item.index()}]; attrs.ep = params.concat(attrs.ep || []); Wicket.Ajax.ajax(attrs); } , "connectWith": "list of sortables", "forcePlaceholderSize": "true", "update": function (event,ui) { var attrs = {"u":"./dashboard?0-1.IBehaviorListener.0-dashboardPanel-webMarkupContainer-crewSchedules-0-crewSchedule-box-boxBody-availability-0-crewOrder","c":"crewOrder20"}; var params = [{"name":"hash","value":ui.item.data('hash')},{"name":"index","value":ui.item.index()}]; attrs.ep = params.concat(attrs.ep || []); Wicket.Ajax.ajax(attrs); } , "placeholder": "itemPlaceholder" });;

//CSS
.itemPlaceholder{ 
height: 1.5em; 
line-height: 1.2em; 
backaground: yellow;

}

private Styles() {
    super( Styles.class, "style.css" );
}

public static Styles getInstance() {
    return StylesHolder.INSTANCE;
}

private static class StylesHolder {
    public static final Styles INSTANCE = new Styles();
}

//setting the CSS class in the Wicket app
bundles.addCssBundle( App.class, "style-" + Version.Info.getVersion() + ".css",
            (CssResourceReference) PrettifyCssResourceReference.INSTANCE,
            Styles.getInstance() );

这里 fiddle 展示了它应有的功能。

编辑：进一步编辑。我已确认 CSS 已应用于我通过 Wicket 设置的其他 class 属性。

//this correctly applys the dispatch CSS to this label
label.add( AttributeModifier.append( "class", "dispatch" ) );

Answer 1

使 CSS 规则更具体，例如body div .itemPlaceholder {....}。 jQuery UI css 文件在您的 CSS 片段之后加载并覆盖它。

小门没有拿起 CSS

Wickets not picking up CSS

wicket