I'm trying to get a scroll working on my page. When I add overflow-y: scroll. it makes the content inside the div section completely disappear.
The CSS I currently have in for the div section is: overflow-y: scroll, height: 100%. Am I missing something?
<div id = "section">
<div id = "map">
<h1 align = "center">Find Us!</h1>
<div id = "map-canvas"></div>
<p>
</p>
</div>
<div id = "form">
<form method="post" action="mailto: jbloggs#ait.ie">
<fieldset>
<h1 align="center">Contact Us</h1>
<table class="contacttable">
<tr align="left" valign="middle">
<td>First Name</td>
<td><input type="text" name="firstname"/></td>
</tr>
<tr align="left" valign="middle">
<td>Surname</td>
<td><input type="text" name="lastname"/></td>
</tr>
<tr>
<td>Address Line 1</td>
<td><input type="text" name="addressline1"/></td>
</tr>
<tr>
<td>Address Line 2</td>
<td><input type="text" name="addressline2"/></td>
</tr>
<tr>
<td>Town</td>
<td><input type="text" name="town"/></td>
</tr>
<tr>
<td>County</td>
<td><input type="text" name="county"/></td>
</tr>
<tr align="left" valign="middle">
<td><input type="radio" name="sex" value="male"/>Male</td>
<td><input type="radio" name="sex" value="female"/>Female</td>
</tr>
<tr>
<td>Date of Birth</td>
<td><input type="text" name="dob"/></td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
#section {
max-height: 150px; /*add height as you want*/
overflow-y: auto;
}
Go through this http://www.w3schools.com/cssref/pr_pos_overflow.asp
Is there a way to set vertical scrollbar for a div?
This might helps you :)
Related
Current display
Im working on a asp.net site for work and I need to have inputs both text and checkboxes. My current solution is as follows:
<form method="post" style="width:100%">
<table style="padding:5px; width:100%">
<tr>
<td style="white-space:nowrap; width:1%">Printer name:</td>
<td><input type="text" name="PrinterName" value="#Request["PrinterName"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">Model:</td>
<td><input type="text" name="Model" value="#Request["Model"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">Location:</td>
<td><input type="text" name="Location" value="#Request[" Location"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">IP:</td>
<td>
<table style="margin:0px; padding:0px">
<tr>
<td style="padding:0px"><input type="text" name="IP" value="#Request["IP"]" style="max-width:100%; width:100%" /></td>
<td style="white-space:nowrap;width:1%">
<div><input style="margin:0px; padding:0px" type="checkbox" />QuickIP</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="white-space:nowrap">MAC(XX-XX-XX-XX-XX-XX):</td>
<td><input type="text" name="MAC" value="#Request["MAC"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" class="Sumbit" style="max-width:100%; width:100%" /></td>
</tr>
</table>
</form>
The checkbox is not reporting the correct size(IE and Chrome) and the text is not being kept inside of the space either.
The aim is to have the text directly beside the checkbox, and both fo those being in line as small as possible to the right of the text input. How would i achieve that without this strange bug ?
Edit: in my testing i had switched the textbox and the button as wel las added a height in the style of the checkbox, those have been corrected now
Edit2: Added in a picture of what shows up right now
It seems you just need to remove height: 1% from
<td style="white-space:nowrap;width:1%">
<!-- remove the height from the style below -->
<div><input style="margin:0px; padding:0px; height:1%" type="checkbox" />QuickIP</div>
</td>
This will render the checkbox next to the "QuickIP" text
Take a look at this codepen.
I want my email, password etc to be the same width as Name and Surname Together but I am struggling to this.
<div id="container">
<table>
<tr>
<td><input type="text" name="emer" placeholder="Emri"></td>
<td><input type="text" name="mbiemer" placeholder="Mbiemri"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="email" placeholder="Emaili"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Password-i"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Rivendos Password-in"></td>
</tr>
</table>
</div>
Like this?
The input elements width needs to be set to 100% to take the width of the container!
td > input{
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<table>
<tr>
<td><input type="text" name="emer" placeholder="Emri"></td>
<td><input type="text" name="mbiemer" placeholder="Mbiemri"></td>
</tr>
<tr>
<td colspan="2"><input type="text" name="email" placeholder="Emaili"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Password-i"></td>
</tr>
<tr>
<td colspan="2"><input type="password" name="email" placeholder="Rivendos Password-in"></td>
</tr>
</table>
</div>
</body>
</html>
I am very new to Bootstrap css, can any one help me to design table header like this, column is seperated by pipe like css
Below is css .
<style>
.table-bordered tbody tr td {
border: none !important;
}
.table-bordered tbody tr td input.form-control[type=text] {
border-radius: 0px !important;
}
#input_container {
position: relative;
direction: rtl;
}
#input_img {
position: absolute;
bottom: 4px;
right: 5px;
width: 24px;
height: 24px;
}
Here i have used "table table-bordered" class for table and using above css i have removed td border lines
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Name</th>
<th>Color/Size</th>
<th>Qty. Needed</th>
<th>Need By Date</th>
<th>Special Instructions</th>
<th>Art Files</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<div id="input_container">
<input class="form-control" type="text" id="input" value="">
<img src="~/Images/calendarImg.png" id="input_img">
</div>
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td>
<input class="form-control" type="text" />
</td>
<td><input class="form-control" id="Text1" type="text" /></td>
<td><input class="form-control" id="Text1" type="text" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"><a>Add Rows</a></td>
</tr>
</tfoot>
</table>
I have created a demo for you. Take help and modify as per your requirement.
<table frame="box" rules="none" cellpadding="2" cellspasing="5"> <tr style="background-color:yellow; ">
<td colspan="4">
<table style="width:100%">
<tr>
<td style="width:25%;border-right: thin solid #000;">First</td>
<td style="width:25%;text-align:center; border-right: 1px solid #000;">Second</td>
<td style="width:25%;text-align:center;border-right: 1px solid #000;">Third</td>
<td style="width:25%;text-align:center;">Fourth</td>
</tr>
</table>
</td> </tr> <tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr> </tr> </table>
click here to see it in fiddle
Here there is a small example of my page. I need to disable all input fields but the scrollbar. This works perfectly on Chrome and Firefox, but not with IE.
tbody{
display:block;
height: 50px;
overflow-y: scroll;
}
<fieldset disabled>
<table>
<thead>
<tr><th>test</th></tr>
</thead>
<tbody>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
</tbody>
</table>
</fieldset>
Any suggestion?
Maybe like this?
tbody{
display:block;
height: 50px;
overflow-y: scroll;
}
<fieldset>
<table>
<tbody>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
<tr> <td> <input type="text" disabled /> </td> </tr>
</tbody>
</table>
</fieldset>
Or using pointer-events (still, user can tab through the inputs, but that can be prevented with tabindex="-1", but then again, why not just add disabled)
fieldset tbody {
display: inline-block;
height: 50px;
overflow-y: scroll;
}
fieldset tbody input {
pointer-events: none;
}
<fieldset>
<table>
<tbody>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
</tbody>
</table>
</fieldset>
Or use an extra div
fieldset div {
display: inline-block;
height: 50px;
overflow-y: scroll;
}
<fieldset>
<div>
<table disabled>
<tbody>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
<tr> <td> <input type="text" /> </td> </tr>
</tbody>
</table>
</div>
</fieldset>
I suggest wrapping the fieldset in an extra div and apply your styles there.
IE seems to disable the scrollbar functionality on disabled elements.
.box {
display: inline-block;
height: 80px; overflow-y: scroll;
}
<div class="box">
<fieldset disabled>
<table>
<tbody>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
<tr> <td> <input type="text"/> </td> </tr>
</tbody>
</table>
</fieldset>
</div>
I have a table in bootstrap 3
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>
Can I make the input fields look like normal cells? I want the input fields to fill out the entire cells (without no input margin nor table cell padding). Just like an Excel spreadsheet where I have many cells and can write in each of them.
Yup. Do it this way:
input {display: block; padding: 0; margin: 0; border: 0; width: 100%;}
td {margin: 0; padding: 0;}
Fiddle: http://jsbin.com/biqomurafage/1
You could also try using contentEditable tables like this: DEMO
<table>
<tbody>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<th>1</th>
<td><span id="A1" contenteditable>#####</span></td>
<td><span id="B1" contenteditable></span></td>
<td><span id="C1" contenteditable></span></td>
</tr>
<tr>
<th>2</th>
<td><span id="A2" contenteditable></span></td>
<td><span id="B2" contenteditable></span></td>
<td><span id="C2" contenteditable></span></td>
</tr>
</tbody>
</table>
span {
width: 100%;
display: block;
}
*note, the content editable spans are required for IE to handle the contentEditable attributes correctly. Reference