What sets column width / distribution in Yii2's DetailView?

Yii 2.0 General Discussions
1

The same view, the same DetailView, the same code, different model, different end result:

621×1107

What sets column width in this case? Why it is shifting with each record? Is this a Bootstrap or Yii2 issue? I tried to analyse generated code with Chrome Dev Tools, but got no conclusions. As you can see, there is a lot of empty spaces in both columns, so column width shifting should not occur.

Most important – how to prevent that? How to make sure, that every view will look exactly the same, no matter what data will be printed inside DetailView?

2

This got nothing to do with Yii - browser is deciding how to render the table based on its content if column width is not set. You can set the css style with with or add class like bootstrap col-- to keep the column size in order.

3

The answer to question in title (What sets column width / distribution in Yii2’s DetailView?) is “I don’t know” or “Nothing sets this”. However, adding these lines:


table.detail-view th {

	width: 25%;

}


table.detail-view td {

	width: 75%;

}

to site.css is one of many approaches to "fix" this problem.

4

As you can see, I have came with the same conclusions.

However, you’re approach of using col-like classes sounds interesting, in the light of fact, that you don’t have direct access to HTML code generated by DetailView, therefore you can’t directly interfere with classes added to each <td> or <th> element of it. Care to explain, how you would like to override DetaliView generation process to be able to inject own classes to generated HTML code for DetailView?

5

With DetailView there is not much you can do but there is still template parameter where you can set the whole row (callback is also available)


'template' => "<tr><th>{label}</th><td>{value}</td></tr>"
2 Likes