The same view, the same DetailView, the same code, different model, different end result:
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?
Also you can use the public propetry template to achieve this. For example:
<?= DetailView::widget([
'model' => ...,
'attributes' => [[...], [...]],
'template' => "<tr><th style='width: 15%;'>{label}</th><td>{value}.</td></tr>"
]) ?>
In this case I have two columns where I am forcing the widht of first to 15% of total.
You can also use this approach to apply more style of your generated table.
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.
.fix-width > tbody > tr > th {
width: 20%;
}
echo DetailView::widget([
'options' => ['class' => 'table table-striped table-bordered detail-view fix-width'],
'model' => $model,
'attributes' =>[],
]);
The correct answer is the width of the contents. If you look carefully to the content you see for different witdh of content. Alias different width of label column and value column. In this case the width is automatically manager by the widget. You can set them by css
Related
Trying to make a grid,
.wrapper {
display: grid;
grid-template-columns: 48% 52%;
}
The issue is that when I type this, display works, but grid-template-elements doesn't go bold, it's as if it doesn't exist? I can't work out what I'm doing wrong.
here is an image: Doesn't work
Go to 'Settings' > 'Style Configurator'
Choose 'Language > CSS', 'IDENTIFIER' then add all your grid properties in user-defined keywords box, separating them with a space.
I want to color stripe each row inside a multi-row flexbox
.container{
display:flex;
flex-flow: row wrap;
}
Has anyone discovered a simple way to determine the row count of a flexbox?
I looked at this question that did not accomplish the striping, but instead "manually" marks the Html element in order to stripe: Zebra striping a flexbox table with wrapping items
I looked at this question which accomplishes the task by programmatically calculating the row-breaks in JavaScript. It counts the number of different getBoundingClientRect .top in the container: zebra striping rows in a flex container with flex-wrap:wrap
I don't mind the JS, but, unfortunately, this solution also requires watching for changes in both the page layout and the content of each wrapped item inside the container.
Does anyone have a solution that doesn't require "manually" monitoring the layout and content?
Considering that CSS has no way of knowing when an element wraps, a scripted solution is probably your best bet, unless the number of items per row is consistent throughout the container. Then you may be able to match individual items with CSS nth-child pseudo-classes, which could result in color-coded rows.
const calculateNumberOfRowsOfFlexBox = (children: any): number => {
const items: any[] = Array.from(children)
let baseOffset = items[0].offsetTop
let numberOfRows = 0
items.forEach(item => {
if (item.offsetTop > baseOffset) {
baseOffset = item.offsetTop
numberOfRows += 1
}
})
return numberOfRows
}
const numberOfRowscalculateNumberOfRowsOfFlexBox (containerRef?.current?.children)
I have a very simple webgrid with 3 columns:
View
columns: grid.Columns(
grid.Column("Applicant Name",
format: (item) => #Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId },
null), style: "AppName")
, grid.Column("Role", "Role", style: "Role")
, grid.Column("ApplicantSkills", "Skills", style: "AppSkills")
I want to set my columns to a fixed width. I have tried using percentage widths here and exact widths like 500px, 100px etc, and they all work initially, but are lost after postback.
css:
.AppSkills {
width: 70%;
}
.AppName {
width: 20%;
}
.Role {
width: 10%;
}
My grid is a results grid, which is populated from a number of filters, so every time the user selects different filters and clicks search the results are changed and the grid re-populated. What im finding is the grid column width style is being lost. Here is what my screen looks like. Initially it looks fine, but after selecting different filters and hitting search, the grid column widths are lost.
I have tried posting my form as a GET and a POST to see if it was the Get that was losing the formatting. But both yield the same results.
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
Is there anything obvious I'm doing wrong here? Or is there any way I can ensure a fixed width on my grid columns so they don't move about?
You're missing spaces after the commas, so it's probably treating one of the entries as a big unbreakable word. If you can't change the underlying data, assuming it isn't the code doing the concatenation, you might be able to use the css word-break property to sort it.
Make sure that after postback that the grids still have the classes applied to them.
Also, please post the HTML for us to view so we can diagnose the problem since we are not to sure if they are styled divs or a table.
If it is a table, try running the following CSS. Basically, it will target the columns individually without class names, just in case the classes are lost during postback.
td:nth-child(3) {
width: 70%; /* targeting the skills column */
}
td:nth-child(1) {
width: 20%; /* targeting the name column */
}
td:nth-child(2) {
width: 10%; /* targeting the role column */
}
I wonder how ExtJS makes columns hidden without any visible CSS changes!
The problem that I had - I can't set the CSS rule to hide children icon in that hidden column. F.e. if the hidden td had class 'hidden', I can use something like that:
td.hidden img {display:none;}
But in this case I can do it only in renderer with manipulating grid.columns[col].isHidden().
renderer: function(value,td,record,row,col,store,view) {
return grid.columns[col].isHidden() ? '' : someFunctionToRenderColumn();
},
It's ok, but then if I show hidden column it will not refresh grid and shows empty column. Of course I can add one more event for show/hide that column, but it is so difficult! Has it any simple way?
It gives them a width of 0px:
<colgroup>
<col class="x-grid-cell-gridcolumn-1023" style="width: 0px;">
</colgroup>
... and that should hide your img too. Except if you've given them an absolute positionning or something. You should try to position your img using float, margin and padding. Or you will have to toggle the 'hidden' class yourself using the hide and show event of the column.
You can hide columns by targeting the corresponding col element. No need to put classes on each of the individual tds.
Here's a fiddle I made earlier: http://jsfiddle.net/MrLister/MupLH/
which has
<table>
<col><col class="invisible"><col>
...
and the CSS:
.invisible {visibility:collapse}
But you don't even need a class; you can also use col:nth-child(2) if you know the column number.
I would like to change background color in a (bootstrap) grid in yii, depending on compared cell values.
It took me a while to figure out where do I even have to place CSS class to get something - .../protected/css/styles.css:
.notice {
background:#FFF6BF;
color:#514721;
}
I hope this is the right place.
In my grid:
'columns' => array(
...
array(
'name' => 'Pcs',
'cssClassExpression' => '$data["Pcs"] <> $data["Pcs"] ? "notice" : ""',
),
this way, my css definition is applied only in every second row. I've read a lot about this in different topics: CGridView. Add custom class to table rows preserving original „odd“ and „even“ and also here in stackoverflow.com.
I know there are "odd" and "even" rows, but I still don't get the picture. I've tried to manually change rowCssClassExpression
'rowCssClassExpression' => '',
because I thought if I disable basic yii row coloring, my css will apply, and in html source I can see there are proper class definitions for each row, but still, rows background color remained the same. What should I do to make it work?
Thanks a lot!
Your css rules are being ignored. The selector that's being applied is table tr td thus yours should be as follows
table tr td.notice {
background:#FFF6BF;
color:#514721;
}
If this doesn't work you could always set the rules using !important