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
Related
I am trying to display my projects on my website and want a description to appear when the image is havered over. I can get the text to appear on hover but it covers the whole div which is wider than the image. I want the text to match the image width and not the container.
Heres my JSX- added the mapping for context but my question pertains to whats between the component:
{content.map((item, id) => (
<div key={id} className='border'>
<p className='projectTitle'>{item}</p>
{url[item][2] !== ''
? (<div className='center' onMouseEnter={() => onHover(item)} onMouseLeave={onLeave}>
<figure className='center'>
<img src={url[item][2]} alt={item} className='portfolioIcon center'/>
{hover === item
? <p className="textOver" onMouseEnter={() => onHover(item)}>{url[item][3]}</p>
: null }
</figure>
<br />
</div>)
Here's the CSS- I can cheat a bit by defining the text width to 25vw but not all images are the same width and so it still doesn't match the width properly on all images. I would like a way to set the width to be that of the underlying image.
.textOver {
position: absolute;
background-color: rgba(0,0,0,0.6);
width: 25vw;
}
.portfolioIcon {
height: 25vh;
width: auto;
}
I also have the items displayed in a grid format so I want the 25vh constant with auto image widths and so I cant simply set the width to be constant.
I want to assign height to parent div based on the child content (here SVG is my child which can have different content based on data). If I assign fixed height either to parent or the child, it gives issue when content changes. It works fine for the width (automatically alter div width based on content) but not for height. Here is my code snippet.
React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);
function colorLegend(legend: string) {
// logic
if (colorLegend) {
select(legend)
.append("svg")
.attr("overflow","visible")
.attr("width", 150 + "px")
.call(colorLegend);
}
}
return (
<div style={{position: "absolute",right: 16,top:
10,backgroundColor: "black",borderRadius: "5px",padding:
"10px"}}>
<label style={{ color: "#6F6F6F" }}>
{name}
</label>
<div id="legend"></div>
</div>
);
Fiddle link: https://jsfiddle.net/1sv3Lwar/
I think the reason your parent <div> isn't "growing" vertically is because you are using:
position: "absolute"
Using absolute positioning or floats will cause this.
Although, assuming you need the absolute positioning, so adding: overflow: hidden should do the trick.
I created a wrapper for my app in React. I am trying to get the footer to stay at the absolute bottom of the page but when the children render, the footer stays at the original bottom of the page and does not resize with the page. Code below. (imagine a scrollable page with a footer in the middle now after child renders).
import React, { Component } from 'react';
import Header from "./Header";
import Footer from "./Footer";
export default class Wrapper extends Component {
render() {
return (
<div className="app-wrapper">
<Header/>
<div className="content">
{this.props.children}
</div>
<div>
<Footer/>
</div>
</div>
);
}
}
I'm not that good at CSS. Any ideas as to what I could try? I have already tried googling around for solutions to no avail.I have tried the basic solutions such as position:relative; left:0; bottom:0; right:0; position: fixed, position: absolute etc.
You should give position: relative|fixed (depending on your needs) to the parent container.
For exemple :
<div style={{ position: 'fixed', bottom: '0' }}>
<Footer />
</div>
HTML dock to bottom
sorry for the confusion guys. I had the style redefined in my css file so my styles were being overridden. :(
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 :)
I have an example on http://jsfiddle.net/SsYwH/
In case it don't work
HTML:
<div class="container">
<div class="absolute">
Testing absolute<br />
Even more testing absolute<br />
</div>
A little test<br />
</div>
CSS:
.container {
background: green;
}
.absolute {
position: absolute;
background: red;
}
Problem
I use jQuery to create a slider-effect. To do that I need to set position absolute.
The red block in my code is the position absolute slider.
The green block is the container.
I still want the container to be set by it's childs height. Now it don't know it because of the position absolute. Solution?
Absolutely positioned elements do not count towards the container's contents in terms of flow and sizing. Once you position something absolutely, it will be as if it didn't exist as far as the container's concerned, so there's no way for the container to "get information" from the child through CSS.
If you must allow for your scroller to have a height determined by its child elements without Javascript, your only choice may be to use relative positioning.
Then you'll also need to use jQuery to fix the height of the container div. Like so:
http://jsfiddle.net/khalifah/SsYwH/24/
$( document ).ready(function() {
$( ".container" ).each(function() {
var newHeight = 0, $this = $( this );
$.each( $this.children(), function() {
newHeight += $( this ).height();
});
$this.height( newHeight );
});
});
This is wrong however, since an absolute positioned element can sit outside of it's container. What you really what is something that will find the bottom of the element that sits lowest in the containing div, with respect to the view.
jQuery('.container > .absolute').each(function() {
jQuery(this).parent().height('+=' + jQuery(this).height());
jQuery(this).css('position', 'absolute');
});
.container {
background: green;
position: relative;
}
.absolute {
position: absolute;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="absolute">Testing absolute<br />Even more testing absolute<br /></div>
Yo
</div>
This should do what you are wanting. Note that this assumes that the absolutely positioned element must be an immediate child.
Also note that you remove the '+=' + in the height function if you want the parent element to have 100% height of it's child element.
http://jsfiddle.net/SsYwH/21/
You can do something like this with jquery. Call ghoape(jqueryElement).
var ghoape = function getHeightOfAbsolutelyPositionedElement( element ){
var max_y = 0;
$.each( $(element).find('*'), function(idx, desc){
max_y = Math.max(max_y, $(desc).offset().top + $(desc).height() );
});
return max_y - $(element).offset().top;
}
This will go through all the descendants and find the max height and return the difference between the childs.offset() + its height and then subtract that from the elements offset.