I have searched, and this post is closest, but not exactly the same. I am trying to have two spans next to each other, with percentage widths. However, when the window's width is decreased by the user's screen size or window resizing, the labels and input fields separate individually. I would like the label and input to be one unit, so that if the window is decreased, the second span will wrap below the first.
HTML:
<span><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></span>
<span><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></span>
CSS:
#startdate {
width: 30%;
display: inline-block;
}
#enddate {
width: 30%;
display: inline-block;
}
Here is a fiddle. If you want to test the resizing functionality, move the center bar to the right.
Fixed: http://jsfiddle.net/XceSq/1/
<div style="display:inline-block;"><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></div>
<div style="display:inline-block;"><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></div>
The span element is a textual container and does not support the width requirement you are aiming to achieve. The div element, however, is a layout container which will allow you to contain the two objects within a single block. Using display:inline-block, we're able to make sure that the two containers show up side by side.
Enjoy and good luck!
Related
I want to position a label above and to the left edge of a text field. I put them together in a div. The only problem left is that I need the correct position or display attribute that the input field doesn't react to the label. In that way, I could write text-align:left or float: left to position the label at the very edge of the div and thus at the very edge of the label.
<div class="AlignLeft">
<input type="text" id="1" name="name" maxlength="100" required>
<label for="name" id="1">Align label left</label><br>
</div>
Thank you!
without CSS
to make that on click of the label, the input will be focused.
you will need that your <label> element, have the for="" attribute
this attribute needs the same id="" as the input. (not the name="")
for attribute (docs): https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for
for making the <label> be on the left
put the label before the <input>
make the input nested inside the <label>, then insert a span before the <input>
no css solution:
<div>
<label for="myId"> <!-- put here the id -->
<span>this is the label text</span> <!-- the text -->
<input type="text" id="myId"> <!-- input -->
</label>
</div>
with CSS
if you can't change the HTML structure, then follow this second way (using CSS)
The float property, you showed before seems to work fine.
so just change the for="" attribute to be equal to the id="" of <input>
.AlignLeft label {
float: left;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
or use CSS flex with the direction of reverse
using flexbox you have other advantages like gap or centering, and so on...
.AlignLeft {
display: flex;
/* solve the problem (now the text is on the left side) */
flex-direction: row-reverse;
/* you can center easily using flex, or in this case put it on the left of the page */
justify-content: left;
align-items: center;
/* add a gap is easier with flex */
gap: 1rem;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
I am working on a page where I am trying to, in Excel terms, freeze the Left column. When the user scrolls to the right, the leftcolumn needs to remain visible. The entire page is using divs, not tables. I'm freezing the left most divs using css:
.sticky-test {
position: -webkit-sticky;
position: sticky;
left: 0px;
}
It seems to work up when I scroll to a certain point. but eventfully disappear, The contents extend many inches off the screen. The sticky divs seem to disappear once I move past the original body contents.
Is there a solution to keep it sticky?
Here is some of the html:
<div class="d-flex flex-row nact-row">
<input type="hidden" class="nact-form-control" id="z0__LastName" name="[0].LastName" value="FNAME" />
<input type="hidden" class="nact-form-control" id="z0__FirstName" name="[0].FirstName" value="LNAME" />
<input type="hidden" class="nact-form-control" data-val="true" data-val-required="The NPI # Type 1 field is required." id="z0__NpiNumberType1" name="[0].NpiNumberType1" value="1225195811" />
<input type="hidden" class="nact-form-control" data-val="true" data-val-required="The Service Provider Id field is required." id="z0__ServiceProviderId" name="[0].ServiceProviderId" value="395" />
<div class="nact-tbl-display-long sticky-test nact-status-new">FNAME, LNAME</div>
<div class="nact-tbl-display">1225195811</div>
.
.
.
</div>
Here is what is happening. The fname, lname is sticky. If I keep scrolling over just a bit more (past the original body), it will disappear
What would be the simplest way to align a slider with the value of the slider which is on its right? Without using external library. Just using HTML5? Do I need to use CSS for this? How?
updateTextInput('0');
function updateTextInput(val) {
document.getElementById('amount').value = val; //update current slider value
// do other action here
}
<input type="range" id="rangeInput" name="rangeInput" min="0" max="100" value="0" step="1" oninput="updateTextInput(this.value);">
<output name="amount" id="amount" for="rangeInput">0</output>
When running the above, the output (on Chrome on windows looks like)
You can see the number is not aligned horizontally well with the slider. It should be a little higher.
I know there are many ways to align things in CSS and HTML. But I am not sure with a slider like this what would be the best way to go about it.
ps. sorry do not know how to make a "JSFiddle" yet.
just add below two css properties for both the elements.
input,output{display: inline-block;
vertical-align: middle;}
<!doctype html>
<html>
<body>
<input type="range" id="rangeInput" name="rangeInput"
min="0" max="100" value="0" step="1" data-show-value="true"
oninput="updateTextInput(this.value);">
<output name="amount" id="amount" for="rangeInput">0</output>
<BR>
<script>
updateTextInput('0');
function updateTextInput(val)
{
document.getElementById('amount').value=val; //update current slider value
// do other action here
}
</script>
</body>
</html>
The input and output both are inline elements which are aligned to baseline by default...
...so set vertical-align:middle to both to align them vertically center
Stack Snippet
updateTextInput('0');
function updateTextInput(val) {
document.getElementById('amount').value = val; //update current slider value
// do other action here
}
input,
output {
vertical-align: middle;
}
<input type="range" id="rangeInput" name="rangeInput" min="0" max="100" value="0" step="1" oninput="updateTextInput(this.value);">
<output name="amount" id="amount" for="rangeInput">0</output>
You can use a parent div for input rang and output the and this parent div element should be position: relative and output element should be position: absolute with these properties position: absolute; right: 0px; top: 5px; you can set top position according you what your need. Your input rang width should be 90% or what do you want according to your query.
I'm trying to get an div with image background to appear to the right of a text box. I have tried Float = none, left, right, I have tried position and even played with margins but nothing seems to get it to stay.
<div id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat; margin-left: 245px; margin-top: 2px;"></div>
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
How's that work for ya?
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
<div id="status" style="display:inline;background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></div>
float left and right try to throw your element as far to one side of the container as possible. If you want the element on the right side of a second element, put it after the second element in your HTML. Also, divs are block elements. Block elements want to be on their own line. Use an inline element (like a span), or set the display css property to inline on a block element you don't want on a new line.
EDIT: Here it is as a span for ya
<input name="strsearch" style="color:#333" type="text" id="strsearch" onKeyUp="Search(this.form)" value="Please enter your search criteria..." size="35" maxlength="75" onFocus="clearfield();" />
<span id="status" style="background-image:url(menubar/ajax-loader.gif); width:16px; height:16px; background-repeat:no-repeat;padding-right:16px;"></span>
Just float:right the div and remove the 245px left margin so you aren't pushing the input too far away.
I have a simple HTML table with 2 columns containing text fields and headers for 'Name', 'Comments' and 'Email'.
I'm looking for the best strategy on styling this HTML fragment if it were to appear on multiple pages - requiring different dimensions on each page. I've been reading a lot about CSS recently but havent stumbled across enough information yet that really makes me comfortable to know the best way to design such .css.
For instance I might show the comments form at 50% width on the 'comments' page, but only at 20% in a sidebar in some additional places on the site.
I am mainly concerned about styling the widths of the boxes - but of course the same approach applies for the text. For instance the name field should not be as wide as the email field. I'm thinking fixed widths are better than percentages.
There are obviously many ways to style it. Assume I have 1 master css file already.
1) Put percentage widths on the input tags and then the outer div would be 100% width for whatever panel it is contained in. This requires no page specific css but I don't like the idea of percentages inside the td tags, plus I cant change the height easily of the textarea.
2) create styles for #Name, #Comments and #Email in each individual page as additional styles in <head><style> *
3) style based on #Name, #Comments and #Email in a page specific css file. Are page specific files good or bad? I'm not even sure I like styling based on the ids here because they're dynamically generated and if for some reason they needed to change I'd have to update the css everywhere.
4) style based on #Name, #Comments and #Email but qualify them with a descendent selector specific to each page. So i'd have .faqPage #Name for when this appears on the FAQ page. Obviously these go in my master css file.
5) create class names for 'emailField,nameFieldandcommentsField` [options 2,3,4 are repeated for this option]
6) create class names for 'shortField,fullWidthFieldandtextInputField` [options 2,3,4 are repeated for this option]
7) you get the idea :)
8) something else
I'm just a little overwhelmed with all the options. How do I go about deciding which is the best way? A specific goal is to be able to style the same HTML on multiple pages (obviously thats what css is all about though - but it does affect which options I can use).
<div id="pnlSubmitComments">
<table class="fieldTable">
<tr>
<td align="right">
<label for="Comments">Name:</label>
</td>
<td>
<input id="Name" name="Name" type="text" value="" />
</td>
</tr>
<tr>
<td align="right">
<label for="Comments">Email:</label>
</td>
<td>
<input id="Email" name="Email" type="text" value="" />
</td>
</tr>
<tr>
<td align="right" valign="top">
<label for="Comments">Questions:</label>
</td>
<td>
<textarea id="Comments" name="Comments">
</textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" />
</td>
</tr>
</table>
</div>
PS. The actual field names more specific such as CommentsName - its just easier to put Name here for readability.
Side comment: Maybe you shouldn't use tables to layout this form but fieldsets, it would leave you with more flexibility. For example if you decide to have the labels and input fields on top of each other in a more narrow column...
your example without tables (looks also much prettier):
<style type="text/css">
<!--
form { /* set width in form, not fieldset (still takes up more room w/ fieldset width */
font: 100% verdana, arial, sans-serif;
margin: 0;
padding: 0;
min-width: 500px;
max-width: 600px;
width: 560px;
}
form fieldset {
/* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
border-color: #000;
border-width: 1px;
border-style: solid;
padding: 10px; /* padding in fieldset support spotty in IE */
margin: 0;
}
form fieldset legend {
font-size: 1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
/* be careful with padding, it'll shift the nice offset on top of border */
}
form label {
display: block; /* block float the labels to left column, set a width */
float: left;
width: 150px;
padding: 0;
margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
text-align: right;
}
form input, form textarea {
/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
width: auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */
margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of
label aligns textarea better in IE */
}
textarea {
overflow: auto;
}
/* uses class instead of div, more efficient */
form br {
clear: left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
-->
</style>
<div id="pnlSubmitComments">
<form>
<fieldset>
<label for="Comments">
Name:
</label>
<input id="Name" name="Name" type="text" value="" /><br />
<label for="Comments">
Email:
</label>
<input id="Email" name="Email" type="text" value="" /><br />
<label for="Comments">
Questions:
</label>
<textarea id="Comments" name="Comments">
</textarea><br />
<label for="spacing"></label>
<input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" />
</fieldset>
</form>
</div>
Now to your main question. I would do it as follows:
I would use the id's of the different layout columns I want to use the form in. So if I use it in my main column () I would write CSS accordingly like so:
#main .pnlSubmitComments form fieldset {
/*your CSS*/
}
and for the side column respectively
#side .pnlSubmitComments form fieldset {
/*your CSS*/
}
You can have control over each element by assigning classes like so:
<input type="text" class="email" name="email" id="email" />
and then you do exactly as described above:
#main .email {
/*your css for the .email textbox/*
}
You can easily do it with one css file, if you can add a style class on a container element.
For example, page 1 would have the following html:
<body class="page1">
<!-- repeated html here -->
<input />
</body>
And on page 2 you'd have:
<body class="page2">
<!-- repeated html here -->
<input />
</body>
In your single css file you can target the input tags based on the class of the body element:
body.page1 input { width: 25%; }
body.page2 input { width: 50%; }
So, you keep the html the same, just change the class (or id) of a container element, and use that to write different css rules.
Update: After rereading your list, i see this is more or less on your list as number 4. I think this is a good option if you can use it. I also use it to target different browsers, by adding a class indicating the browser on a body tag.
1) Use common css and set some of the values like width in code behind.
2) Create multiple css files for different needs and link right css to page using code behind.
Sorry it took so long to get back to you!
CSS-GRID with grid-template-areas is a fantastic way to do this!
You can name regions and then switch the css with responsive media queries and change the layout without ever having to rearrange the HTML.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas