I need to manage a tailwid grid with a column with fixed width, and another one with a stretched width.
Please show this sample: https://play.tailwindcss.com/jnWKg6hTyG
In the sample i can manage a fixed column for the button "Show" using w-12 in the button class, but the "Password" input does not stretch.
Any help?
Thanks
Not an answer to your question but if grid isn't strict requirement then consider using flexbox for this.
IMHO flex is better in these situations.
Example: https://play.tailwindcss.com/gcMrxejDQw
Related
I am trying to achieve something, I want a main container and a sidebar at the rightside. which should deal with mobile layout as well, I was unable to find such thing or make it. The blue print is given in the image below. Thanks
BluePtint of what im trying to make
You can create this layout using div's with different ids or classes- your main body(red) could go in a div with class "#mainbody" and your sidebar(blue) would go in another div with class "#sidebar", then you can specify the dimensions in CSS.
Have you checked out a CSS framework like Bootstrap? Bootstrap makes it super easy to specify column widths with their grid system, so instead of having to state px or % width in CSS, you can add the class "col-md-3" to a column for a width of "3". Their system is based on units of 12, where 12 would be a full bar, 6 would be half etc: https://getbootstrap.com/docs/4.0/layout/grid/
I need to create a GWT application that handle the buying of films. So I have to show in a grid (not in a list, I don't like the view) these cell containing image and info about the film like this:( http://static.ipaditalia.com/wp-content/uploads/2012/11/mzl.sckskoqz.480x480-75.jpg ). I think that I need of a grid showing I think, to obtain something like but I wouldn't know to start. thanks for help!
You can use a simple FlowPanel as a container, and add each image with a float set to "left".
Alternatively, you can use a flex-box model with flex-flow: row wrap on a container.
You don't need any widgets for this. This is simple CSS, and it will give you the best performance and the smallest code size.
I'd like to know if there is a way to reserve space for a vertical scrollbar in a grid panel with ExtJS 4.1.1. I remember that I was able to do this with ExtJS 3, but maybe this feature was removed?
The grid has a fixed height so a scrollbar appears when the amount of rows exceeds the height of the grid. There is also a "delete" action that allows to remove each row one by one. The problem is that the action moves to the right when the scrollbar is not required anymore. This is the behaviour I'd like to avoid.
I think you're looking for reserveScrollbar
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Auto-cfg-reserveScrollbar
Add overflowY: 'scroll' as a config param for your grid. See docs here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Component-cfg-overflowY.
I am trying to center itemRenderers in a horizontal list if the number of items in the list is less than the maximum visible number. Has anyone found a good way to do this?
See an illustration of what I mean if it is hard to picture.
Thanks!
Override the measure() method - I've writen a blog entry here: http://flexmonkey.blogspot.com/2010/05/centre-aligned-horizontallist-in-flex.html
simon
One solution that comes to mind would be to add invisible renderers to achieve the same centering.
You might want to consider using a horizontal box or "Hbox" instead of a horizontal list component. This will allow you to use the horizontal align property to set center. If not, simply extend the horizontal list component to accept a center align property, and copy it from the hbox to your new extended component.
Would paddingRight or paddingLeft accomplish what you're looking for? If you combine it with setting the columnWidth and the columnCount, that would allow you to adjust where the items first appear.
I am using Telerik's Radgrid for a website. Often the grid columns exceed the available width, and extend outside the main content area (fixed width).
So what are my options for presenting very wide grids. horizontal scroll bars just look ugly on my site
Your choices are a combination of the following:
Smaller fonts
Consolidate some cells to have more than one row (e.g. if you have a "start date" and "end date" put the start date on top and the end date on the bottom.
Widen the window
Make some cells appear conditionally (based on user-defined filters). Maybe the most frequently used cells appear normally and a checkbox unhides the less frequently used cells or groups of cells.
Allow horizontal scrolling
Make the window a fluid width
Popup data in a floating <div> via javascript instead of putting it in a column
Am I missing anything?
i am using telerik controls too, one thing i have learned after a lot of work with them is their CSS is usually good, but i also face your problem, and here is my advise.
what Keltex said.
always add a custom class to your Rad Grid where you do fix those nasty stuff.
don't use fixed width for Grid, instead use it on columns and make the grid Fluid, so does the page.
hope this helps.
I agree with devmania and making the grid fluid, I had a similar problem recently. So I made a few of my columns nowrap and left the rest to wrap. It doesn't look great on smaller screens but it's still usable because I've stopped things like date+time columns wrapping. However, once you start using it on a wider screen it looks great.
It all depends on how much of a scrollbar you have. Is it possible to strip out some of the columns and have that information in a popup/flyout somewhere?
Another option is to make which columns are shown user configurable, but you're not really addressing the problem, just making it the responsibility of the user to make it look nice.
If you can't get rid of the horizontal scrollbar you should at least try to put the more important columns first so that your users don't have to scroll to the right very often.