I can currently add a container element from the sidebar to my diagram and drag and drop text to the container, where each text line added to the container becomes a separately selectable element.
I want, when I drag and drop more text lines to the container than the container can display, is the container to switch to being vertically scrollable instead of the container resizing to accommodate the additional text lines.
Is there a way to accomplish this?
Create a new document,then go to Extras -> Edit Diagram...:
replace the content of the dialog with this:
<mxGraphModel dx="942" dy="546" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="hHBZA0x96M1ugzBaWHee-3" value="<div style="overflow-y: auto; height: 200px " class="s-prose js-post-body" itemprop="text"><br/> <br/><p>I can currently add a container element from the sidebar to my <br/>diagram and drag and drop text to the container, where each text line <br/>added to the container becomes a separately selectable element.</p><br/><p>I want, when I drag and drop more text lines to the container than <br/>the container can display, is the container to switch to being <br/>vertically scrollable instead of the container resizing to accommodate <br/>the additional text lines.</p><br/><p>Is there a way to accomplish this?</p><br/> </div><div class="s-prose js-post-body" itemprop="text"><br></div>" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;overflow: scroll;" parent="1" vertex="1">
<mxGeometry x="40" y="60" width="320" height="200" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
Main change is:
style="overflow-y: auto; height: 200px "
You'll got something like this:
Then you can duplicate block.
you need to edit html text (double click in text inside a block and click in the button </>) and add a div wrapper with a style
<div style="height: 100px ; overflow: scroll">
continue you need to edit style of block and add
overflow=fill
Related
I am trying to create a fixed nav menu inside the smooth scrollbar plugin 'data-scrollbar' attribute https://idiotwu.github.io/smooth-scrollbar/
Position fixed does not work
Below is an example of my HTML structure - Note that if I move the nav outside of .scroll position fixed works but I cannot scroll content if cursor positioned over nav
I'm trying to understand why this is happening and if there is a solution?
<div class="scroll" data-scrollbar>
<nav></nav>
<!-- scroll content -->
</div><!-- End of Scroll Class -->
This is a bit late, but hopefully this helps.
You need to add a scroll listener, and apply offsets to the fixed element.
HTML
<div class="scroll" data-scrollbar>
<nav class='fixed-nav'></nav>
<!-- scroll content -->
</div>
Javascript
const fixedElem = document.getElementsByClassName('fixed-nav')[0]
const scrollbar = Scrollbar.init(
document.getElementsByClassName('scroll')[0]
)
scrollbar.addListener( status => {
const offset = status.offset
fixedElem.style.top = offset.y + 'px'
})
I've got a view control in a panel but can't seem to get the view control to center within the panel. I've tried adding to the All Properties style "text-align:center;display:block;". Any thoughts on how I can get this view centered?
thanks,
clem
<xp:panel style="text-align:center;display:block;"
id="presentationView">
<xp:viewPanel rows="30" id="viewPanel1">
<xp:this.facets>
<xp:pager partialRefresh="true"
layout="Previous Group Next" xp:key="headerPager" id="pager1">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view2"
viewName="PresentationStore">
</xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="PresentationTitle"
id="viewColumn1" displayAs="link" openDocAsReadonly="true" styleClass="footer">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:openPage name="/Comp_Presentation.xsp"
target="openDocument">
</xp:openPage>
</xp:this.action>
</xp:eventHandler>
</xp:viewColumn>
</xp:viewPanel>
</xp:panel>
You can use the following:
<xp:panel>
<xp:div style="display: table; margin: 0 auto">
<xp:viewPanel rows="30" id="viewPanel1">
<xp:this.facets>
<xp:pager partialRefresh="true"
layout="Previous Group Next" xp:key="headerPager" id="pager1">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view1" viewName="($All)"></xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="$106" id="viewColumn1">
<xp:viewColumnHeader value="Date"
id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel>
</xp:div>
</xp:panel>
Just replace the view data with your own code
Wrap a DIV tag and center that DIV tag. I usually open my viewPanels at 80% so it expands to the browser window.
I've been trying to have a simple image map on an image that is in a hidden div.
Once a button is clicked, the hidden div shows and on this image I want to place an image map. but its not working.
I got the show/hide from a jfiddle, take a look...
my button
[label for="home3"][img src="images/bt_modulo.png" alt="" width="92" height="72" /] [/label]
my hidden div
[div class="homeinfo3"]
[input id="home3" type=checkbox][div style="display: none;"] [img src="images/modulo_info.png" alt="" width="568" height="98" border="0" usemap="#modulomap" /]
[map name="modulomap" id="modulomap"]
[area shape="rect" coords="317,9,380,47" class="iframe fancybox-media" href="http://www.youtube.com/embed/azCeJoLcWhI?rel=0" /]
[area shape="rect" coords="385,10,444,45" class="iframe fancybox-media" href="images/Modulo-red.jpg" /]
[/map]
[/div]
When the image appears (div is visible) the map doesn't work.
What am I doing wrong?
test link is here http://manuki.net/test/test.html
The z-index for your "homeinfo3" div is 20, while the "imgright" div is 999. The imgright div is on top of your homeinfo, and therefor on top of your map. Increase the z-index of homeinfo3 to 1000 and your map will start working.
I am creating a division, in which there are some elements. For the example below, there is a sentence inside a division. However when the sentence becomes very long when I insert something through ajax, it seems like the height of the division does not change.
<div style="width:300px;min-height:10px;background:red">
<div style="width:100px;height:inherit;background:blue;float:left"></div>
<a style="width:100px;height:10px;float:left">The length of this sentence is always changing.</a>
</div>
you have to set the height for the div using javascript or using jquery
assign a ID to div e.g
<div style="width:300px;min-height:10px;background:red" id="test">
<a>The length of this sentence is always changing.</a>
</div>
$.ajax({
$(function() {
$("#test").width(100).height(200);//set height or width here
});
});
try to set the height here...
I have multiple eventlisteners to my div: dragstart, dragenter, dragover, dragleave, drop and dragend.
To attach them to my div, I use the body onload function:
function addListeners()
{
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragenter', handleDragEnter, false);
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
col.addEventListener('drop', handleDrop, false);
col.addEventListener('dragend', handleDragEnd, false);
});
}
but this code adds the eventlistener to the whole div. I only want the header of the div to respond to these events:
Now I can click on any part of the div and drag it, but I only want to be able to click on the black part (header) of the div to move it. The black part is a simple header in CSS.
HTML
<body onload="addListeners()">
<div id="columns">
<div class="column" draggable="true"><header>A</header>Textual information inside div A</div>
<div class="column" draggable="true"><header>B</header>Textual information inside div B</div>
<div class="column" draggable="true"><header>C</header>Textual information inside div C</div>
</div>
</body>
A JSFiddle of my full page can be found here.
How can this be done?
You need to add EventListeners to your header elements.
but those event listeners will work only when your headers are draggable=true
so by adding EventListeners to the header and making it draggable=true you can start to drag it.
But there is one problem now, you don't want to drag just the header, but its entire content i.e its parent div. and you want to swap it with the parentNode.innerHTML of the other header(upon which you are dropping).
so, you need to do this:
add events to the header element,
perform all the other operation i.e. grabbing and then swapping innerHTML on the parent of the header i.e. this.parentNode
also when you perform the innerHTML swap, all the event listeners are lost,because now, the very draggable element is recreated, so you will have to call your event binding function addListeners() again.
working fiddle