What does class Collapse do? - zurb-foundation

I am new to Zurb foundation grids... Can any one explain to me when to use the class 'collapse' in a row?

The .collapse class removes the negative margins on the .row element and removes the padding on child .column elements.
The .collapse class on .rows is really handy, especially in the case of a nested grid when you don't necessarily want padding between the columns.

Related

Aligning columns using CSS Grid

In CSS Grid, I'm trying to find the best approach to aligning 3 columns, first column to the left, then second and third aligned to the right.
The second and third columns are both dynamic widths, so I need the third column to wrap to its contents width, then push the second columns content to the 'end', so both appear to fill to the right.
I have this working(ish), but I don't think its the best/correct approach. By setting grid-template-columns on the parent container to 200px 1fr, both second and third columns align as I'd like, but I suspect this isn't the correct, or best approach.
Is anyone able to explain how this should be done?
Here is an example of how I have it currently working:
https://jsfiddle.net/Lb0qc7ep/
I am using CSS Grid as at different breakpoints, I need to rearrange the column orders.
Try this:
.container {
display: grid;
grid-template-columns: 1fr auto auto;
grid-gap: 30px;
}
I removed all other CSS when I tried this

QTableWidget having multiples lines in cell

I'm using a QTableWidget for a simple table. Now each cell should contain two numbers, but I don't want them to be left to right, but for readability on top of each other. I'm using Qt 5.8.
Hence, I tried something like this:
QTableWidget* table=new QTableWidget;
auto item = new QTableWidgetItem(QString("%1\n%2").arg(1).arg(2));
table->setItem(0, 0, item);
Interestingly, the outcome was that the newline \n was completely ignored. I obtain a cell containing 12. Replacing \n by <br> didn't helped.
Any idea, what I'm doing wrong/missing?
This should work, just try to resize the height of your row to give the item enough space.

How can I set the color of a specific line in a libgdx list?

I am developing a list and I want to highlight certain lines by showing the font color in red. Is this possible?
EDIT:
Ok, here a simplified version of my code:
Skin defListSkin = new Skin(Gdx.files.internal("data/uiskin.json"));
List listHistory = new List<String>(defSkin);
// Here I set the general font color for the list
List.ListStyle listStyle = listHistory.getStyle();
listStyle.font = fontList;
listStyle.fontColorUnselected = Color.LIGHT_GRAY;
listHistory.setStyle(listStyle);
String[] items = new String[20];
// Example of item[]
// item[0]: "John 12"
// item[1]: "Amy -3" <-- I want certain lines to appear in red (e.g. those with negative numbers)
// Populate the list
listHistory.setItems(items);
// Drawing the list (actual draw happens in render() of course)
Table myTable = new Table();
myTable.add(listHistory);
stage.addActor(myTable);
Use the Color Markup Language that Libgdx supports.
The markup syntax is really simple but still versatile:
[name] Sets the color by name. There are a few predefined colors, see the Colors.reset() method for an exhaustive list. Users can define their own colors through the methods of the Colors class.
[#xxxxxxxx] Sets the color specified by the hex value xxxxxxxx in the form RRGGBBAA where AA is optional and defaults to 0xFF.
[] Sets the color to the previous color (kind of optional end tag)
[[ Escapes the left bracket.
Markup is disabled by default. Use the public member font.getData().markupEnabled to turn it on/off.
Reference: https://github.com/libgdx/libgdx/wiki/Color-Markup-Language
If you want a more complex html like markup you can use those templates: https://github.com/czyzby/gdx-lml, live tests: http://czyzby.github.io/gdx-lml-tests/
I know what you mean, and I don't think it is possible. The list items are all linked to the same listStyle, and the only way to change the color of the list items is to make a new style for listHistory and change the font color of this style, however if you do this, it changes every item in the list to that new font color. My suggestion would be to create two separate lists and two separate ListStyles and the lines you want red be in one list and have one style and the lines you don't want to be red be in another list and have a different style. Hope this helps

Infragistics Webdatagrid: Resize column to largest header/data cell contents

I am searching for a solution that changes the column width based on largest data content or header.
Solutions like
tbody.igg_Item > tr > td
{
white-space: nowrap !important;
}
does not work because the grid sets the column width based on the column header contents not the data, thus the data cell contents is not displayed in its full length.
e.g if content is "my test data content", I can only see "my test dat" because my header is not long enough.
My markup is:
<ig:WebDataGrid ID="WebDataGrid1" runat="server" AutoGenerateColumns="False" Height="350px"
Width="100%">
<ClientEvents MouseDown="GridMouseDown" />
<Behaviors>
<ig:Activation>
</ig:Activation>
<ig:ColumnResizing>
</ig:ColumnResizing>
<ig:Selection CellSelectType="Single">
</ig:Selection>
</Behaviors>
</ig:WebDataGrid>
I am adding the columns in code behind (I have not seen any DataColumn property that controls width)
The grid will automatically size the columns to the data portion of the grid if there is no width set on the column and the grid itself doesn't have a width. Note that you will need to put the grid in a container if you want a horizontal scroll bar and if using paging the pager will scroll with the columns.
I have a more detailed answer to this question here on StackOverflow. I also have this posted in the Infragistics forums here with a sample. I also have a modification of that example that allows wrapping of text in the header if there are multiple words with sample posted here.

Sencha Touch 2 list background change

I have a list within my application, but was wondering if it is possible to have each list displayed show a different background colour, rather than the same one through out each item?
I have created a template but would be nice to have the background of each change colour.
Thanks
EDIT: I have also created the same list via a 'Ext.dataview.component.DataItem' / 'DataView' so if this is easier to control separately then great, as I am looking at interfering in te process of creating each and setting its background, if that is at all possible.
You could try to do that with simply XTemplate:
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'{name}',
'</div>',
'</tpl></p>'
);
take a look at their explanations, might find something interesting:
http://docs.sencha.com/touch/2-0/#!/api/Ext.XTemplate
I have seen many variants on the Ext.query('class').up().addCls('backgroundClass'); hack, which makes perfect sense to me, but my question is WHEN are people calling this? I can't put it in 'painted', since DOM doesn't seem to exist yet.. where/when are you guys executing the Ext.get(..) call?
I have been looking for this also, and I had a hard time finding out how to access the individual items of a xlist...
This is the way I finally did it:
in your itemTpl, add a class to your < div >, using the property 'id' of your model:
itemTpl:'< div class="my_list_item_{id}"> ... content ... < /div>'
the tricky part is that if you want to set the background color of the whole item area, you have to access to < div > with class 'x-item-label' that is wrapping your itemTpl < div >.
Here is how I did it (for the first item as an example):
Ext.select('.my_list_item_1').first().up('div.x-list-item-label').addCls('background_item');
where 'background_item' is a CSS style, defining your background color.
(Since there is no way (at least that I know of) to get the index count of your items in the 'itemTpl' config, I had to use to automatic 'id' property of my model/store.
Note that if you apply filtering/sorting/... on your store, this property will not be sorted anymore. So if you want to link the order displayed in your list to the 'id' property, you have to do something like 'Ext.StoreManager.get('MyStore').getAt(indexInList).get('id') )
Hope this helps...
Since Sencha Touch 2.2.1 it's also possible to use striped parameter (more info here). It will add x-list-item-odd class to odd items of your list.