如何放大Swagger UI中的参数显示盒子？

解决方法 #

Connexion集成的Swagger UI默认样式限制了输入框宽度，可通过以下方式调整：

1. 自定义CSS覆盖样式

在项目中创建static/swagger-custom.css文件，添加样式：

/* 调整路径参数输入框宽度 */
.swagger-ui .parameters-col_description input[type="text"] {
    min-width: 300px; /* 按需设置，比如400px */
    max-width: 100%;
}

初始化Connexion应用时，配置加载该自定义CSS：

from connexion import App

app = App(__name__, specification_dir='./')
app.add_api('你的API规范文件名.yaml', 
            options={
                'swagger_ui': True,
                'swagger_ui_config': {
                    'custom_css': '/static/swagger-custom.css'
                }
            })

if __name__ == '__main__':
    app.run(port=5000)

2. 适配不同Swagger UI版本

如果上述CSS不生效，打开浏览器开发者工具，查看输入框的具体类名，调整CSS选择器即可——不同版本的Swagger UI类名可能略有差异。

内容的提问来源于stack exchange，提问作者dmjy