I created a simple floating pane declaratively(the below code) . everything is good. I have a button that click on it and the floating pane will open. the problem is that if i again click the button, the floating pane position is change from the previous position . How can i set position of the floating pane. another problem is the top,left and position:absolute is not working for my floating pane .
<body class="claro" role="main">
<div id="bc" style="width:100%; height:100%; padding: 5px;" dojoType="dijit.layout.BorderContainer">
<div id="header" dojoType="dijit.layout.ContentPane" region="top" splitter="true">
</div>
<div dojoType="dojox.layout.ExpandoPane"
splitter="true"
duration="125"
region="left"
previewOnDblClick="true"
id="leftPane"
maxWidth="275"
style="width: 275px;">
<div dojoType="dijit.layout.TabContainer" attachParent="true" tabPosition="bottom" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="Legend">
<div id="legendDiv"></div>
</div>
<div dojoType="dijit.layout.AccordionContainer" title="Search" style="width:275px;" attachParent="true">
<div dojoType="dijit.layout.ContentPane" title="Attribute search">
<div class="searchBar">
<p>
<label for="searchBox" style="float: left;">Search:</label>
<input id="searchBox" name="searchBox" style="float: left;">
<span id="runSearchIcon" style="border: none; floast: left; padding: 3px;">
</span>
</p>
</div>
<ul id="dojoList"></ul>
</div>
<div dojoType="dijit.layout.ContentPane" title="spatial search">
<ul id="dijitList"></ul>
</div>
</div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="center" id="centerPane" tabStrip="true">
<div id="mymap" style="width:100%;height:100%"> </div>
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
style="position:absolute;top: 100px;;left:0;width:70px;height:150px;visibility:hidden;">
This is the content of the pane!
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>
</div>
</div>
</div>
</body>
Easiest way would be to set the position:absolut with every click on the Button to the first position by using domStyle.
domStyle.set("dFloatingPane",{
position:"absolute",
top:"100px",
left:"0px"
});
Simple solution just create a div and set position relative , position relative control absolute, here is the sample code eg. check and understand
<div style="position:relative">
<div data-dojo-type="dojox.layout.FloatingPane" id="dFloatingPane"
title="A floating pane" data-dojo-props="resizable:false, dockable:true,closable:false, title:'Tools'"
style="position:absolute; top: 100px; left:0; width:70px;height:150px; visibility:hidden;">
This is the content of the pane!
</div>
<div data-dojo-type="dijit.form.Button" data-dojo-props="label:'Show me', onClick:function(){dijit.byId('dFloatingPane').show();}" style="position:absolute;top: 150px;left: 20px;"></div>
</div>
Position:relative Control position:absolute , so you can set your top or bottom position accordign to your dessign thanku, hope you understand my point.
Related
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style='display:inline'>
Twin Peaks
</div>
</div>
So I have the above image with a text next to it. The thing is that I want the text next to it to appear not on the bottom right but at the middle right/ top right of the image with some space between the image and text. How can I achieve it?
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' style='vertical-align:middle' height=300px>
</div>
<div style='display:inline'>
Twin Peaks
</div>
</div>
Solved it by adding vertial-align:middle !
You can use position absolute on the text and then align the text anywhere you want using the top property.
Example:
<div>
<div style='display:inline'>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style="display:inline; position:absolute;">
Twin Peaks
</div>
</div>
You can achieve it by using flex in the parent. Just set align-items: center
<div style="display: flex; align-items: center;">
<div>
<img src='https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg' height=300px>
</div>
<div style="margin-left: 10px;">
Twin Peaks
</div>
</div>
<div>
<div style="float: left;">
<img src="https://m.media-amazon.com/images/M/MV5BMjA5MTkzNTY5Ml5BMl5BanBnXkFtZTgwNjU4MzY1MTI#._V1_QL50_SY1000_CR0,0,734,1000_AL_.jpg" height="300px" />
</div>
<div style="float: left; margin-left: 10px;">
Twin Peaks
</div>
</div>
It'll set your Text top right side of your image.
It seems it'd work. I don't know why... My description is too far over.
HTML
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:right"> <strong>Description:</strong></div>
<br />
now I understand.
Try to do this:
<div id="viewPhoto">
<div id="viewThumb" style="float: left">
<img src="http://images.br.sftcdn.net/br/scrn/73000/73753/santos-5.jpg" />
</div>
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
<div class="moderPanel" style="float:left; border:1px solid green; clear: left">
$MODER_PANEL$
</div>
Because you are putting the div in a float right way.
Try do to left using margin left. Like this:
<div id="photo-information" style="float:left; margin-left: 20px"> <strong>Description:</strong></div>
It's because your float:right CSS statement is causing ithe description to float to the right of your container element. Try using float:left together with a small margin like this:
<div id="viewPhoto">
<div id="viewThumb">
<img src="$THUMBNAIL_URL$" /><br>
</div>
<div class="moderPanel" style="float:left">
$MODER_PANEL$
</div>
<div id="photo-information" style="float:left; margin-left:15px;"> <strong>Description:</strong></div>
<br />
...
In the code below I added input button to the leftPane div.
Here I have two div's/ Left 80% and right 20%.
Now I want to position this button to be vertically in the middle and on the right side in the leftPane.
But it when I set 'right:0;' it goes to the right side of the browser, and not of the right side of the leftPane.
Why?
<body style="overflow:hidden;">
<div style="background: #ff0000; position: fixed; top:0; left:0; width:100%; height:100%;">
<div id="leftPage" style="width:80%; height:100%;background:#00ff00; float:left;text-align:center;">
<img src="http://fc07.deviantart.net/fs45/f/2009/106/c/1/HD_Nature_Wallpapers_by_CurtiXs.jpg" alt="test" style="max-width:90%; max-height:90%;"/>
<input type="submit" value="Next" style="width:40px;height:70px;position:absolute;top:50%;right:0;"/>
</div>
<div id="rightPane" style="width:20%; height:100%;background:#0000ff; float:left;">
<div id="commentBox" style="background:#dddddd; width:90%; height: 50px;">
<input type="text" placeholder="Enter here..." />
</div>
</div>
</div>
</body>
You need to have the parent <div style="position: relative;"> otherwise your absolute positioning is defaulting to your <body>
To clarify, set #leftPage to relative positioning.
I have the following HTML:
<fieldset>
<legend>Details</legend>
<div class="form-section first">
<div class="abc">
<div class="editor-label">
<label for .../>
</div>
<div class="editor-field">
<input type="text" ... />
</div>
</div>
<div class="def">
...
</div>
<div class="ghi">
...
</div>
</div>
<div class="form-section">
</div>
<div class="form-section last">
</div>
</fieldset>
I have a fieldset that is wrapping all of my form elements. The fieldset contains multiple form sections, which basically hold one "row" of content. The divs in the form sections I want to float to the left:
||||||| ||||||| ||||||| <-- first form section, 3 floated elements
||||||| ||||||||||| <-- second form section, 2 floated elements
What is the proper way to float these elements so that:
1) The second form section occurs on its own line.
2) The second form section can apply a top margin.
I can't seem to get it right. I need the solution to work in IE7. I tried putting a clear: both on the form-section element but it didn't seem to work right. All 5 elements occurred on the same line instead of 2 separate lines.
** EDIT **
I can somewhat get this to work. My issue is the following:
When I float the elements within a container, they essentially have 0 height. This messes up any containers that come after it if they want to apply a top margin.
for the row of three try:
<div style="clear:both; width:100%;">
<div style="float: left;"></div>
<div style="float: left;"></div>
<div style="float: right;"></div>
</div>
<div style="clear:both; width:100%; height:10px;"></div>
<div style="clear:both; width:100%;">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
That should get you the desired output.
<fieldset>
<legend>Details</legend>
<div id="section 1">
<span style="height: 500px;">1</span>
<span style="height: 500px;">2</span>
<span style="height: 500px;">3</span>
</div>
<div id="section 2" style="margin-top: 50px;">
<span>4</span>
<span>5</span>
</div>
</fieldset>
I have on my page a grid where I show log history and a refresh button ( onclick I refresh the grid with new data ).
<div dojoType="dijit.layout.ContentPane" title="Log history">
<button dojoType="dijit.form.Button" id="btn_refresh" onclick="load_logs" style="float:right; border:1px solid black;">Refresh</button>
<div dojoType="dojo.data.ItemFileReadStore" jsId="log" data="window.store_data_log"> </div>
<div id="grid_log" dojoType="dojox.grid.DataGrid" store="log" structure="window.layout_log" queryOptions="{deep:true}" query="{}" clientSort="true" rowsPerPage="5"> </div>
</div>
Before
After
Problem is that when I click, in Chrome, my refresh button moves up and become half visible. I tried to put <BR/> after the button but then grid is then not visible at all. I tried to put the button in a new but also then grid is not visible at all. What to do ?
I had a similar issue and decided to use dijit.layout.LayoutContainer and dijit.layout.ContentPane which has worked great. On the main content pane just set layoutAlign="client" and it will take up the remaining layout space.
<div dojoType="dijit.layout.ContentPane"
title="Log history">
<div dojoType="dijit.layout.LayoutContainer"
style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane"
layoutAlign="top"
style="height:28px;padding:2px;">
<button dojoType="dijit.form.Button"
id="btn_refresh"
onclick="load_logs"
style="float:right; border:1px solid black;">
Refresh</button>
</div>
<div dojoType="dijit.layout.ContentPane"
layoutAlign="client"
style="padding:0px 2px;">
<div dojoType="dojo.data.ItemFileReadStore"
jsId="log"
data="window.store_data_log"> </div>
<div id="grid_log"
dojoType="dojox.grid.DataGrid"
store="log"
structure="window.layout_log"
queryOptions="{deep:true}"
query="{}"
clientSort="true"
rowsPerPage="5"> </div>
</div>
</div>
</div>