I Am from a WPF/XAML background and I'm trying to get my head into MVC. I am wondering if I want to create a data capture form, would you use table or div to structure the labels and dropdowns/textboxes etc.?
I ask because the template provided has all stacked one on top of another and wastes valuable screen area. I want to have my labels for Title, Forename, Surname all on one line/row and the same for data capture elements?
You should use div to structure your layout.
Also you can use some grid layout framework (like in Twiter Boostrap, see Grid system). If you have WPF background - it can simulate to some extent Grid panel from WPF in HTML world.
In HTML table tags should be used for Tabular data; layout of forms etc should be done using Div / Span tags for structure and CSS to control the structure.
Take a looks at the link below for input form structure example:
Differents way to structure html inputs and labels in a form
Best way to structure a two column html form?
http://aceinfowayindia.com/blog/2009/06/how-create-good-looking-form-without-table/
It's not only cleaner to use Div, but it also makes the page more accessible according to W3C rules.
Related
I am creating a table where I need to freeze some cell while keeping the other cell scrollable. The table must be responsive to screen size that is why I need to make some cell scrollable.
Based on the picture above, I want to keep the blue area floating/or freeze while the red area scrollable.
How is this possible in google app maker?
First of all, this widget that you refer to as a table in your sample screen is actually a composite widget where it combines several basic widgets like the list, horizontal panel, and pager.
There is another table widget under charts, called Table chart, that can be used to present your data in rows and columns. But if you are looking for a property that can achieve this UI effect, then I'm afraid AppMaker does not support this yet.
If you are really keen to make this work, I would suggest that you combine two table widgets that inherit the same data source then wrap them SIDE-BY-SIDE in a horizontal panel. The left side will only contain columns that you want to freeze while the right size will have the rest of the column that can be scrollable.
Make sure to set the height of both tables to auto-grow based on the content (Fit to content). This will give the effect that the two tables are merged when doing vertical scrolling.
I have here a sample implementation as I described above. I gave a background to the main container to better understand the concept. I also added a small gap to show that I used two table widgets.
Here is the set-up in editor view (screen-shot)
See it in action here (video)
I am creating a form using OpenUI5 and I noticed that when I am using the ResponsiveGridLayout layout, the form gets some padding (blue area around the input fields). Please see result here:
http://plnkr.co/edit/G4NrKPMGdN4DACXZgZOg?p=preview
If I am using the GridLayout layout, the padding is as expected:
http://plnkr.co/edit/Yp6Ul7gLDf0t88vMWrWD?p=preview
Any idea how I can get a form with very a small padding (like in GridLayout example), but in the same time I want to be able to use the 12-column grid system so I can set the size on my input fields?
Ideally, the views need to be XML and to use OpenUI5 classes/controls if possible.
You could just swap the responsible style classes using .addStyleClass() and .removeStyleClass().
Not sure if it works, but thats the easiest possible fix I can think of that might be worth a try.
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 working on a project in MVC 4 where I am leveraging WebGrid to display various data elements for my models.
Currently, one of my models has a text property that accommodates a large amount of text. Yet when it is displayed via WebGrid, the text fails to wrap and extends the length of the grid. Needless to say, this looks very ugly and makes the text difficult to read.
Is there a way to either:
a) Wrap text of a specific column in WebGrid
b) Style the grid or column using CSS somehow to achieve the same effect.
I have done much research on this topic, but have not come up with much of anything that directly applies to this simple scenario.
The most useful link I found is this one, but it is somewhat old and does not directly address my needs.
I can't imagine why text wrapping was not included in the basic implementation of WebGrid, but it does not appear to be part of its integral functionality.
Anybody have any ideas?
You use CSS to manage this kind of thing. The WebGrid renders an HTML table so you can declare styles for tables and they will be adopted when the grid renders.
There are also some CSS hooks built in to the WebGrid. You can specify the CSS class that the individual table uses through the tableStyle parameter:
grid.GetHtml(tableStyle: "myStyle")
Or you can apply styles at column level:
grid.GetHtml(
columns: grid.Columns(
grid.Column(("ID"),
grid.Column("MyText", style: "wordwrap")
)
)
I've written about the WebGrid in detail here: http://www.mikesdotnetting.com/Article/154/Looking-At-The-WebMatrix-WebGrid
To get words to wrap using CSS, you need a combination of table-layout: fixed on the table and word-wrap:break-word on the table cell. See here for example: How to force table cell <td> content to wrap?
I am trying to get a drupal 6 view to display in a column format rather than rows. Basically I want to group my pictures/video by taxonomy and display them in a table. Similar to what I have below. I tried enabling grouping with a grid layout but that did not seem to do it.
Cows Horses Dogs Cats
Picture Picture Picture Picture
Picture Picture Picture Picture
Picture Picture Picture Picture
Picture Picture Picture Picture
Picture Picture Picture Picture
Hope this makes sense.
If you're using Views 2, one way would be to create a table view, then use a custom views-view-your-view-name.tpl.php file to output the columns and rows vertically rather than horizontally. That template override gets the rows and columns as arrays of objects that you can output however you'd like.
I don't think Panels are good answer to this question, the have different purpose.
I would maybe use a view which is sorted by custom parameter in URL, set output as list (so it is li div.title Title, div.date Date, div image Image /li etc), and style the list with css (.li has fixed size and float:left;).
Then I would a "sort by" selector before view (there is a field for HTML that will be repeated before any view output - [a href="?sort=Name"]Sort by name[/a])
You might be able to use multiple views and panels. Check out the panels module
The Flipped Table add-on is part of the Views Hacks module.