I have the following markup in a simple html page.
<div>
Name: <input id="nameInput" type="text" />
</div>
<div>
Amount: <input id="numberInput" type="number" />
</div>
<input id="getConverted" type="button" value="button" onclick="performConversionAndDisplayResults();" />
<textarea id="resultOutput" rows="2" cols="20"></textarea>
I need to achieve the following
Center the items on the browser window
Make the items larger as you see in current web sites
Make the textarea span the whole width
What is the best way to do this, I have seen a number of solutions but wannt to know the best approach.
With CSS:
div
{
margin: 0 auto;
font-size: 30;
}
For the third one, not sure exactly how you want it, but I would recommend looking here.
Related
I'm creating a form for my website and have the following piece of code for the enter message part of my code. I want to change the height for this input box only but am unsure how to do it.
I would prefer to change the height in the html code rather than CSS if possible.
Thanks :)
<p>
<label for="from">Your message:</label>
<br />
<input type="text" name="message" id="message" value="type your message..." maxlength="40" size="40" onclick="this.value=''"/>
</p>
I have tried doing:
<p>
<label for="from">Your message:</label>
<br />
<input type="text" name="message" id="message" value="type your message..." maxlength="40" width="40px" height="40px" onclick="this.value=''"/>
</p>
But this didn't work
A "text" input does not have a height or width attribute. Since you want to define the height in your HTML, you can use the style attribute. You use CSS rules as its value like this:
<input type="text" style="height: 40px;" />
According to the MDN article for <input>:
width
If the value of the type attribute is image, this attribute defines the width of the image displayed for the button.
The same description applies to height
Use CSS instead. Either inline (not preferred) style="height: 40px;" or
#message{ height: 40px; }
You can style text inputs like so with css
input[type=text] {
...
}
Without css you can use the style attribute like so
<input type="text" style="..."/>
If using text areas you can use the rows attribute to change the height of the element however this does not work with inputs
I'm trying to create an input form on a web page, and I want all of the input elements to be lined up along a certain column. My idea was to use absolute positioning to just shift all of the input elements over to a specific point on the page. It's working fine, except for one problem: the input elements are overlapping with each other a little bit, vertically.
Here's a MVCE:
<!DOCTYPE html>
<html><head>
<style>
span.right_align {
display: inline;
position: absolute;
left: 80px;
}
div.form_container {
position: relative;
}
</style>
<title>World's Best GUI</title></head>
<body type="text/css" style="background-color: #F7D879; font-family: Georgia, serif">
<div class="form_container">
<form name="guiForm" method="post" action="return false;">
Input 1: <span class="right_align"><input type="text"></span><br>
Input 2: <span class="right_align"><select autocomplete="off">
<option value="yes">Yes</option>
<option value="no">No</option></select></span><br>
Input 3: <span class="right_align"><input type="text" size="50"></span><br>
Input 4: <span class="right_align"><input type="text"></span>
</form>
</div>
</body>
</html>
As far as I can tell, the problem is because the font is smaller than the size of the input box, but it's the size of the font that determines where a new line "begins". If you comment out or remove everything in the right_align class, they stop overlapping (but they also stop lining up so nicely).
I'll also note that the reason I went for the span-class solution is because I need to 1) have some lines dynamically disappear and reappear, depending on the current state of a drop-down, and 2) dynamically create new input items that will also line themselves up nicely. This seemed like a solution that would interfere very little with the current workings of my web page.
Is there a simple way to fix this? Should I be creating these columns in an entirely different way? I'm open to totally new ideas as well.
EDIT: someone suggested I create a jsfiddle, so I did: http://jsfiddle.net/uy9comxk/
EDIT 2: there will be lines where I have multiple inputs that have to appear beside each other on the same line (for date inputs). I didn't include them because it would have increased the MCVE size by a lot.
In your css, use a line-height and it will work:
div.form_container {
position: relative;
line-height: 25px;
}
With a fiddle
Since you're using a form, you should use the label tag and set the width of each - ideally a little longer than than width of the inputs' names to account for longer ones. Using the label for the inputs will also fix the overlapping issue of the inputs.
CSS:
label {
display: inline-block;
width: 80px;
}
input {
margin-left:10px;
}
HTML:
<form name="guiForm" method="post" action="return false;">
<label for="input1">Input 1:</label> <input name="input1" type="text"><br>
<label for="input2">Input 2:</label> <input name="input2" type="text"><br>
<label for="input3">Input 3:</label> <input name="input3" type="text"><br>
<label for="input4">Input 4:</label> <input name="input4" type="text"><br>
<label for="input5">Input 5:</label> <input name="input5" type="text"><br>
</form>
http://jsfiddle.net/ub3bw1rv/
I have two input textbox that grows dynamically based on the size of the input. In between that there is a small text. The problem is that when the textbox grows in width, it overlaps the text next to it.
I am looking for an HTML/CSS styling that lets me push the text to right side as the textbox grows in width.
Any help is greatly appreciated.
Thanks
Adding some of my code.
.dynamic-push {
float: left;
}
<div class="row dynamic-push">
<div class="two columns dynamic-push ">
<input id="contact-position" class="dynamic-push" value="" type="text" placeholder="Position" data-bind="value: Person().Position, valueUpdate: 'afterkeydown', afterRender: $('#contact-position').autosizeInput()" /> at
<input id="contact-company" value="" type="text" placeholder="Company" data-bind="value: Person().Company, valueUpdate: 'afterkeydown', afterRender: $('#contact-company').autosizeInput()" />
</div>
</div>
There are knockout elements and I have used jquery autosize.input.js plugin to increase the width of the input text box dynamically.
Now the 'at' between the two input textboxes is being overlapped by the first textbox as it grows.
Hope you can figure out what is wrong here. If you need any other CSS codes, I'll share those too
Why not simple float them left within a container:
ONLINE DEMO
(demo contains animation enlarging the textbox)
HTML:
<div>
<input><div>Box 1</div<div>Box 2</div
</div>
CSS:
div > input,
div > div {
float:left;
}
(of course exchange div with a proper class).
Update
Thanks to OP for providing more code.
However, as you can see in this modified fiddle:
http://jsfiddle.net/AbdiasSoftware/LxByQ/2/
the problem is not at DOM level as the boxes pushes and moves as expected.
The problem is most likely in the autosizeInput function which deals with the chars and so forth. The delay can be caused by how it handles this. As the code for it isn't shown it's hard to locate exact reason but this is where you want to look in first instance.
Depends on how that automatic resize function handles it. If it adjusts the width of the first input field, you can try flexbox:
<div class="row dynamic-push">
<div class="two columns dynamic-push mylittleflexcontainer">
<input id="contact-position" class="dynamic-push" value="" type="text" placeholder="Position" data-bind="value: Person().Position, valueUpdate: 'afterkeydown', afterRender: $('#contact-position').autosizeInput()" />
<span> at</span>
<input id="contact-company" value="" type="text" placeholder="Company" data-bind="value: Person().Company, valueUpdate: 'afterkeydown', afterRender: $('#contact-company').autosizeInput()" />
</div>
</div>
.mylittleflexcontainer {
display: flex;
}
.mylittleflexcontainer:first-child {
flex-grow: 1;
}
who can tell me why the radio button has this strange behaviour as you can see in the picture?
it's not aligned correctly.why there is that line? I didn't applied any css style.
here it is the html code:
<div class = "ui-grid-a">
<div class = "ui-block-a">
<div data-role="fieldcontain" class="ui-hide-label">
<label for"date">Birth Date</label>
<input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" style="width: 50%"/>
</div>
</div>
<div class = "ui-block-b">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="male" id="male" value="male" />
<label for="male">M</label>
<input type="radio" name="female" id="female" value="female" />
<label for="female">F</label>
</fieldset>
</div>
</div>
</div>
It appears as if the CSS controlling the fieldset surrounding your radio buttons is the culprit. I pulled the following from the default jQuery Mobile CSS.
.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; }
There is a top margin of .5em and a bottom margin of 1em. Adjust those to see if it makes any difference at all.
Without seeing the css I can't say for sure, but it looks like you have a default margin set on that radio button. Try resetting it with this:
input {
padding: 0;
margin: 0;
}
JqueryMobile automatically adds margins to the constructs it creates. I'm guessing the fieldset tags or the radio buttons themselves have additional margins from the conversion. Try adding a height property to the parent div and see if that works.
Also, the line appears when you have a narrow viewport when you use the data-role="fieldcontain". If the viewport is wider, it automatically disappears. It's JqueryMobile's way of organizing stuff around. It's usually used to group a label and its control together, so you might get a better result by not using one in that particular row of controls.
I'm trying to accomplish something that should be rather basic in CSS but I'm running in circles.
I have three divs in one fluid-width div. The two on the right have undefined width and should take up 100% of their allowed space. The full div already is fluid. And the far right div should have a width of 200px and that is fixed. Sort of like this:
[ [fluid(label)] [fluid(textbox)] [fixed=200(div)] ]
I'm trying to find a way to do this in CSS.
Thanks in advance...
edit:
Here's the html
<footer>
<form method="POST" action="/" id="input">
<label for="message" form="input" class="username">Will:</label>
<textarea id="message" cols="0" rows="0" autofocus form="input" wrap="hard" name="message"></textarea>
<div id="buttons">
<button type="submit" form="input" class="button medium" name="send" value="Send">Send
</button>
<button type="button" form="input" class="button medium" name="extras" value="Extras"><span>Extras</span><span>^</span>
</button>
</div>
</form>
</footer>
you could try using display:table-cell - but you'll need an extra div around the textarea:
http://jsfiddle.net/tU6w2/
(though i should add this won't work in IE7 - it doesn't support table-cell)
EDIT
in answer to the additional comments, another try - this time with jQuery - i don't think it can be done in CSS only:
http://jsfiddle.net/tU6w2/1/