I'm using a dojo ContentPane to render an openlayers map. When the DOM is ready and the map is inserted the sytle of the dijit is overwritten. I've tried specifiying the height and width in a CSS by class and id, and also inline in my html.
My html:
<div id="map-id"
class="centerPanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'center', style: 'width: 1468px;'">
</div>
my CSS:
#map-id {
width: 1468px;
height: 471px;
}
.centerPanel {
width: 1468px;
height: 471px;
}
my actual html from firebug:
<div id="map-id" class="centerPanel dijitContentPane dijitBorderContainer-child dijitBorderContainer-dijitContentPane dijitBorderContainerPane dijitAlignCenter olMap" data-dojo-props="region: 'center', style: 'width: 1468px;'" data-dojo-type="dijit.layout.ContentPane" title="" role="group" dir="ltr" style="width: 1455px; left: 252px; top: 48px; right: auto; bottom: auto; height: 456px;" widgetid="map-id">
As you can see my data-dojo-props styling is ignorded and the new height and width are inserted...any ideas?
I have tried this in dojo grid and it also does not work. I suggest that you try doing it on javascript code.
add a style object with width and height attribute in the container object instead.
myGrid = new DataGrid({
store: myObjectStore,
structure : myStructure,
style: {
width: '1000px',
height: '500px',
},
}, "myGrid");
I believe that the declarative way does not work.
The center region of a BorderContainer gets sized to fill up any remaining space available. If you want your center region to be a particular size then you need to style the BorderContainer rather than the widget that occupies the center region.
You might need to add a doLayout:false on your container, if any :)
Related
So, I am making a widget component in react, and I need to add an icon that needs to be centered. I have this code:
<div className={classes.textCenter}>
<i className={"fas fa-lungs fa-2x"} />
</div>
But I get this:
See that the enclosing element (the i tag) is centered, but the icon is bigger.
I also have the following jss code:
"& .fab,& .fas,& .far,& .fal,& .material-icons": {
position: "relative",
display: "inline-block",
top: "0",
verticalAlign: "middle",
textAlign: "center"
},
but that doesn't appear to be making any difference.
Thanks in advance.
Please try this for the parent div -:
.textCenter{
display: flex;
justify-content: center;
align-items: center;
}
Also please remove any existing icon classes.
Using Aurelia, I created a very simple component with HTML:
<template>
<h1
draggable="true"
css="width: ${width}px;
height: ${height}px;
color:${color};
left: ${left}">
${message}
</h1>
</template>
And TypeScript:
export class Navigation {
message: string = 'Component Text';
width = '400'
height = '250'
color = 'red'
left = '100'
}
All the CSS attributes works as expected, except the left: 100px
The objective is to use the top and left to dynamically set the position of the component. This is also the reason for the draggable="true" attribute.
I can see in the rendered HTML the left: 100px is present but has no effect.
Am I doing something wrong?
Position CSS property should be set to 'relative' or 'absolute' in order to get it working: http://www.w3schools.com/cssref/pr_pos_left.asp
I use jsf, richfaces version:v.3.3.1.GA. I want to reduce height style of rich:editor tag (use tinyMCE) but it's not change.
<rich:editor id="transactionResult" style="height: 10px;" height="10"
value="#{transactionsHome.instance.transactionResult}"
theme="simple" viewMode="visual">
</rich:editor>
How can i change height or other style of rich:editor tag ?
Use important to override the style.
style="height: 10px !important;"
For highlighted classes, add the following into your CSS:
.mceLayout {
height: 10px;
}
And for iframe:
#iframeID {
height: 20px;
}
Replace iframeID with your iframe id.
I am upgrading our site so it is responsive.
At the moment a typical link of mine has a hard coded width for the onclick function:
An example of one I use is as follows:
<a href="#" onclick="return hs.htmlExpand(this, { width: 700 } )">
<b>This is the title</b></a>
<div class="highslide-maincontent" style="font-weight:normal">
This is where the content is
</div>
However I would like it to have that for when the resolution is over 500px, under and I would want it to have a width of 90%
Thank you
You can set the width of the popup using CSS instead of using the width variable in the onclick. Define width: 700px; for all browser widths, and override this with width: 90%; when the browser has a max-width of 500px.
Use an onclick without the width variable:
onclick="return hs.htmlExpand(this)"
Add this below the highslide.css file in the head section of your page:
<style type="text/css" media="all">
.highslide-html-content {
width: 700px;
}
</style>
<style type="text/css" media="(max-width: 500px)">
.highslide-html-content {
width: 90%;
}
</style>
I (absolute beginner) would like to put an image into a box with a little margin around. I tried with padding and so, didn't work. Then I tried this:
<div style="border:1px solid #CC6699; width:11em; height:5.5em;">
<img style="align:center; width:10em; height:5em;" src="path">
</div>
But instead the image gets stuck in the upper left corner.
Couple of ways to do this:
My usual is to set a background image instead.
In your css:
div#img_container {
background: url(images/myImage.png) center center
}
In your html:
<div id="img_container"></div>
Or to just put some padding around it in your CSS
img#myImage {
padding: 20px;
}
and the HTML
<img id="myImage" src="images/myImage.png" />
Try this:
<html>
<head>
<style>
#wrap {
width: 500px;
text-align: center;
}
.pic {
padding: 5px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<img src="logo.gif" class="pic">
</div>
</body>
</html>
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
<div style="border:1px solid #CC6699; width:11em; height:5.5em;text-align:center;vertical-align:middle;display:table-cell;">
<img style="width:10em; height:5em;" src="path">
</div>
EDIT
As rpflo suggests, using the background-position property is especially great if the container happens to be smaller than the image. Just remember to include the "background-repeat:none" style if you don't want the image to be tiled.
Use the following small jQuery plugin. It centers the loading image in the middle of the specified container (vertically and horizontally):
http://plugins.jquery.com/project/CenterImage
Demo site:
http://www.demosites.somee.com/demos/centerimage.html
Usage: This plugin positions a loading image centrally over a specified html container (div, span...).
Currently available configuration settings:
{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }
Minimum configuration for initialization:
$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });
Call this, in order to remove the loading image (and the overlay)
$('.4th').CenterImage('remove');