I am using a Dojo Dialog that contains a TabContainer which has a ContentPane that contains both an image and a nested ContentPane with text. I would like the nested ContentPane to scroll, but I don't want its parent container with the image to scroll.
<div data-dojo-type="dijit/Dialog" data-dojo-id="dialogWelcome" data-dojo-props="title: 'About'" style="width: 650px; align-content: center;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {width: '100%', height: '600px'}">
<div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction', style: {overflow: 'hidden'}">
<img id="projectImage" src="../images/island.png" />
<div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0}">
about this project
</div>
</div>
The content of "divDialogMessage" is added dynamically. This gives me the following dialog
If I change the style of divContainer to
<div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction', style: {overflow: 'auto'}">
then I get what I don't want, which has the parent ContentPane with both image and text scrolling.
What's the correct syntax to only have the text ContentPane scroll?
You would need to explicitly give your inner ContentPane a height via CSS too, otherwise there's nothing constraining it to need to handle overflow in the first place.
Example with minimal modification to your code:
<div data-dojo-type="dijit/Dialog" data-dojo-id="dialogWelcome" data-dojo-props="title: 'About'" style="width: 650px; align-content: center;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {width: '100%', height: '600px'}">
<div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction'">
<img id="projectImage" src="../images/island.png" />
<div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0, height: '500px'}">
about this project
</div>
</div>
</div>
</div>
</div>
Unrelated:
Avoid using data-dojo-id since it creates global variables. Assign an id then use dijit/registry.byId to retrieve widgets when necessary.
Whenever possible, prefer actual stylesheets to inline styles.
You need to set the height of the ContentPane equal to the size you would like the text to occupy.
<div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0, height: '150px'}">
lots of text goes here to make overflow...
</div>
Here is a working example: http://jsfiddle.net/kagant15/0s21v90g/
Related
I'm floating DIV in pixels and DIV in percentage. Which works just fine.
But whenever I use clear: both inside of percentage DIV rest of the content jumps down. But I have to use clear:both inside of it, because inside I'm floating another DIVs.
<div style="width: 100%;">
<div style="width: 100px; height: 200px; background: blue; float: left;"></div>
<div style="background: green;">
aaa
<div style="clear: both"></div>
aaa
</div>
</div>
I tried float it by position: absolute. But this destroys rest of my web.
I'm not sure about using calc() (not supported by all browsers)
No javascript
I don't have any other ideas
Clear:both
doesn't allow any div to float either on right or left side.
try giving height property.
The desired output is not clear.
EDIT:
use
<img src="images/logo.png">
use ' ' (single quotation marks) rather than " " after echo since / will end it.
EDIT 2:
<div style="width: 100%;">
<div style="width: 100px; height: 200px; background: blue; float: left;"></div>
<div style="background: green;width:100%;">
<div style="background-color:red;width:100px;float:left;">
Product 1
<div style="">
Header
</div>
</div>
<div style="background-color:red;width:100px;float:left;">
Product 2
<div style="">
Header
</div>
</div>
</div>
I have page structure like this:
<div class='row'>
<div class='col-md-12'>
some fixed contents
</div>
</div>
<div class='row' style="overflow-y: scroll, position: absolute;">
<div class='col-xs-1'></div>
<div class='col-xs-10'>
<div ui-view></div>
</div>
<div class='col-xs-1'></div>
</div>
<div class='row'>
<div class='col-md-12'>
some fixed contents
</div>
</div>
I am not able to draw a scroll bar if they don't fit into screen. Extra contents inside ui-view getting hidden.
What changes are needed for that?
You need to set height in CSS to see vertical scroll bar.
#inner-sroll {
height: 300px;
max-height: 300px;
overflow-y: scroll;
}
W3schools-overflow-link
I'm using bootstrap to display a set of sm-4 divs. Each of these includes a panel, which header contains an image. These images got variable sizes,however, I would like to get these columns to share the same height. Is it possible ?
So far, this is the html
<div class="row">
<a href="/app_dev.php/fly/50" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/AAT3.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Falaise - Dieppe</h4>
<p>3 places</p>
</div>
</div>
</div>
</a>
<a href="/app_dev.php/fly/48" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/BE36.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Bordeaux - Toulouse</h4>
<p>1 place</p>
</div>
</div>
</div>
</a>
<a href="/app_dev.php/fly/46" class="fly_a">
<div class="col-sm-4 flycard">
<div class="panel panel-default unpan">
<div class="panel-body planepi">
<img src="/Planes/DA20.jpg" class="img_responsive" width="100%">
</div>
<div class="panel-footer">
<h4>Flers - Pontoise</h4>
<p>1 place</p>
</div>
</div>
</div>
</a>
</div>
Here's the CSS (This is what I tried so far)
.flycard
{
text-align: left;
}
// EDIT : ADD THIS TO SOLVE THE PROBLEM
.planepi
{
max-height: 200px;
min-height: 200px;
overflow: hidden;
height: 100%;
width: 100%;
}
.planepi img
{
max-width:100%;
max-height:100%;
}
And, here's the result
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted for some CSS properties, negative lengths are allowed
There are two types of length units: relative and absolute.
w3schools css units
.planepi {
min-height: 30vh;
height: 30vh;
max-height: 30vh;
overflow: hidden;
}
vh Relative to 1% of the height of the viewport
For anyone with the same problem, you need to specify the max-height of the div that holds the image:
.planepi {
max-height: 200px; //this is the max height you want
overflow: hidden; //everything that goes bellow 200px will be hidden
}
Of course it is easier for you to prepare the images to be in the same height, but this will work.
I cannot seem to get these Google map divs to sit side by side. It was working fine until I decided to restructure it.
It consists of 4 divs, one above the other on the left and one above the other on the right. The two on the left are in their own container and the two on the right are in a container. Those two containers then sit side by side inside a bigger container.
It is all about being able to turn on and off the display of the individual sides (map vs pano) including the lat/long readout that sits above each map.
This is the earlier version that was working fine but was messy. To turn off the streetview pano for example I would have had to turn off two divs.
<div style="float:left; width: 512px;">
<table>
<tr><td><b>Lat/Lng:</b></td><td id="mappos">-33.1234,150.1234</td></tr>
</table>
</div>
<div style="float:left;">
<table>
<tr><td><b>Lat/Lng:</b></td><td id="svpos">-33.12345,150.12345</td>
<td><b>Hdg:</b></td><td id="hdg">90</td></tr>
</table>
</div>
<div style="clear:both;"></div>
<div style="width: 1024px; height: 512px">
<div id="map" style="float:left; width: 50%; height: 512px;"></div>
<div id="pano" style="float:left; width: 50%; height: 512px;"></div>
</div>
This is the new neater code that would supposedly allow easier switching on and off of each side but it does not work. The two pairs of divs sit on top of each other instead of side by side. It is no doubt an obvious error but I cannot spot it. I have looked at numerous other posts about side-by-side divs but cannot see what I am doing wrong.
Originally I had the left and right container divs specified with width 512px but when I tried to expand them to 1024px via Javascript it did not work. I therefore used 50%. When I change that to 100% followed by map resize it expands fine.
<div style="clear:both; width: 1024px;">
<div id="mapdiv" style="float:left; width: 50%"></div>
<div style="width: 512px;">
Lat/Lng: <span id="mappos">-33.1234,150.1234</span>
</div>
<div id="map" style="width: 512px; height: 512px;">
</div>
</div>
<div id="panodiv" style="float: left; width: 50%"></div>
<div style="width: 512px;">
Lat/Lng: <span id="svpos">-33.12345,150.12345</span> <span id="hdg">90</span>
</div>
<div id="pano" style="width: 512px; height: 512px;">
</div>
</div>
</div>
I thought it could be a padding issue. I tried increasing the width of the outer container to 1040 etc. but to no avail.
Here is a fiddle: http://jsfiddle.net/Lack10o0/
You just have to remove the unnecessary closing </div>s on line 2 and 9.
Edit : I updated your jsfiddle
You have too many closing tags. Take out the </div> after <div id="mapdiv" style="float:left; width: 50%"> and after <div id="panodiv" style="float:left; width: 50%">
Here is the corrected code:
<div style="clear:both; width: 1024px;">
<div id="mapdiv" style="float:left; width: 50%">
<div style="width: 512px;">
Lat/Lng: <span id="mappos">Top left div</span>
</div>
<div id="map" style="width: 512px; height: 512px;">Bottom left div
</div>
</div>
<div id="panodiv" style="float: left; width: 50%">
<div style="width: 512px;">
Lat/Lng: <span id="svpos">Top right div</span> <span id="hdg">90</span>
</div>
<div id="pano" style="width: 512px; height: 512px;">Bottom right div
</div>
</div>
</div>
Looks like you have a couple closing tags to many there. You have 7 opening divs and 9 closing divs. The faulty ones are probably the ones behind #mapdiv and #panodiv.
Right now I've got a webapp working, which I'm trying to add icons to, along with text to describe those icons. I'm trying to scale the icons down to fit in the div, which works great, but also to scale the image to hold text within the div. The issue I'm having is that although the image will scale to fit in the div, it won't scale enough to also allow text in the div.
My HTML code is
<div class="ui-grid-b" id="dashGrid">
<div class="ui-block-a changerbutton" style="height:60px;border-bottom: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
<center>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
<h4 class="gotobutton" goto="#formSelect" data-icon="grid">Forms</h4>
</center>
</div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c changerbutton" style="height:90px;border-bottom: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
<center>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
<h4 class="gotobutton" goto="#entries" data-icon="info">Entries</h4>
</center>
</div>
<div class="ui-block-a" style="height:22%"></div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c" style="height:22%"></div>
<div class="ui-block-a changerbutton" style="height:22%;border-top: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
<center>
<h4 class="gotobutton" goto="#mapScreen" data-icon="star">Map</h4>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
</center>
</div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c changerbutton" style="height:22%;border-top: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
<center>
<h4 class="gotobutton" goto="#locSettings" data-icon="gear">Settings</h4>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
</center>
</div>
</div>
, and the relevant CSS is
.windowscale-height
{
max-height: 100%;
max-width: 100%;
min-height: 1%;
min-height: 1%;
}
I've got a JSFiddle that shows the issue, http://jsfiddle.net/jDDmC/.
Ideally, the text, as well as the image, would both fit into the outlined boxes.
Any help would be appreciated!
A couple of things:
1) Remove the <center> tag since it's been deprecated. Use text-align: center in your css, instead.
2) Your divs have a specific height, and because of that, the text goes out of the box. So in the inline css, remove the height property.
3) Finally, consider using only an external stylesheet (instead of inline css), since it's easier to maintain and reuse.
Please take a look at:
http://jsfiddle.net/jDDmC/1/
Maybe you're looking for something like Fluid Images ?