I need help in HTML styling
here is the case:
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
<input type="button" id="button2" value="Update"/> <br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = '';" size="25"/>
as we can see all the elements inside
<div></div>
will be displayed on clicking button1(they will hidden initially).When all the fields appear the another button inside div(button2) is unaligned to button1.
What i want is when i click button1 both button1 and button2 should be aligned..
how can i do this??
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = '';document.getElementById('button2').style.display=''" size="25"/>
<input type="button" id="button2" value="Update" style="display:none"/>
If you want the two buttons next to each other, but the second one can only be displayed upon clicking the other button, then you'll need to include script to show the button onclick.
What do you mean "aligned"? Are they supposed to be aligned horizontally, that-is, they should appear on the same line? If so, you need to remove your <br /> tags that force line-breaks, and set the display of your div not to blank, but to inline (as divs are displayed as block by default):
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/>
<input type="button" id="button2" value="Update"/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = 'inline';" size="25" />
This produces the following when you click on the "Get Info" button:
Note that the text input, update and get info are all on one line!
If you want them all to appear left-aligned, the code that you provided looked just fine when I tested it. Upon clicking the get info button, I get a display that looks like this:
[INPUT "URL" AREA]
[Update Button]
[Get Info]
If you aren't trying to get your display horizontally aligned or left-aligned, then what type of alignment are you looking for? Can you provide a diagram or screen shot if this is not the answer you're looking for?
I generally agree with what Kiley mentioned a moment ago. If you must maintain that exact structure and want the buttons horizontally aligned, adding float:left; styles to the <div></div> and to button1 would solve your issue.
<div id="hidden" style="display:none; float:left;">
<label>Url:</label>
<input type="text" name="url" size="50" />
<input type="button" id="button2" value="Update" />
</div>
<input type="button" id="button1" value="Get Info" onClick="document.getElementById('hidden').style.display = '';" style="float:left;" size="25" />
Hope that helps!
They shouldn't be unaligned, there's probably an style on that div.
try this css
#hidden {
margin:0;
padding:0;
}
Related
I'm trying to create a popup, i did whatever, it is not the main thing.
This is the situation, I add a autocompleted textbox in the popup and a textbox below of it with two buttons. But when I enter some input to textbox, it suggests me three of the most approximetly words, but it effects the other buttons and textbox, they are going down, I dont want it to do this. everything has to be stable, how can i handle this problem? For more information,screenshots are below.
Thanks...
without entering a data to textbox
after entering a data to textbox
<div class="header">X</div>
<form name="X" class="content">
<div>
<input type="text" name="country" id="country" ng-model="country" ng-change="complete(country)" class="form-control" />
<ul class="list-group" ng-model="hidethis" ng-hide="hidethis">
<li class="list-group-item" ng-repeat="countrydata in filterCountry" ng-if="$index < 3" ng-click="fillTextbox(countrydata)">{{countrydata}}</li>
</ul>
</div>
<input type="text" class="form-control" id="qty" placeholder="Quantity">
<!-- Dialog Buttons -->
<br />
<br />
<div class="ngdialog-buttons">
<button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="">CANCEL</button>
<button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="" ng-disabled="">OK</button>
</div>
</form>
This is the source code of popup, it is called by another button from the page and opening with this style and html...
Im using a search form that contains a text box and submit button...For some reason, I have a alignment issue with the 2 elements(input=text and button on the top of the div) particularly in chrome..
Can you please let me know what is the issue?
HTML & CSS
<form id="bigsearchform_new" method="post" >
<input id="search_string" name="search_string" type="text" class="startnewsearch rounded" placeholder="Search..." maxlength="500" /><input id="bigsearchbutton_new" type="button" class="searchButton" title="Click here to search the database"/>
<input type="hidden" name="antiCSRF" value="{{acsrf}}" />
<input type="hidden" name="session_id" value="{{session_id}}" />
<input type="hidden" name="commodity_id" id="commodity_id" />
</form>
</div>
JSFiddle
Input elements are vertically misaligned as they have inline layout and different heights. One of the options is to use vertical-align property with middle/bottom/top (for example) value :
input {
vertical-align : middle;
}
Example
Your button is missing the value property:
<input id="bigsearchbutton_new"
type="button"
class="searchButton"
title="Click here to search the database"
value="Go" />
See Fiddle
I have submit and reset buttons for a form, and I cant for the life of me figure out how them to get under the textbox. And then the address element is displaying on the right side aswell.
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
CSS:
input[type="submit"], input[type="reset"] {
display: inline-block;
width: 150px;
float: inline;
}
Surely I'm missing something right?
CSS
#request { display: block; clear: both; }
Working Fiddle
How about a line break after the textarea?
ie:
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<br />
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
or via css, you could make the first of the 2 buttons clear any previous floats;
input[type="submit"] {
clear: both;
}
Instead of display: inline-block; try display: block; for either your text area (doing this will say "put nothing else on the the same line as this element unless it floats", or for your submit order and cancel buttons.
I'd also suggest putting your two buttons inside of a wrapper div so that way you can manipulate the position of those two buttons as a unit instead of individually.
Also, one last note: don't have more than one element on a page with the same id. For elements you want to apply the same properties to, make the id a class instead.
You can use a div to wrap them.
I don't see "address element", so I can't help you.
<div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</div>
You can try this working fiddle!
<form>
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<div class="clear:both"></div>
<textarea name="request" id="request"></textarea>
<div class="clear:both"></div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
I have a simple situation as shown below:
<body>
<iframe id='my_iframe' name='my_iframe' style='display:none;'></iframe>
<form id="fileupload" method="POST" enctype="multipart/form-data" action="upload_test.php" target='my_iframe'>
<input name="theText1" id="theText1" type="text" />
<input name="theFile1" id="theFile1" type="file" />
<button style="width:40px;height:10px;" name="button1" id="submit" type="submit" />
</form>
<div style='width:100px;height:100px;' id='target_div'>Test Text</div>
</body>
Problem: The Div is not visible. It does show if I move it above the iframe. I have never used an iframe before. Can't figure this one out. Any suggestions?
After some fiddling with JSFiddle (pun intended), it appears that the button tag is not self-closing. Changing <button ...... /> to <button ....></button> seemed to have made the div tag appear correctly ("Test Text" was being placed inside of the button, which makes me conclude that the button tag is not self-closing).
JSFiddle
For some reason my Submit and Cancel buttons are not being wrapped in the form tag like I expect them to be (based on their position with in the form tag in the HTML) when I have their float property set to right and left respectively. The two buttons are positioned just outside & below the form div to the far right & left sides.
Link to the HTML & embedded CSS
alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TFLpNgv4XkI/AAAAAAAAAE8/ocwa0uSzwX4/reply-float-form.png
How can I make it so the form div wraps the two buttons so they do not appear outside & below the form div?
Thank you
Adam
Remove .cancels float rule:
.cancel{/* no float */}
*tested on Chrome
Looks like you need to clear the floats. Give this a try.
<form action="#" method="get">
<textarea name="Reply Textarea" type="text" rows="2" cols="40" wrap="soft"></textarea>
<input id="buttons" class="submit" type="submit" value="Submit" />
<input id="buttons" class="cancel" type="button" value="Cancel">
<br style="clear: both;" />
</form>