I have two angularjs components displaying different content placed vertically parallel on a page -
I need to set the height of both components to be be equal. So, I need to increase the height of components B to be equal to height of component A if the height of component A is more than that of component B based on the content that component A is displaying.
Also, whenever the content/height of any of the component increases, I again need to re-adjust the height of other component.
I have tried getting the height of the components on ng-init using heightOffset but get the value as 0 consistently. I have also looked at ResizeObserver, but that has limited browser support at this time.
Any other way to achieve the required behavior?
This can be solved purely with css. You can use a flex-box with align-items: stretch;. Look here for more information.
#container {
display: flex;
align-items: stretch;
}
#left {
display: flex;
flex-grow: 1;
border: 1px solid #999;
min-height: 10px;
}
#right {
display: flex;
flex-grow: 1;
border: 1px solid #999;
min-height: 10px;
}
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
<br>
<button onclick="document.getElementById('left').innerHTML += 'New line<br>'">Add new line to left</button>
<button onclick="document.getElementById('right').innerHTML += 'New line<br>'">Add new line to right</button>
Related
For example for same component at some places I want to use border while at other places border-bottom
How can I achieve this?
Also can anyone please tell me what this code in styled component means:
color: ${prop('theme.color.blue', '#0F0F3A')};
Each properties can take 4 values. Set width to 0 if you don't want the border.
div {
padding: 20px;
border-style: solid dashed dotted solid;
border-width: 10px 20px 30px 40px;
border-color: blue yellow green red;
}
<div> I AM A DIV</div>
The modal's text is rendered correctly, however the background is rendered only within the range of the screen size, when you scroll it's transparent.
I have noticed that the background is rendered only when some action happens like click on a button on that modal or even when i open the Developer Tools.
This works as expected in other browsers though.
Here is the modal container's css
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
overflow: auto;
background-color: rgba(0,0,0,.7);
cursor: pointer;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
And the modal itself
background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;
Any ideas what may be the case with IE's rendering?
I found a way to sort this out.
Inside this modal I am actually rendering another div (which has different composition of text and actions in different pages) that inherits this css:
background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;
But apparently when you scroll down and as the new content loads the style does not apply. After adding once again background-color: ${colors.white}; to the div rendered inside the modal it's all looking nice.
I'm using react-modal
The documentation mentions that the modal should close when you click the overlay by default. Even if I set the shouldCloseOnOverlayClick prop to true, this still does not work.
I'm not aware of anything that might prevent that event from occurring.
In case this is relevant/indicative of anything (and I haven't figured out why this is showing), I noticed in Chrome Developer Tools that my modal's overlay and content nodes both have an undefined class. All the CSS classes I have used are defined and working as they should.
Here's the relevant JSX and CSS, please let me know if more context is required.
JSX:
return (
<div className="Modal">
<Modal
className={{
base: 'Modal-content' + ' Modal-InputError-videoURL'
}}
overlayClassName={{
base: 'Modal-overlay'
}}
isOpen={true}
contentLabel="Modal"
>
{props.message}
<br />
<br />
<br />
<button
className="Modal-button"
onClick={events.handleCloseModal}
>
Close
</button>
</Modal>
</div>
)
CSS classes:
.Modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.35);
z-index: 9998;
}
.Modal-content {
display: relative;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid #ccc;
background: rgb(38,38,38);
border: 1.5px solid rgb(45,45,45);
overflow: auto;
border-radius: 1px;
outline: none;
z-index: 9999;
width: 400px;
margin-left: -150px;
margin-right: -150px;
padding: 24px;
line-height: 16px;
}
.Modal-InputError-videoURL {
height: 134px;
margin-bottom: -67px;
margin-top: -67px;
}
.Modal-button {
display: inline-block;
padding: 4px;
margin: 0;
}
I solved this problem by using onRequestClose (per the docs). It seems that react-modal doesn't store isOpen in its local state, so I provided a callback to onRequestClose that updates the state in the parent component, which is subsequently passed down to the modal as a prop.
http://reactcommunity.org/react-modal/examples/on_request_close.html
isOpen property is statically set to true. You should control its value by keeping isOpen value in your state.
isOpen = {this.state.isModelOpen}
And in handleCloseModal method you can set its value to false.
this.setState({isModelOpen: false})
I tried to use the modal in a certain component but the click overlay close was not working. Then, I moved the modal to the previous component parent, and it started work.
I guess it have to do with z-index, but I am not sure. Sorry for missing details.
Hope it helps you guys!
Edited; see bottom of post
I have a layout that works perfectly in everything except Internet Explorer 7.
I have a container div that has a width and hasLayout (I've tried zoom and various other things that ought to set this, but nothing changes). Inside are three floated elements, one left and two right. Below them is an element that is clear: both and it actually is doing that, but the container is ending at the shorter float even when I set a height for it including a height taller than the originally/naturally taller one.
Here's what it looks like: http://tinypic.com/r/ea3vpy/8
It should look exactly like that, except with the two elements that are awkwardly not in the layout inside the content area.
I've tried adding empty divs with clear: both, I've tried clearfixes, I've tried floating the container. I even added a container around the two right floating divs and floated that instead of them, but it didn't change anything. Overflow is not really an option because then I have to either cut off the content or have scroll bars inside the layout.
Here's the relevant CSS:
#content {
width: 669px;
height: 100%;
padding: 20px;
padding-top: 0;
position: relative;
display: table-cell;
vertical-align: top;
background-color: #F7F8F7;
text-align: left;
}
#content { /* To make it play nice with the sidebar */
_width: 709px;
*display: inline;
*position: absolute;
*left: 0;
*zoom: 1;
}
p#indexwelcome {
max-width: 330px;
min-height: 440px;
float: left;
}
#dogimg {
width: 323px;
max-width: 100%;
height: 246px;
margin-left: 10px;
float: right;
}
#loginbox {
max-width: 323px;
margin: 20px 0;
padding: 10px;
position: relative;
float: right;
}
#itemsbox { /* the one with the bananas */
width: 644px;
height: 142px;
margin-top: 20px;
position: relative;
clear: both;
}
And the HTML:
<div id="content">
<h1>Heading</h1>
<p id="indexwelcome">Text paragraphs here</p>
<img src="images/dog.jpg" id="dogimg" alt="dog" />
<div id="loginbox">
<p>Login box stuff</p>
</div> <!-- loginbox div -->
<div id="itemsbox">
<!-- banana images here -->
</div> <!-- itemsbox div -->
</div> <!-- content div -->
EDIT: So I fixed the issue although it's not quite ideal. Setting the content and sidebar to height: auto (as opposed to height: 100%) made them expand for their content.
However that page container (the green space) still won't expand even with height: auto. I have to set a specific min-height or height, which isn't great because the page content is dynamic, so other pages have extra space if their content is shorter than what it's set for and it'll be the same original problem if the content is larger. And then of course the content and sidebar boxes still aren't the same length (but that's a whole other issue).
Here's the page CSS:
#page {
width: 1025px;
height: 100%;
min-height: 650px;
margin: 15px auto;
padding: 10px 0;
position: relative;
background-color: #7B9F73;
*min-height: 990px;
}
this is driving me crazy...might be something very simple and I just need another set of eyes to look at it...
I have this in my CSS:
#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
padding: 11px 0;
font-size: 0.875em;
}
and call it here in my HTML:
<div id="recipient">
<h3>Meet the 2010 Recipient!</h3>
<img src="images/2010_headshot.jpg" alt="foo" />
</div>
Pretty simple, right? In Firefox it renders about 20px longer in height than IE7 (I can tell by where the bottom of this div hits next to other elements on the page). I am running in standards mode, and have looked at the Firefox version in Firebug and the IE version with Firebug Light and the IE Dev Toolbar -- don't see anything weird in either... the top of the div starts in the right spot, so it doesn't look like the margin collapsing...
If I manually add padding/height to the CSS, I can get IE7 to line it up at the right height, but then the div in Firefox is too long! It's not a critical part of the design, but it's bugging the sh!t out of me!!
Thanks in advance...
It's IE and the different way it's handling the default h3 margins inside a floated element
usually this can be fixed by giving the offending element (any element which has default margins!) explicit margins, but in this case it's not working because of the top padding of the container ?
The best fix I can come up with is to remove the top padding from the #recipient div and explicit;y make the top/bottom margins on the h3 11px, this makes for nice even spaces through the effect (btw this extra bit only happens if the div is taller than the min height) - here's some working code - I also put a background color on the h3 which if you do in your code will show the 15px or so extra gap..
CSS:
#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
margin: 0;
font-size: 0.875em;
padding-bottom: 11px; /* bottom padding only */
}
h3 {
margin: 11px 0; /* explicitly set these */
background: #fcf;
}
HTML: (with placeholder image for testing)
<div id="recipient">
<h3>Meet the 2010 Recipient!</h3>
<img src="http://placekitten.com/350/200/" alt="foo" />
</div>