Develop Reference

Shrink table when decreasing window size to prevent scrollbars

I have an HTML that has a navigation bar on top, a div with some wells and then another div which is the "main page" div.
So the main page div has a table in it with several columns. This table is a form and almost all are inputs. I have tried to add one more column there and the page gives me an overflow to the right.
I want to prevent it and make the table to be able to shrink based on the screen. I have this problem on a 15'' screen. Though on a 32'' screen there is no problem and everything is ok.
My CSS code for the table and the HTML is and from what I see the inputs on the table should be able to shrink base on the default values that they get:
html, body {
height: 100%;
margin: 0;
}
#mileCtlTable{
position: relative;
vertical-align: middle;
text-align: center;
border-collapse: collapse;
margin:auto;
border: 3px solid black;
//white-space: nowrap;
width: 100%;
}
#mileCtlTable thead td{
border: 1px solid black;
font-style:oblique;
text-align:center;
//white-space: nowrap;
margin:0vw;
background-color: navy;
color:white;
}
#mileCtlTable tbody td{
border: 1px solid black;
//width:auto;
white-space: nowrap;
text-align: center;
}
#mileCtlTable td,#mileCtlTable th{
padding: 0.2vw 0.5vw;
}
#mileCtlTable input{
text-align: center;
//white-space: nowrap;
padding: 0.2vw 0.5vw;
}

I have added
input{width: 100%;}

How can I make dynamically created divs flush with eachother?

I have a function that creates a grid of divs that are generated and sent to a container div when the document loads (or when the user resets it). Everything seems to be about the way that I like it, except that there is a gap between each "row" of divs. I'd like it to be a perfect grid, with each square flush with each other. I've tried modifying borders, outlines, padding and the like with no success. I'm convinced there has to be a way to make this work that is less complicated than I am making it out to be. jsfiddle example: https://jsfiddle.net/psyonix/1g9p59bx/84/
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var n = 0;
var squareSize = (area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
border-radius: 5px;
margin: 0 auto;
overflow: hidden;
}
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #000000;
outline-width: 1px;
outline-style: solid;
}

You just need to either remove a outline-width from .square or give it some 2px or 3px value.
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #000000;
outline-width: 3px; //or 2px or just remove it as I have done in my DEMO
outline-style: solid;
}
DEMO HERE

You are using inline-block on the square elements, so the square elements will act like the words inside a paragraph, and will be laid out as in lines of a sentence. These lines will have line-height just as in normal sentences, so one way is to reset the line-height of the parent holding these square words.
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
border-radius: 5px;
margin: 0 auto;
overflow: hidden;
line-height: 0px;
}
This way you can JAM the lines as you are not exactly looking for lines as in normal sentences.
Another way is to avoid using the inline-block and using block and float to attain the same. Block display doesn't have the issue of line-height or white-spaces between elements.
.square {
display: inline-block;
position: relative;
background-color: #C8C8C8;
outline-color: #bc0000;
outline-width: 1px;
outline-style: solid;
display:block;
float:left;
}

how to remove margin in drop down?

could you please tell me how to remove margin from drop down as shown in image . I need to display
dropdown down as shown in image .But there is some margin coming from some where .How to make dropdown same as shown in image
here is my code
http://codepen.io/anon/pen/BoNwqa
/* Styles here */
.dropdown_border{
border: 1px solid #e4e5e7;
height: 35px;
text-align:center;
color:blue;
}
.dropdown_padding {
padding: 2em 3.5em 0em 3.5em;
}
.dropdown_image_class {
height: 35px;
width: 35px;
margin-top: -6px;
border: 1px solid #e4e5e7;
float: right;
}

Use the following CSS property:
.dropdown_border {
padding: 5px 0 !important;
}
EDIT
As Praveen suggested, Use this instead:
.col.dropdown_border {
padding: 5px 0;
}

The .col has a padding of 5px. Instead of targetting all the .col, give this:
.col.dropdown_border {
padding: 5px 0;
}
So that it affects only the .dropdown_border class. This way, the .col with the class .dropdown_border has padding both at top and bottom and not on the sides.

Hope this helps.
.col.dropdown_border {
padding: 5px 0;
border-right: 0px;
}
By the way, the dropdown image already got border left and right.

Making onclick event toggle display on subsequent clicks?

I have a div followed by a fieldset. I have it such you click the div anywhere and it makes the otherwise display:none fieldset appear. However, I'd like it to disappear on second click, as well. Basically the onclick event would toggle between display:none and display:block.
Here's the fiddle I'm working with: http://jsfiddle.net/zk1j23m5/
function showexpando(id) {
document.getElementById(id).style.display = "block";
}
.greyex {
padding: 15px;
padding-left: 30px;
padding-right: 30px;
border: solid black 3px;
border-top: 0px;
border-radius: 0px 0px 7px 7px;
background-color: #DDDDDD;
display: none;
}
.expando {
background-color: #A971A9;
font-weight: bold;
padding: 5px;
text-align: center;
border: 3px solid black;
border-radius: 7px 7px 0px 0px;
border-bottom: 0px;
cursor: pointer;
}
.expando a {
text-decoration: none;
}
<div class="expando" onclick="showexpando('excred');">
<a>▼ lorem ▼</a>
</div>
<fieldset class="greyex" id="excred">ipsum</fieldset>
Additionally, there's some problem with the border. I'd like the expando div to have border-radius: 7px when the fieldset is hidden, but have border-radius:7px 7px 0px 0px; border-bottom: 0px when the fieldset is visible. Lastly, the border doesn't look right when fieldset is visible: there's like a 1px difference in positioning despite the code being congruent.
How can I accomplish these?
edit; I guess I could query the document if fieldset is display:none and fiddle with the CSS accordingly using JS, but it seems unwieldy and I'm sure there's an easier solution.

You should use unobtrusive JavaScript instead.
I'd suggest toggling a class. For instance:
Updated Example
var expand = document.querySelector('.expando');
expand.addEventListener('click', function () {
this.nextElementSibling.classList.toggle('visible');
});
.greyex {
display: none;
}
.greyex.visible {
display: block;
}
References:
.nextElementSibling (IE9+)
.classList (IE10+)

Noticed no one answered your second part.
If you're looking to get the borders to line-up, just change the fieldset to a div.
Here's the fiddle.
Or, alternatively you can set the margin to the fieldset element to:
margin: 0px 2px 0px 2px;
To match the div.

Div start scrolling when the header reaches its top and stop from scrolling when the its bottom reaches the footer

I have a page called project, in that page there are two grids, one called "imagesGrid" and the other one called "detailsBox", they are floating next to each other using (i.e. both has a width like 50% and display inline-block). I am trying to make the "detailsBox" to start scrolling with the page when the header reaches its top, and stop from scrolling when its bottom reaches the top of the footer. I am also trying to stop the function completely from working and set the "detailsBox" to be positioned as relative when the screen size is below 700px.
I have tried and experimented dozens of tutorials, like:
make div stick to the top of the screen and stop before hitting the footer and http://jsfiddle.net/FDv2J/3/ with no hope.
What is the best path to take to solve my problem? Here is a link to a live preview of the page: http://www.loaidesign.co.uk/portfolio ?project=Test_Project
And here is the HTML and the CSS, I don't have a working JavaScript script, and I tired the ones provided in the links above as well as many others from here, google and codepen, but can't seem to be able to make them work for me.
HTML:
<div class="wrapperB">
<div id="portfolio-projectPage" class="content">
<div class="imagesGrid">
<p>Website</p>
<img alt="Adonis Cars Rental website design" src="images/adonis-cars-website.jpg">
</div>
<div class="detailsBox">
<h3>Adonis Cars</h3>
<p>It's a luxuries cars rental agency based in Qatar</p>
<p>www.adoniscars.com
</p>
<p><strong>Skills:</strong> Web Design</p>
<p><strong>Date:</strong> 2012</p>
<p class="share icons"><strong>Share This Project On:</strong>
<br> <span>Facebook</span> <span>Twitter</span>
<!--Twitter Popup Script-->
<script type="text/javascript">
function popitup(url) {
newwindow = window.open(url, 'name', 'height=440,width=700');
if (window.focus) {
newwindow.focus();
}
return false;
}
</script>
</p>
<div> Go Back
<a class="scrollup">Scroll Up</a>
</div>
</div>
</div>
</div>
CSS:
.imagesGrid, .detailsBox {
display: inline-block;
vertical-align: top;
}
.imagesGrid {
width: 65%;
}
.imagesGrid img {
border: 1px solid #EAEAEA;
margin-bottom: 10px;
display: block;
}
.imagesGrid img:last-of-type {
margin-bottom: 0;
}
.imagesGrid p {
border-top: 1px solid #EAEAEA;
padding-top: 8px;
margin: 10px 0;
}
.imagesGrid p:first-of-type {
border-top: none;
padding: 0 0 10px 0;
margin: 0;
}
.detailsBox {
position: fixed;
top: 0;
width: 347px;
margin-top: 28px;
padding-left: 30px;
}
.detailsBox p {
border-bottom: 1px solid #EAEAEA;
padding-bottom: 10px;
margin: 10px 0;
}
.detailsBox p:first-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox p:last-of-type {
border-bottom: 3px solid #EAEAEA;
margin: 0;
}
.detailsBox a:hover {
color: #5575A6;
}
.detailsBox div {
background-color: #F5F5F5;
padding: 15px 0;
text-align: center;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
.detailsBox div a {
background-color: #EAEAEA;
padding: 10px 14px;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.detailsBox div a:hover, .detailsBox div a:active {
color: #FFFFFF;
background-color: #5575A6;
}
.share.icons {
cursor: default;
}
.share.icons a {
vertical-align: middle;
background-color: #F5F5F5;
}
.share strong {
margin-right: 10px;
}
.share br {
display: none;
}
.scrollup {
display: none;
}

You might want to check out StickyFloat
It uses JS to achieve what you want. The problem you have is that you're trying to use CSS to conditionally do something, when really that's not what CSS is for
CSS "Float" VS Javascript
If you want the floated div to remain at a certain position all the time, that's okay. But CSS cannot differentiate between elements on the page. Here's the official spec:
fixed The element is positioned relative to the browser window
The problem is fixed is related to the browser window only, not other elements. JS, on the other hand, uses the DOM to create an array of elements on the page, which you can create conditions for. It'd highly recommend looking at StickyFloat, or the other "sticky" JS plugins :)