I am making the control shown in the image. It has a title bar and a set of controls inside it. What would be the best way to build it? It is part of a HTML5 webpage.
http://tinypic.com/r/25rpk4o/6
One way is to draw the title bar with canvas rect and then place all the controls under it. The collapsing can be done with javascript. But there must be a better way.
Another way I thought of was to make a table and have the first row as the title bar and add the sub-controls in the 2nd row. It seems to work fine but VS2012 keeps telling me that I can't nest button inside a tr.
This question or similar was asked on stackoverflow here...
What are my alternatives to modal or modeless dialogs to display information and contact forms?
Maybe the last thread on that post can give you some examples??
The direct link to the external examples is
http://websemantics.co.uk/resources/accessible_css3_modal_pop-ups/
Okay Sorry I misunderstood your initial meaning.
Well you can have a look at the below two files, one is a web page and the other is user control, the user control Copy and paste the code into two new files and see what you think?
I tried to recreate the control from your original pic that you uploaded and have used a TABLE tag, although you can probably cut down the html code by using DIVS instead.
File 1
<%# Page Language="VB" %>
<%# Register src="MyInlineWindow.ascx" tagname="MyInlineWindow" tagprefix="uc1" %>
<!-- HTML5 -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/vbscript">
Sub ShowInlineWindow()
dim el
set el = window.document.getElementById("MyInlineWindowCtrl")
window.document.getElementById("Result").innerhtml = "Nothing"
el.style.display = "block"
End Sub
Sub HideInlineWindow(YesNo)
dim el
set el = window.document.getElementById("MyInlineWindowCtrl")
window.document.getElementById("Result").innerhtml = YesNo
el.style.display = "none"
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="Interact" onclick="ShowInlineWindow()" /><br />[<label id="Result">Nothing</label>]
<br /><br /><br /><br />
<uc1:MyInlineWindow ID="MyInlineWindow1" runat="server" />
</div>
</form>
</body>
</html>
File 2
<%# Control Language="VB" ClassName="MyInlineWindow" %>
<table id="MyInlineWindowCtrl" style="display: none; border: 1px solid #333333; width: 640px;">
<tr>
<td colspan="4" style="border-bottom-style: solid; border-bottom-width: 1px; background-color: #808080; color: #FFFFFF;">Window Title</td>
</tr><tr>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td>Label</td>
</tr><tr>
<td>
<select id="Select1" name="D1">
<option>Some drop down</option>
</select>
</td>
</tr><tr>
<td> </td>
</tr><tr>
<td>Label</td>
</tr><tr>
<td>
<select id="Select2" name="D2">
<option>Some drop down</option>
</select>
</td>
</tr>
</table>
</td>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td>Label</td>
</tr><tr>
<td><input id="Radio1" checked="true" name="R1" type="radio" value="V1" /> Label</td>
</tr><tr>
<td><input id="Radio2" checked="true" name="R2" type="radio" value="V1" /> Label</td>
</tr><tr>
<td><input id="Radio3" checked="true" name="R3" type="radio" value="V1" /> Label</td>
</tr><tr>
<td><input id="Radio4" checked="true" name="R4" type="radio" value="V1" /> Label</td>
</tr>
</table>
</td>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td colspan="2">Label</td>
</tr><tr>
<td>From</td>
<td>To</td>
</tr><tr>
<td>
<select id="Select3" name="D3">
<option>Date Picker</option>
</select>
</td>
<td>
<select id="Select4" name="D4">
<option>Date Picker</option>
</select>
</td>
</tr><tr>
<td> </td>
<td> </td>
</tr><tr>
<td><input id="Radio5" checked="true" name="R5" type="radio" value="V1" /> Label</td>
<td><input id="Radio6" checked="true" name="R6" type="radio" value="V1" /> Label</td>
</tr>
</table>
</td>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td> </td>
</tr><tr>
<td> </td>
</tr><tr>
<td> </td>
</tr><tr>
<td> </td>
</tr><tr>
<td style="text-align: center">
<input id="Button1" type="button" value="Cancel" onclick="HideInlineWindow('Cancel')" />
<input id="Button2" type="button" value="Okay" onclick="HideInlineWindow('Okay')" />
</td>
</tr>
</table>
</td>
</tr>
</table>
Maybe it is closer to what you want.
Also I have used VB script as thats what i know best, but it should not be too difficult to port/transpose it into Javascript.
Related
I tried adding an image to the table data, but it turned out to be very small and took up a lot of space. I also need to only use HTML for this challenge. Image size for a calculator is 400x300 (heigh and width).
my outputenter image description here
expected outputenter image description here
my code
<html>
<body>
<table border="1">
<tr>
<td>
<form action="">
<table cellpadding="3">
<tr>
<td colspan="2" align="center">
<font size="20" color="blue">Calculator</font><br />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="calculator.jpg" height="300" width="400" />
</td>
</tr>
<tr>
<td><label for="">Input1</label></td>
<td><input type="number" name="input1" /><br /></td>
</tr>
<tr>
<td><label for="">Input2</label></td>
<td><input type="number" name="input2" /><br /></td>
</tr>
<tr>
<td><label for="">Select Operation</label></td>
<td>
<select name="operation">
<option value="Select..">Select..</option>
<option value="ADD">ADD</option>
<option value="SUBTRACT">SUBTRACT</option>
<option value="MULTIPLY">MULTIPLY</option>
<option value="DIVIDE">DIVIDE</option></select
><br />
</td>
</tr>
<tr>
<td>
<input
type="image"
name="submit"
img
src="calc.jpg"
alt="Submit"
height="80"
width="80"
/>
</td>
<td>
<input
type="image"
name="reset"
img
src="reset.jpg"
alt="Reset"
height="80"
width="80"
/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
Use CSS to tell the system what size you want the image to be and that you want all the image to be visible, whatever its aspect ratio compared to the size of space you can give it.
For example for a space with height 400px and width 300px:
<img src="calculator.jpg" style="height: 400px; width: 300px;object-fit: contain;">
I think that problem is associated with Your image as I did code pen on it. With another image. It worked Fine.
https://codepen.io/ash_000001/pen/abVqXxq?editors=1000
<html>
<body>
<table border="1">
<tr>
<td>
<form action="">
<table cellpadding="3">
<tr>
<td colspan="2" align="center">
<font size="20" color="blue">Calculator</font><br />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="https://media.istockphoto.com/vectors/mobile-phone-vibrating-or-ringing-flat-vector-icon-for-apps-and-vector-id1141778521?k=20&m=1141778521&s=612x612&w=0&h=HR00_7snTNcWcsXAFuzcVPTPnU--qT8R6H-ve4lG2m8=" height="300" width="400" />
</td>
</tr>
<tr>
<td><label for="">Input1</label></td>
<td><input type="number" name="input1" /><br /></td>
</tr>
<tr>
<td><label for="">Input2</label></td>
<td><input type="number" name="input2" /><br /></td>
</tr>
<tr>
<td><label for="">Select Operation</label></td>
<td>
<select name="operation">
<option value="Select..">Select..</option>
<option value="ADD">ADD</option>
<option value="SUBTRACT">SUBTRACT</option>
<option value="MULTIPLY">MULTIPLY</option>
<option value="DIVIDE">DIVIDE</option></select
><br />
</td>
</tr>
<tr>
<td>
<input
type="image"
name="submit"
img
src="calc.jpg"
alt="Submit"
height="80"
width="80"
/>
</td>
<td>
<input
type="image"
name="reset"
img
src="reset.jpg"
alt="Reset"
height="80"
width="80"
/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
I trying to make the text bar wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
This is my HTML:
HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Benodigheden">Benodigheden:</label>
</td>
<td>
<input type="text" id="Benodigheden"name="Benodigheden" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
While the above code is very good, minimal and clean, which is best. But IF you need different widths for each of your text inputs then inline CSS is needed.
Example code:
<input style="width: 300px;" type="text">
<input style="width: 340px;" type="text">
If you only wish to make input-type="text" have a certain width, add this style in your css file fx:
input[type=text] {
width: 300px;
}
add some css to the head section of your html
<style>
input{width: 300px}
</style>
Make your table wider.
Add desired width to your td's
Ajust your inputs widht.
I have some issues with my tables. It seems that the distance between the field name and text boxes are a bit big.
Are there any issues that I am making which causing this? How can I reduce the spaces? Check out the image below.
Here's my HTML:
<h5>Free Room of Cleaning & Carpet Audit</h5>
<table border="0" border-collapse:collapse; width:80% colspan="3">
<tbody>
<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td>[text* client-name] </td>
</tr>
<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> [text* phone] </td>
</tr>
<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td>[email* email]</td>
</tr>
<tr>
<td>Best time to call: </td>
<td>[select best-time "Morning" "Afternoon" "After 5pm"] </td>
</tr>
<tr>
<td>Address:</td>
<td> [text address]</td>
</tr>
<tr>
<td>City</td>
<td>[text city]</td>
</tr>
<tr>
<td>State: </td>
<td>[text state]</td>
</tr>
<tr>
<td>Zip:</td>
<td>[text zip]</td>
</tr>
<tr><td colspan="2">Questions/Comments
[textarea questions id:questions]
</td></tr>
<tr><td colspan="2">[submit "Submit"]</td>
</tr>
</tbody>
</table>
Here is a JSFiddle demonstrating the issue: https://jsfiddle.net/sLv3e8f5/
The way the browser lays out tables by default, each column is sized to try to fit the width of its largest child element. In this case the largest child element is the table cell with the value "best time to call", which is causing the column to expand in width to accommodate that length.
You can give the first column of your table a fixed width to fix this, which will cause your longest line, "best time to call", to wrap.
In the following example I added an id to the table, then I targeted the first column of the table using CSS and gave it a width. I also gave your "Questions/Comments" form a width so it matches up.
Screenshot of the result:
Live Demo:
#thetable td:first-child {
width: 70px;
}
#qa {
width: 240px;
}
<h5>Free Room of Cleaning & Carpet Audit</h5>
<table id="thetable" border="0" border-collapse:collapse; width:80% colspan="3" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Best time to call: </td>
<td><select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> </td>
</tr>
<tr>
<td>Address:</td>
<td> <input type="text"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text"></td>
</tr>
<tr>
<td>State: </td>
<td>[text state]</td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="text"></td>
</tr>
<tr><td colspan="2">Questions/Comments
<textarea id="qa" rows="4" cols="50">
</textarea>
</td></tr>
<tr><td colspan="2"><input type="submit"></td>
</tr>
</tbody>
</table>
JSFiddle Version: https://jsfiddle.net/sLv3e8f5/2/
Try adding cellspacing="0"and cellpadding="0" on your table,
Add a
margin-left:3px;
to the
<td>
For example,
<td style="margin-left:3px;">[text* client-name]</td>
Your spaces are being caused by the "Best time to call" cell. Wrap that cell to two lines to remove the excess spaces.
because table cell is aligned by "Best time to call: ".
how about use <ul><li>
Getting rid of tables opens you up to a world of possibilities with CSS Styling.
The following is a very quick and dirty example:
label {
/*float:left;*/
width: 8em;
display:block;
clear:both;
margin-top: 10px;
}
input, select {
float:left;
margin-top: 10px;
margin-left: 20px;
}
label.required::after {
content:'*';
color: #F00;
padding-left:0.25em;
}
.required+input, .required+select
{
background-color:#FCC;
}
<fieldset>
<legend>Free Room of Cleaning & Carpet Audit</legend>
<label class="required" for="name">Name:</label>
<input type="text" id="name" name="name" />
<label class="required" for="phone">Phone:</label>
<input type="text" id="phone" name="phone" />
<label class="required" for="email">Email:</label>
<input type="text" id="email" name="email" />
<label for="call">Best time to call:</label>
<select id="call" name="call">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<label for="Address">Address:</label>
<input type="text" id="Address" name="Address" />
</fieldset>
Good Morning,
Little bit of help f possible. I have customised my SharePoint masterpage with a footer. This footer has a table in it which is split up into columns.
Within one of the columns I have added 3 custom search boxes, a sharepoint 2010 hit counter webpart and some text and a logo.
However when I publish this page not all of these elements are displayed. I know the page loads them as I can see them when I view the source code for the page so I am guessing they are hiding under the first element.
Enclosed is the code I am using within this table. If anyone is able to offer some advice I would be graetful.
<table width="350" border="0" cellspacing="0" cellpadding="1">
<div>
<tr>
<td style="height: 22px">
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</tr>
<tr>
<td>
</td>
</tr>
<td>
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</tr>
<tr>
<td>
</td>
</tr>
<td>
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</div>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<span lang="en-gb">
<AEPageHitsWebpart:AEPageHits runat="server" Description="Displays the page hit count of the current page" Options="" Title="AE Page Hits Web Part" ImportErrorMessage="Cannot import the AE Page Hits Web Part." IsActive="True" SinceDate="10/11/2014 10:00:00" ChromeType="TitleAndBorder" Template="<div style="height: 20px; width:200px;background-color:#fead30; Segoe UI;font-family: arial; font-size: 14px; color:#2e3e3f;padding:6px"><strong>{hits}</font></strong> Page hits since {since}<br>" ID="g_a2b9d6ba_62b2_41b5_8536_21e1972eab00" WebPart="true" __WebPartId="{a2b9d6ba-62b2-41b5-8536-21e1972eab00}" __MarkupType="vsattributemarkup" __designer:IsClosed="false"></AEPageHitsWebpart:AEPageHits></span>
</td>
</tr>
<tr>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<span lang="en-gb"> Created by <strong>
<a href="mailto:%20ray.spiteri#bbmmjv.com" class="style4">Ray
Spiteri</a></strong> and <strong>
Tim Quadling</strong></span></td>
</tr>
<tr>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<img alt="" valign="bottom" align="left" src="http://bbmmtoday.bbmmjv.com/SiteAssets/bbmm%20logo.png" width="286" height="26" /></td>
</tr>
<tr>
<td>
<AEPageHitsWebpart:AEPageHits runat="server" Description="Displays the page hit count of the current page" Options="" Title="AE Page Hits Web Part" ImportErrorMessage="Cannot import the AE Page Hits Web Part." IsActive="False" SinceDate="10/11/2014 09:00:00" ChromeType="None" Template="Page Hits: {hits}" ID="g_5e6becd0_a22c_4549_8b43_f9a7c860a639" WebPart="true" __WebPartId="{5e6becd0-a22c-4549-8b43-f9a7c860a639}" __MarkupType="vsattributemarkup" __designer:IsClosed="false"></AEPageHitsWebpart:AEPageHits></td>
</tr>
</table></td>
</tr>
</table>
There are three suspicious things in your HTML:
element after the element with ending between
and Unpair and
Two elements in the end while only 1 opening
All these HTML errors mean that it's on browser how it is rendered. And mostly it's rendered "wrong". Because it's incorrect.
my question is how would I use an HTML::Template tag inside a value of form field to change that field. For example
<table border="0" cellpadding="8" cellspacing="1">
<tr>
<td align="right">File:</td>
<td>
<input type="file" name="upload" value= style="width:400px">
</td>
</tr>
<tr>
<td align="right">File Name:</td>
<td>
<input type="text" name="filename" style="width:400px" value="" >
</td>
</tr>
<tr>
<td align="right">Title:</td>
<td>
<input type="text" name="title" style="width:400px" value="" />
</td>
</tr>
<tr>
<td align="right">Date:</td>
<td>
<input type="text" name="date" style="width:400px" value="" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="Cancel">
<input type="submit" name="action" value="Upload" />
</td>
</tr>
</table>
I want the value to have a <TMPL_VAR> variable in it.
You use it the same way you'd use a template variable anywhere else:
<input type="text" name="date" style="width:400px" value="<TMPL_VAR NAME=date>" />
Yeah, it's ugly and it breaks your HTML validator. Which is one of the many reasons why I like Template Toolkit better.