I'm trying to figure out how can i get that a simple Datagrid has splitted columns.
I need the following layout:
+-------------------+
| Destination |
+--------+----------+
| Dir 1 | Dir 2 |
+-------------------+
Any idea about how could I do it?
You can use a header renderer for the same. Customized renderers can be created.
Related
Using restructured text, how can I display two code blocks side by side, so that they can be compared line by line?
Here is an example of what I mean from this similar question for Markdown: How to disply two markdown code blocks side by side
Ok, so I found that the following works:
+-------------------------+-------------------------+
| | |
|.. code-block:: |.. code-block:: |
| | |
| # Code example 1 | # Code example 2 |
| | |
+-------------------------+-------------------------+
This creates a table with two columns, and puts a code block in each of them. If the two blocks have the same number of lines, they will be aligned to each other. The output looks like this:
If one wants to include an external script, it can be done like this:
+--------------------------------+--------------------------------+
| | |
|.. literalinclude:: script_1.py |.. literalinclude:: script_2.py |
| | |
+--------------------------------+--------------------------------+
I'm creating a website based on unequal column, the site divided by .col-md-2 and .col-md-10 and it's look like this:
-------------------------------------
|Side | Content |
| | |
| | |
-------------------------------------
And then I want divide the content again into 2 unequal columns with <aside>, I want it has same layout styling, so inside .col-md-10, i uses .col-md-8 for Content and col-md-4 for <aside>, so it's look like this:
-----------------------------------------
|Side | Content | Aside |
| | | |
| | | |
-----------------------------------------
Inside Content I want to fill it with <article>, and each of it has Detail and I want put it on Side position while the content <article> still inside the Content.
To achieve this, I split <article> into 2 unequal columns again and pull each of them, so it uses .col-md-pull-4 .col-md-4 and .col-md-pull-4 .col-md-8, and currently, it looks like:
-----------------------------------------
|Side | Content | Aside |
|(Detail) | (Article) *| | |
| | | |
-----------------------------------------
the layout works as expected, however the Article width only reach until *|
if i use .col-md-pull-4 .col-md-12 on <article> content, it will looks like this
-----------------------------------------
|Side | Content | Aside |
|(Detail) | | |
| | (Article) | |
| | | |
-----------------------------------------
The article has full width, but it create a new "row"
the output i want is:
-----------------------------------------
|Side | Content | Aside |
|(Detail) | (Article) | |
| | | |
-----------------------------------------
Update
Here is my current code on bootply
Progress
I haven't figure out how to do this, but basically, what i want is pull a column outside of its container / parent and fill the container with another column, if you think i was doing it wrong, provide a correct way to achieve this kind of layout is very appreciated.
Update 2
Finally I ended up messing with margin-left property with minus values, since it displayed incorrectly under specific resolution, i have to use media queries to workaround against it.
If there are better ways to achieve this kind of layout, correct me how to implement this will be very appreciated
I want to create an static drawing (say any animals like giraffe) using some points, lines, drawing etc. Now i want to update the drawing by passing the parameters say height of his legs, its width or its color.
The parameters are supplied from the web page. The image will be a 2D image
I am searching on which technology should i implement this for more than 10 hours but cannot find any perfect solution.
Right now i am thinking i can use Adobe flash in which i can do some programming to create an drawing and change the drawing by passing the parameters to a Flash file, i think we can pass it when we embed an flv.
Whether i am right? Or there is any other solution. I have no knowledge of any thing except asp.net
Please help.
Any help is appreciated
I'd like to build on the previous post - you could also incorporate svg graphics into the mix. This would allow you control over color, width, and height. You can manipulate SVG files with javascript (Dynamic SVG). You'll probably get that going faster than learning action script.
If you just want to be able to stretch or recolor parts of an image, you could do that using ordinary HTML parameters. Just create a giraffe image, break it into the chunks that you want to be able to resize independently, and use CSS layout or tables to assemble them. Here's an artistic rendering:
___________________________
|image 1 V__ <<|
|head |oo | <<| <--- delicious acacia leaves
| | < <<<|
---------------------------
|image 2 | | |
|neck |o| |
| | | |
---------------------------
|image 3 / | |
|body /------/ \ |
| | \ |
---------------------------
|image 4| | | | | | | | |
|legs | | | | | | | | |
| \_/ \_/ \_/ \_/ | <--- I do not know what giraffe feet look like
---------------------------
If you want to give your giraffe a short neck without changing anything else about it, you can just alter the height attribute of the second image, like so:
___________________________
|image 1 V__ <<|
|head |oo | <<|
| | < <<<|
---------------------------
|image 2 | | |
---------------------------
|image 3 / | |
|body /------/ \ |
| | \ |
---------------------------
|image 4| | | | | | | | |
|legs | | | | | | | | |
| \_/ \_/ \_/ \_/ |
---------------------------
Obviously, changing the width of just one image would cause the boundaries to no longer match up, so you'd need to change them all to the same value.
To handle color changes, you can make use of image transparency. Each image would be white, with a transparent region representing the giraffe. Then, you'd set the background color of the div or table cell to the color you want the giraffe to appear. Again, this is clunky, but it would let you do what you want without needing anything other than static GIF / PNG images and basic HTML.
I have a QTableWidget that has a combination of QLineEdit and normal table cell items. I would like to know the best way to sort the data in the table by the values in the QLineEdit column.
Here is an example.
| customer code | header | message |
------------------------------------------------
| QLineEdit | normal cell | normal cell |
| QLineEdit | normal cell | normal cell |
| QLineEdit | normal cell | normal cell |
| QLineEdit | normal cell | normal cell |
| QLineEdit | normal cell | normal cell |
I would like to sort on the customer code column but because it's a QLineEdit (set with setCellWidget()), the table won't sort by its values.
I know I could take each value out, place them in a temporary object or row and shuffle the rows around but that would be amazingly ugly and slow. Is there a better way to do this?
There are several ways to approach this, here are a couple of ideas:
Use QTableWidgetItem::setText() on your cells that have the line edits in them. If you keep the text that's set on the cell sync'd with what's in your line edits then the sorting behavior should be preserved.
Subclass QTableWidgetItem and overload the < operator, at which point you can grab the line edits out and compare their values manually.
Ok, not too sure where to start...
I'm putting myself together a blogger, completely gutting it's css and just using it as a simple content manager. here is the test site i've been working with
http://jamesparishtestblog.blogspot.com/
Ignore the header, its broken, but I know what I'm doing there. My problem is with the film reviews (stolen from apple trailers as temp content). As you resize the page, they flow fluidly into rows of different lengths. Great! Trouble is, the second row (and thus third, fourth, etc.) aligns itself vertically to the bottom of the longest (lowest) div in the above row. However, I want each div to fit neatly below the one above, 15px apart, and to flow neatly if another div is expanded (by clicking read more...).
Placing the divs in a column is ruled out, because I want the top row to contain the most recent posts side by side (with a column they would be below one another on the left hand side).
Set heights for the divs is ruled out too, because the articles need to expand, and for the full desired design, be mis-matched intentionally.
This has been troubling me for hours. I hope I've explained myself clearly, and that someone will can help.
Thanks for your time.
So you want this?
--------------------------
| __________ _______ |
| | | | | |
| | | | | |
| | | | | |
| ---------- | | |
| __________ | | |
| | | |_____| |
| | | _______ |
| | | | | |
| ---------- | | |
| ------- |
|________________________|
Without using columns you can't do it relying on CSS alone. You'd need to use some javascript or server side stuff to put things in the right place. Essentially you want a collage, too bad there's no "display: collage"!
Of course, I could be completely misunderstanding you.
Edit:
"any suggestions on the javascript front?"
I use mootools for almost all my sites. I'll define a bit there first:
dispose : takes an element out of the dom and stores it in a variable.
inject : plops an element into the dom.
I'd load these into columns, then dispose all the ones in the "recent" column and inject them back in to the top of the rest of the columns, one for each column. In other words, all the layout is done with CSS, the only javascript going on is putting your "recent" stuff as the top "row".