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
Related
I have a style for a two column grid where I want the first column to be 1fr and the second to be 5fr (or auto). I also want the second column to wrap under the first in responsive/mobile view. My non-wrappig style is this:
.grid-two-column-wide-right {
display: grid;
grid-template-columns: 1fr 5fr;
grid-gap: 1.5rem;
}
I know I have to use repeat and auto-fill but not sure how to keep the static column widths. Any help is appreciated.
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.
I have a list of products and I am trying to alternate the colour between each product (grey, white, grey, white, and so on). I understand how to use colour formatting based on a condition such as the following link: example followed. However I dont know how to get it to look at the previous line on the report and check whether it holds the same product name. If it does, then colour the row the same colour, else the alternate colour.
I've setup an example report in the application: Application 67666 - Colour Row by Product example. I have two products in the report so I'm trying to get 3 grey lines and then 3 white lines, if I had more products it would then go back to grey and so on.
Link:apex.oracle.com
workspace: apps2
user: user
password: DynamicAction2
Please could I be directed in the right direction, JavaScript and Dynamic Actions shout out to me as in the example link however its looking at the previous row which is getting me all stuck.
I can't think of another solution than javascript really. There is possibly using lag in the sql, but only to use it to determine where the row color should change. You could use the value of the column in a html expression of a column and put it in a class, but you still need to iterate over it with javascript anyway. So it seems less fiddly to just use javascript.
Inline CSS:
table.report-standard tr.normalRow td{
background-color: green;
}
table.report-standard tr.altRow td{
background-color: red;
}
This will override the default style, but you will need to tune this to your demands. For example, the color change on :hover of the row. I prefer steering the style through assigning classes and then define the rules in css than to directly assign css through javascript (which would place it in style tags, ugh).
Dynamic action: change row colour
After Refresh, Region, Product Report
True action: execute javascript code, fire on page load checked
$('td[headers="PRODUCT"]', this.triggeringElement).each(function(){
var lCurrRow = $(this).closest('tr'),
lPrevRow = lCurrRow.prev(),
lPrevVal = lPrevRow.find('td[headers="PRODUCT"]').text();
console.log(lPrevVal + ' - ' + $(this).text());
//if value on previous row differs from the that on the current row
//then change the class
//if the value didnt change, then use the same class as the previous row
if ( lPrevVal != $(this).text() ){
if ( lPrevRow.hasClass('normalRow') ){
lCurrRow.addClass('altRow');
} else {
lCurrRow.addClass('normalRow');
};
} else {
if ( lPrevRow.hasClass('normalRow') ){
lCurrRow.addClass('normalRow');
} else {
lCurrRow.addClass('altRow');
};
};
})
Check your solution on apex.oracle.com, I implemented it there.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS: Ways to break list into columns on page?
I was looking for this solution and couldn't find it so I thought I would post what I ended up making.
I was trying to build a single list where after the 5th item the list would wrap and move into another column. This is so it can be super dynamic with how many items the user needs.
Here is the solution I came up with.
li{
position: relative;
line-height: -6px;
}
ol li:nth-child(6) {
margin-top: -90px;
}
ol li:nth-child(-n+5){
margin-left: 0em;
}
ol li:nth-child(n+6){
margin-left: 10em;
}
<ol>
<li>Aloe</li>
<li>Bergamot</li>
<li>Calendula</li>
<li>Damiana</li>
<li>Elderflower</li>
<li>Feverfew</li>
<li>Ginger</li>
<li>Hops</li>
<li>Iris</li>
<li>Juniper</li>
</ol>
Here's the Fiddle: http://jsfiddle.net/im_benton/tHjeJ/
What do you think of my solution??
What is a solution that will work in IE?
Try using the following as #tuff suggested.
ol {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}
http://jsfiddle.net/tHjeJ/6/
Its not that hard if you just want two columns
You could try something like this on your list:
ol{ width:300px;}
li{
width:50%;
float:left;
}
It would actually wrap equal number of list items in each column if li number divides by column number.
If you want numeration to be like on your picture you could use wrapping divs for each column and then use the start attribute on your list ...it will be something like start="6"
i want to show only the first 5 elements of a list and hide the remaining elements, when you click on a "more"-link, the remaning elements of the list must be shown...
it's a bit similar to jQuery toggle show/hide elements after certain number of matching elements but then in mootools (instead of jquery)
A good solution could be a combination of CSS + Mootools
css:
ul{
height: 50px; /* must be the same height as the 5 elements */
overflow: hidden;
}
js:
$('moreLink').addEvent('click', function()
{
$('menu').tween('height', [50, 200]);
}