Develop Reference

React Component height is not dynamically changing

The working on a project I can't understand why the heights of my components are fixed around 200px to 500px randomly.
I have tried adding height to the root id, but it doesn't affect the div they remain the same.
I'm adding a screenshot for better understanding:
What will be the best way to fix this, as my goal is to make this project dynamic. When I add more fields or elements, then this will be the big problem, causing other elements to lap over - like my footer is overlapping the elements, if I want to add more as in the image:
Global CSS Variables:
:root{
--clr-white: #fff;
--clr-black: #111;
--clr-grey-light: #f7f7f7;
--clr-grey-lighter: #ebebeb;
--clr-grey-lightest: #d8d8d8;
--clr-grey-dark: #999;
--clr-grey-darker: #777;
--clr-grey-darkest: #333;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--radius: 2rem;
--sm-radius: 1rem;
--light-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
--light-shadow-white: 0 0 10px rgba(200, 200, 200, 0.1);
--dark-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
--dark-shadow-white: 0 0 10px rgba(200, 200, 200, 0.3);
--max-width: 1170px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-size: 16px;
background: var(--clr-black);
font-family: futuramedium;
}
.container{
max-width: var(--max-width);
margin: 0 auto;
padding: 0 10vw;
}

how to print slide number on controlNav in flexslider

I want slide number on each navigation bar bullet points
HTML code
<div id="slideshow">
<div class="container">
<div class="flexslider showOnMouseover ">
<ul class="slides">
<li> <img src="sliders/images/1.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-1.png" alt=""></div></li>
<li> <img src="sliders/images/2.png" alt="" /> <div class="flex-caption"><img src="sliders/images/1-2.png" alt=""></div></li>
</ul>
</div>

you can do that by removing a class name
use the below code to do it as soon as the slider starts.
$('.flexslider').flexslider({
start : function(){
$('.flex-control-paging').removeClass('flex-control-paging');
}
});
NOTE: You may need to change some more css to make it look pretty

Anyone still looking for the solution to this as I was, it can be solved simply by modifying the style sheet 'flexslider.css'.
The script already gives each nav link a number, but hides the number from view using a text-indent of -9999px. To get the numbers back, modify the class '.flex-control-paging li a'. As an example, here's the original:
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Modify it to:
.flex-control-paging li a {
width: 20px;
height: 20px;
font-size: 20px;
display: block;
background: #ddd;
cursor: pointer;
}
And...
.flex-control-paging li a:hover {
background: #333;
color:#eee;
}
.flex-control-paging li a.flex-active {
background: #333;
color:#FFF;
cursor: default;
}
Should give you a good starting point to add your own style to.

Rounded Div Briefly Showing as Square on Initial Load

I used
// make main container visible
$( window ).load(function() {
$( "#video-container" ).css( "visibility", "visible" );
});
but no luck. I figured the css would have already been applied to the div on load, but maybe I'm missing something.
CSS is as follows:
#video-container {
background-color: #191919;
border: 3px solid #999;
box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
left: 50%;
margin-left: -13%;
margin-top: -13%;
opacity: 1;
padding: 0;
position: absolute;
top: 50%;
vertical-align: middle;
visibility: hidden;
width: 26%;
z-index: 2;
}

There is no border-radius declaration in your CSS so it's likely that this is set somehwere else,
I suggest that you check your other CSs/JS/JQ functions to ensure that this is added at the appropriate time.

Try using this...
$( "#video-container" ).show();

Customizing existing twitter bootstrap modal styles

So I'm pretty new to CSS. I know there is some inheritance, but besides font, I'm not always sure where it applies. So what I'm trying to do, is modify the twitter bootstrap modal class. There is a backbone view that is being shown currently with these classes:
modal hide fade
What I want to do is extend the width and height of the modal view but keep all of the other modal CSS properties in tact. Is there a way to do this? In my own local.less file for my project, I first tried doing what I googled which was How can I change the default width of a Twitter Bootstrap modal box?
But my view wasn't modal anymore. It wasn't centered and didn't have a darkened backdrop. So I then thought I could just copy the .modal class from twitter bootstrap into my local.less file, and then change the width/height. So I tried that with this:
.modal-width-half (#modalWidth: 50%) {
top: 50%;
left: 50%;
z-index: 1050;
overflow: auto;
width: #modalWidth;
margin: -250px 0 0 -#modalWidth / 2;
background-color: white;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
And again, the style isn't modal. Is there something I'm missing or doing incorrectly? Thanks.

I just did this and can share the line you're missing.
In my commit to change the width of the modal I had to change the width property and also the margin-left property. By changing both of these you will keep the form centered.
.modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
of course this will apply to all modals on your site, if you want to apply it to just one modal then you can customise the class name e.g.
.my-modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
You can then refer to this in your html like:
<div class="modal fade open my-modal">...</div>
Just make sure the definition for .my-modal comes after .modal in your less/css file or the definition will be overridden by the bootstrap style.

How to make a div adjust height for contained content?

I have a "maincontent" div that contains, well, my content. There's some javascript (Fancybox) in it to show images. I'm trying to have the height of the div automatically change to accompany whatever's in it so that the div itself doesn't scroll, but the entire webpage does.
Here's a page I'd like to fix: http://willryan.us/content/photo.html
I've tried messing with min-heights, height:auto, overflow:auto, etc, with no result. Height:auto acts as thought the text is the only thing in the div, like its completely ignoring the javascript images.
Here's my css as it is now:
div#content {
overflow:auto;
width:958px;
height: 800px;
position:absolute;
top:50px;
left:0px;
background-color:#C0CACE;
border:1px solid;
border-color:#616161;
-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
z-index:1;
}

The problem has to do with photobox div, if you turn off position absolute, it works to its height, turn off height and it fits.
This problem could be avoided if you didn't use absolute positioning when you don't need it.
You should rebuild your page using relative positioning. It should be quite easy considering you just need to center the div's you are using with text-align:center; on their parents.

Your problem lies with using absolute positioning. Use static positioning (default) for regular document flow and you won't have this problem.
UPDATE
You don't use relative positioning either.
Regular document flow (without explicitly specifying it) is position: static; you use absolute. Absolute positioning basically takes the element out of the regular flow of the document and places it based it's nearest relatively positioned parent.
What you should be doing...
If you need your wrapper positioned in the "center". Set "wrapper" to positon:relative with margin: 0px auto; and remove absolute positon from all inner elements. If you need to indent elements inside wrapper use padding/margin.

I'll suggest you to use position: relative to not use position:absolute in your maincontent children. You don't really need absolute here.
Remove #content height (or use min-height)
Remove #photobox height (or use min-height)
Remove #content overflow
Set all #content children position to relative (use margins if necessary)
.
div#header {
background-image:url(content/assets/elements/header.png);backround-repeat:none;
width:960px;
height:50px;
z-index:2;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
}
div#footer {
background-image:url(content/assets/elements/footer.png);
backround-repeat:none;
width:960px;
height:50px;
z-index:2;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 1);
}
div#content {
width:958px;
background-color:#C0CACE;
border:1px solid;
border-color:#616161;
-webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
z-index:1;
overflow: visible;
}
div#photobox {
width: 769px;
margin-left: 95.5px;
}