如何用GWT以编程方式设置CSS类的宽度？

Question

我正在开发GWT应用程序并且我有一个错误：我的按钮浏览（这是FileUploadField类）的宽度比正常大，请看一下：

当我检查元素并将元素的宽度设置为20像素时，一切正常。但是我不知道如何在GWT中以编程方式设置（CSS中该类的名称是＆＃34; x-form-file＆＃34;），我尝试了一些来自互联网的解决方案，如：

var driverList = [];

$.ajax({
    url: './php/GetDriverList.php',
    type: 'post',
    success: function(response){
        console.log(response);
        var tempList = JSON.parse(response);
        for(var i = 0; i < tempList.length; i++){
            driverList.push(tempList[i]);
        }
        buildTable(driverList);
    }
});

但没有成功。有人可以帮助我如何使用我的gwt代码以编程方式在css中获取该类吗？

Answer 1

您需要创建一个CSS客户端软件包（一个接口），如下所示：

interface MyCss extends CssResource {
  String className();
}

之后，你需要在你的类中将这个bundle作为一个实例变量：

@UiField MyCss风格;

然后在您的代码中，您可以使用以下命令添加样式： fileUploadField.addStyleName（style.className（））

在代码中使用css是某种模板，详细示例检查GWT网站：LINK

Answer 2

1. 您可以将.x-form-file { width :20px;}添加到项目的style.css中，这将覆盖该样式。

2. 您可以尝试：fileUploadField.getElement().getStyle().setWidth(20, Unit.PX);

拉​​兹