I have an issue about some design. I want a div to be show only on mouseover from an icon, I've done this, but the content from the div is partially not included in the div.
To show you exactly how it is, here is a picture of the current thing :
http://img4.hostingpics.net/pics/878048issuePicture.jpg
So the div is the light orange rectangle under the arrow pointing down, but it should contain the icon and the text which is on its right (the (?) REQ and the 2 others). Those items are shown in same time as the div (on mouseover of the arrow), but they're not included in the div.
The code of those parts :
HTML :
<table class="table-center table" style="background-color:#FFFCF9">
<thead>
...
</thead>
<tbody>
<tr class="changeRequestSearch">
<td>
<img src="/assets/css/images/unroll-icon.png" ng-mouseenter="showSelectType()" />
<div class="selectType" id="selectType" ng-mouseleave="hideSelectType()">
<div class="nowrap">
<input type="checkbox" ng-click="filterType()" id="filterReq" value="req" checked/> <img src="/assets/css/images/request-icon.png" /> REQ
</div>
<div class="nowrap">
<input type="checkbox" ng-click="filterType()" id="filterEvol" value="evol" checked/> <img src="/assets/css/images/evolution-icon.png" /> EVOL
</div>
<div class="nowrap">
<input type="checkbox" ng-click="filterType()" id="filterBug" value="bug" checked/> <img src="/assets/css/images/bug-icon.png" /> BUG
</div>
</div>
</td>
...
And the CSS :
.trHover:hover {
background-color:#f5f5f5;}
.nowrap {
white-space:nowrap;
}
.clear {
clear: both;
}
.changeRequestSearch td input {
width:100%;
}
.selectType {
visibility:hidden;
position:fixed;
background-color:#F5EBDE;
}
Here is a JSFiddle link, but here it does work (i've made some changes) : http://jsfiddle.net/D2RLR/6200/
try to set width for the dive like
.selectType {
width: 100px;
}
Related
I have an issue formatting some HTML. Basically I have a large number of listboxes which are hidden once the page is loaded, and have placed them in HTML tables for now. I am aware that this is not good practice, but this is how I have received them and since there are over 100, I cannot realistically change their HTML code.
I would like for the </hr> and two buttons on the right of the image, to appear under the listboxes.
Here is a jsfiddle of the code.
How can this be formatted for the buttons to appear underneath, regardless of the height taken up by the listboxes? i.e. they will always appear underneath.
You just need to tell the browser to ignore the floating set by the the div surrounding the table:
#divButtons{
clear:both;
}
#divButtons input[type="submit"]{
float:right;
}
Please note that this solution "inverses" the order in which your buttons are displayed. You might need to change their position in your HTML.
Or something like this
#divButtons{ width:100%; float:left }
http://jsfiddle.net/9BBKp/
Here is demo
try this:
<form>
<div style="padding-top: 2%; float:right;clear:both;"> <b>Select Product:</b>
<select name="cmbProducts" onchange="javascript:setTimeout('__doPostBack(\'cmbProducts\',\'\')', 0)" id="cmbProducts" style="width:250px;"></select>
</div>
<div style="padding-top: 50px;">
<hr />
<div>
<div class="selection-panel">
<table>
<tr>
<th>Test</th>
</tr>
<tr>
<td>
<select size="4" name="listBoxTerminalType" id="listBoxTerminalType" class="list-box"></select>
</td>
</tr>
</table>
</div>
<div class="selection-panel">
<table>
<tr>
<th>Test</th>
</tr>
<tr>
<td>
<select size="4" name="listBoxVoltageAndSuitableLamp" id="listBoxVoltageAndSuitableLamp" class="list-box"></select>
</td>
</tr>
</table>
</div>
</div>
<hr />
</div>
<div id="divButtons" style="text-align: center;">
<input type="submit" name="btnResetSelections" value="Reset Selections" id="btnResetSelections" />
<input type="submit" name="btnApplyFilter" value="Apply Filter" id="btnApplyFilter" />
</div>
</form>
and css:
.list-box {
width: 250px;
}
.selection-panel {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 100px;
align-content: center;
text-align: center;
}
#divButtons {
float:right;
clear:both;
}
I am facing a layout problem when using overlay inside a td. Let me show my html.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<script type="text/javascript" src="jquery-1.7.1.js">
</script>
<script type="text/javascript">
function alterControl() {
var $visibleCtrl = $("#servicesTable tbody").find("#ID1").find(".divOverlayVisible");
var $hiddenCtrl = $("#servicesTable tbody").find("#ID1").find(".divOverlayHidden");
$visibleCtrl.removeClass("divOverlayVisible").addClass("divOverlayHidden");
$hiddenCtrl.removeClass("divOverlayHidden").addClass("divOverlayVisible");
}
</script>
</head>
<body>
<table id="servicesTable">
<thead>
<tr>
<th>
<label id="lblServiceName">
Name</label>
</th>
<th>
<label id="lblResult">
Result</label>
</th>
</tr>
</thead>
<tr id="ID1">
<td>
<input style="width: 100px;" id="txtName1" name="txtName1" type="text" value="Service1" />
</td>
<td>
<div class="overlayOuter">
<div id="ServiceTestResult1" class="divOverlayVisible">
<input type="text" value="This is static text" id="Testresult1" style="width: 40px;
height: 16px;" />
</div>
<div id="ServiceTestResultTestImage1" class="divOverlayHidden">
<img src="Validated_16.png" alt="Image not found" style="width: 16px; height: 16px;" />
</div>
</div>
</td>
</tr>
</table>
<input type="button" id="btnToggle" value="Alter" onclick="alterControl()" />
</body>
</html>
My CSS is like below
.overlayOuter
{
position:relative;
height:100%;
width:100%;
}
.divOverlayHidden
{
top:0px;
left:0px;
position:absolute;
visibility:hidden;
z-index:101;
}
.divOverlayVisible
{
top:0px;
left:0px;
position:absolute;
visibility:visible;
z-index:100;
}
The problem that I am facing is, table cell in my second column is getting outside the row. My idea was to show textbox or image at a time based on input. Please find the screenshots too which are uploaded in skydrive
https://skydrive.live.com/#cid=EAA26C1BAE3050B8&id=EAA26C1BAE3050B8!130
https://skydrive.live.com/#cid=EAA26C1BAE3050B8&id=EAA26C1BAE3050B8!131
Can anyone tell me how to solve this problem?
I can't see the images because I'm not member, sorry. But I've recreate the problem in a jsFiddle, and, if I remove position:absolute; from .divOverlayVisible it seems to work properly: Example
.divOverlayVisible {
top:0px;
left:0px;
/*position:absolute; I have removed this line */
visibility:visible;
z-index:100;
}
EDIT: If you need the position to make z_index work, you can change the value absolute to relative rather than remove it.
I am writing an MVC3 page, and I have images with radio buttons next to them. I want each radio button to be on the same line as it's image, but not one image per line, I want it to flow through many lines, but in pairs. I've tried wrapping the two in a div and display:inline-block works, except the radio button is above my image, not next to it. white-space: nowrap; works, but by putting only one image per line ( I could do that with a ).
Here is the code, FWIW:
#foreach (xxx.Image im in Model.Images)
{
<div style="white-space: nowrap;">
#Html.RadioButtonFor(m => m.EmailImage, im.Id, Model.EmailImage == im.Id ? new { Checked = "checked" } : null)
<a href="/preview/#im.Url&h=251&w=600" target="_blank">
<img height="41" width="97" src="#im.ThumbUrl"/></a>
</div>
}
Thanks for looking.
The following example seems to be working: jsfiddle.
HTML:
<div class="left">
<input type="radio" value="check" />
google
<img src="http://placehold.it/41x97"></img>
</div>
<div class="left">
<input type="radio" value="check" />
google
<img src="http://placehold.it/41x97"></img>
</div>
<div class="left">
<input type="radio" value="check" />
google
<img src="http://placehold.it/41x97"></img>
</div>
CSS:
.left
{
float:left;
}
.left a, .left input, .left img
{
display:inline-block;
vertical-align:middle;
}
I have a simple HTML form. I'd like the right widgets in the second column (text field, combox, and so on) to stretch and fill the full column.
My HTML looks like this:
<table class="formTable">
<tr>
<td class="col1">Report Number</td>
<td class="col2"><input type="text"/></td>
</tr>
<tr>
<td class="col1">Report Type</td>
<td class="col2"><select></select></td>
</tr>
</table>
My CSS looks like this:
.formTable {
border-color: black;
}
.formTable td {
padding: 10px;
}
.formTable .col1 {
text-align: right;
}
.formTable .col2 {
width: 100%;
}
Any ideas?
You can specify that all of the children of class "col2" have a width of 100% by adding the following:
.col2 * { width:100%;}
See my dabblet example: http://dabblet.com/gist/2227353
Start with semantic markup since this isn't tabular data. Also, with added labels, we don't need extra wrapper DIVs, which is cleaner.
<ul class="formList">
<li>
<label for="input_1">
Report Number
</label>
<input id="input_1" name="input_1" type="text" />
</li>
<li>
<label for="input_2">
Report Type
</label>
<select id="input_2" name="input_2"></select>
</li>
</ul>
Then add the CSS:
.formList {
border:1px solid #000;
padding:10px;
margin:10px;
}
label {
width:200px;
margin-left:-200px;
float:left;
}
input, select {
width:100%;
}
li {
padding-left:200px;
}
JS Fiddle Example: http://jsfiddle.net/6EyGK/
You can use:
.col2 * {
width: 100%;
}
To match any .col2 descendant. as you can see here. Or:
.col2 > * {
width: 100%;
}
To match just the immediate children.
if using Twitter Bootstrap:
and input is inside a column
just add to <input> the class="container-fluid"
Note
This is not an answer, but a comment, which includes too much code to go into the comment section. So please refrain from downvoting me, would you? :)
Other semantic markup additionaly to Matthew Darnells answer:
If you wrap the labels around the inputs and selects, you can avoid using the forand id attributes.
<ul class="formList">
<li>
<label>
Report Number
<input name="input_1" type="text" />
</label>
</li>
<li>
<label>
Report Type
<select name="input_2"></select>
</label>
</li>
</ul>
Or use a definition list which might give you additional control
<dl class="formList">
<dt>
<label for="input_1">
Report Number
</label>
</dt>
<dd>
<input id="input_1" name="input_1" type="text" />
</dd>
<dt>
<label for="input_2">
Report Type
</label>
</dt>
<dd>
<select id="input_2" name="input_2"></select>
</dt>
</dl>
What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based:
<table>
<tr>
<td><input type="radio" name="opt"></td>
<td>Option 1</td>
</tr>
<tr>
<td><input type="radio" name="opt"></td>
<td>Option 2</td>
</tr>
</table>
This may be frown upon by some. I’ve just spent some time (again) investigating a tableless solution but failed. I’ve tried various combinations of floats, absolute/relative positioning and similar approaches. Not only that they mostly relied silently on an estimated height of the radio buttons / checkboxes, but they also behaved differently in different browsers. Ideally, I would like to find a solution which does not assume anything about sizes or special browser quirks. I’m fine with using tables, but I wonder where there is another solution.
I think I have finally solved the problem. One commonly recommended solution is to use vertical-align: middle:
<input type="radio" style="vertical-align: middle"> Label
The problem, however, is that this still produces visible misalignments even though it should theoretically work. The CSS2 specification says that:
vertical-align: middle: Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
So it should be in the perfect centre (the x-height is the height of the character x). However, the problem seems to be caused by the fact browsers commonly add some random uneven margins to radio buttons and checkboxes. One can check, for instance in Firefox using Firebug, that the default checkbox margin in Firefox is 3px 3px 0px 5px. I'm not sure where it comes from, but the other browsers seem to have similar margins as well. So to get a perfect alignment, one needs to get rid of these margins:
<input type="radio" style="vertical-align: middle; margin: 0px;"> Label
It is still interesting to note that in the table based solution the margins are somehow eaten and everything aligns nicely.
The following works in Firefox and Opera (sorry, I do not have access to other browsers at the moment):
<div class="form-field">
<input id="option1" type="radio" name="opt"/>
<label for="option1">Option 1</label>
</div>
The CSS:
.form-field * {
vertical-align: middle;
}
I found the best and easiest way to do it is this one because you don't need to add labels, divs or whatsoever.
input { vertical-align: middle; margin-top: -1px;}
I wouldn't use tables for this at all. CSS can easily do this.
I would do something like this:
<p class="clearfix">
<input id="option1" type="radio" name="opt" />
<label for="option1">Option 1</label>
</p>
p { margin: 0px 0px 10px 0px; }
input { float: left; width: 50px; }
label { margin: 0px 0px 0px 10px; float: left; }
Note: I have used the clearfix class from : http://www.positioniseverything.net/easyclearing.html
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
This is a bit of a hack but this CSS seems to get it working very nicely in all browsers the same as using tables (apart from chrome)
input[type=radio] { vertical-align: middle; margin: 0; *margin-top: -2px; }
label { vertical-align: middle; }
#media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=radio] { margin-top: -2px; }
}
Make sure you use labels with your radios for it to work. i.e.
<option> <label>My Radio</label>
If your label is long and goes on multiple rows setting the width and display:inline-block will help.
.form-field * {
vertical-align: middle;
}
.form-field input {
clear:left;
}
.form-field label {
width:200px;
display:inline-block;
}
<div class="form-field">
<input id="option1" type="radio" name="opt" value="1"/>
<label for="option1">Option 1 is very long and is likely to go on two lines.</label>
<input id="option2" type="radio" name="opt" value="2"/>
<label for="option2">Option 2 might fit into one line.</label>
</div>
I found the best fix for this was to give the input a height that matches the label. At least this fixed my problem with inconsistencies in Firefox and IE.
input { height: 18px; margin: 0; float: left; }
label { height: 18px; float: left; }
<li>
<input id="option1" type="radio" name="opt" />
<label for="option1">Option 1</label>
</li>
The following code should work :)
Regards,
<style type="text/css">
input[type=checkbox] {
margin-bottom: 4px;
vertical-align: middle;
}
label {
vertical-align: middle;
}
</style>
<input id="checkBox1" type="checkbox" /><label for="checkBox1">Show assets</label><br />
<input id="checkBox2" type="checkbox" /><label for="checkBox2">Show detectors</label><br />
This is a simple solution which solved the problem for me:
label
{
/* for firefox */
vertical-align:middle;
/*for internet explorer */
*bottom:3px;
*position:relative;
padding-bottom:7px;
}
There are several ways to implement it:
For ASP.NET Standard CheckBox:
.tdInputCheckBox
{
position:relative;
top:-2px;
}
<table>
<tr>
<td class="tdInputCheckBox">
<asp:CheckBox ID="chkMale" runat="server" Text="Male" />
<asp:CheckBox ID="chkFemale" runat="server" Text="Female" />
</td>
</tr>
</table>
For DevExpress CheckBox:
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="Yes" Layout="Flow"/>
<dx:ASPxCheckBox ID="chkAccept" runat="server" Text="No" Layout="Flow"/>
For RadioButtonList:
<asp:RadioButtonList ID="rdoAccept" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:RadioButtonList>
For Required Field Validators:
<asp:TextBox ID="txtEmailId" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqEmailId" runat="server" ErrorMessage="Email id is required." Display="Dynamic" ControlToValidate="txtEmailId"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexEmailId" runat="server" ErrorMessage="Invalid Email Id." ControlToValidate="txtEmailId" Text="*"></asp:RegularExpressionValidator>`
Below I will insert a checkbox dynamically. Style is included to align the checkbox and most important to make sure word wrap is straight. the most important thing here is display: table-cell; for the alignment
The visual basic code.
'the code to dynamically insert a checkbox
Dim tbl As Table = New Table()
Dim tc1 As TableCell = New TableCell()
tc1.CssClass = "tdCheckTablecell"
'get the data for this checkbox
Dim ds As DataSet
Dim Company As ina.VullenCheckbox
Company = New ina.VullenCheckbox
Company.IDVeldenperScherm = HETid
Company.IDLoginBedrijf = HttpContext.Current.Session("welkbedrijf")
ds = Company.GetsDataVullenCheckbox("K_GetS_VullenCheckboxMasterDDLOmschrijvingVC") 'ds6
'create the checkbox
Dim radio As CheckBoxList = New CheckBoxList
radio.DataSource = ds
radio.ID = HETid
radio.CssClass = "tdCheck"
radio.DataTextField = "OmschrijvingVC"
radio.DataValueField = "IDVullenCheckbox"
radio.Attributes.Add("onclick", "documentChanged();")
radio.DataBind()
'connect the checkbox
tc1.Controls.Add(radio)
tr.Cells.Add(tc1)
tbl.Rows.Add(tr)
'the style for the checkbox
input[type="checkbox"] {float: left; width: 5%; height:20px; border: 1px solid black; }
.tdCheck label { width: 90%;display: table-cell; align:right;}
.tdCheck {width:100%;}
and the HTML output
<head id="HEAD1">
<title>
name
</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /><meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" />
</head>
<style type='text/css'>
input[type="checkbox"] {float: left; width: 20px; height:20px; }
.tdCheck label { width: 90%;display: table-cell; align:right;}
.tdCheck {width:100%;}
.tdLabel {width:100px;}
.tdCheckTableCell {width:400px;}
TABLE
{
vertical-align:top;
border:1;border-style:solid;margin:0;padding:0;border-spacing:0;
border-color:red;
}
TD
{
vertical-align:top; /*labels ed en de items in het datagrid*/
border: 1; border-style:solid;
border-color:green;
font-size:30px }
</style>
<body id="bodyInternet" >
<form name="Form2" method="post" action="main.aspx?B" id="Form2">
<table border="0">
<tr>
<td class="tdLabel">
<span id="ctl16_ID{A}" class="DynamicLabel">
TITLE
</span>
</td>
<td class="tdCheckTablecell">
<table id="ctl16_{A}" class="tdCheck" onclick="documentChanged();" border="0">
<tr>
<td>
<input id="ctl16_{A}_0" type="checkbox" name="ctl16${A}$0" />
<label for="ctl16_{A}_0">
this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp this is just dummy text to show the text will warp
</label>
</td>
</tr>
<tr>
<td>
<input id="ctl16_{A}_1" type="checkbox" name="ctl16${A}$1" />
<label for="ctl16_{A}_1">
ITEM2
</label>
</td>
</tr>
<tr>
<td>
<input id="ctl16_{A}_2" type="checkbox" name="ctl16${A}$2" />
<label for="ctl16_{A}_2">
ITEM3
</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
#sfjedi
I've created a class and assigned the css values to it.
.radioA{
vertical-align: middle;
}
It is working and you can check it in the below link.
http://jsfiddle.net/gNVsC/
Hope it was useful.
input[type="radio"], input[type="checkbox"] {
vertical-align: middle;
margin-top: -1;
}