Collapse button sometimes appears in the middle of the seamless panels

[damithc]

Example from : https://nus-cs2103.github.io/website/book/gatheringRequirements/prototyping/

[acjh]

Doesn't work meaning it doesn't collapse?

[damithc]

Sorry, should have been more specific. The button appears in the wrong place (not at the bottom). In the example, first panel has the collapse button near to the top of the panel while the 2nd one has it at the bottom.

[damithc]

Here are the three panels in that examples. The position is correct in the 3rd panel only.

<panel header=":package: Simple text UI prototype for a primitive CLI (Command Line Interface) Minesweeper:" type="seamless" expanded>

<img src="{{baseUrl}}/gatheringRequirements/prototyping/images/textPrototypeCLI.png" height="350" />

</panel>

<panel header=":package: A simple GUI prototype for the same Minesweeper, created using Powerpoint:" type="seamless">

<img src="{{baseUrl}}/gatheringRequirements/prototyping/images/guiPrototypeMinesweeper.jpg" height="250" />

</panel>

<panel header=":package: A prototype for a mobile app, created using the UI prototyping tool Balsmiq:" type="seamless">

<img src="{{baseUrl}}/gatheringRequirements/prototyping/images/balsamiqPrototypeGUI.jpg" height="500" />

%%<sup>[source: http://balsamiq.com/products/mockups]</sup>%%

</panel>

[Gisonrg]

This is an issue with float. The image does not take the full width of the panel (and it is not a block element), that's why the button "float" to the top (the empty space that is not taken by the image).

Consider either make the button fixed at the right bottom corner, or make it displayed as a separate row at the bottom (try wrap the button with a div).

[damithc]

This is an issue with float. The image does not take the full width of the panel (and it is not a block element), that's why the button "float" to the top (the empty space that is not taken by the image).

Yup, I can workaround it by adding a <p/> after the image in the first two panels.

[acjh]

Agreed, I was typing:

The difference is that the 3rd panel has a <p> tag, which is a block element. <img> is an inline element, that's why <button> appears on the same line.

Regarding the suggestions:

Consider either make the button fixed at the right bottom corner

While it's possible to "pin" the <button> at the bottom-right corner, it may overlap other content.

or make it displayed as a separate row at the bottom (try wrap the button with a div).

It seems ugly to do that. And makes the first example here (where inline is nice) no longer possible.

---

It should be up to the content author to use a block element - in this case a div around img.

[damithc]

While it's possible to "pin" the at the bottom-right corner, it may overlap other content.

Might be ok if the element is highly transparent?

Anyway, I can use the <div> workaround for the time being.

[Gisonrg]

We could try to set a padding for the panel and try fix the position of the button within the right bottom corner padding area. However, not sure how well it works :P

On Sun, 15 Oct 2017 at 2:24 PM, Damith C. Rajapakse < notifications@github.com> wrote:

While it's possible to "pin" the at the bottom-right corner, it may overlap other content.

Might be ok if the element is highly transparent?

Anyway, I can use the

workaround for the time being.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/MarkBind/markbind/issues/103#issuecomment-336689634, or mute the thread https://github.com/notifications/unsubscribe-auth/AEIawF4hffjZsY91pO0LvP27U1y992_Uks5ssaU1gaJpZM4P5oK9 .