I have a page that looks like this:
<body>
<div class="pollid" >
<select class="pollid" id="pollid" size="[2]" >
[options]
</select></div>
<div class="seperator"></div>
<div class="options">
<select class="options" id="options" disabled="disabled" size="2">
<option id="deadoption">Select a poll to enable this box.</option>
</select></div>
<div class="seperator"></div>
<div class="options2" id="options2">
</div>
</body>
I also have a bit of jquery that just does this when a specific option in the second div is selected:
$("#options2").load("ajax/newOption.html");
And newOption.html looks like this:
<input type="text" id="newopt" label="Option: " />
<button id="submit" type="button" value="Submit" />
The CSS I have looks like this:
select {
height: 100%;
width: 100%;
}
div.pollid {
height: 100%;
width: 30%;
display: inline-block;
}
div.options {
height: 100%;
width: 30%;
display: inline-block;
}
div.options2 {
height: 100%;
width: 30%;
display: inline-block;
}
.seperator {
height: 100%;
width: 3%;
display: inline-block;
}
Now, this works. However, when I click the option that loads that page, the div jumps down so that the bottom of the input is at the bottom of my screen. This is not what I want. I want the div to stay where it is, taking up 30% of the screen. I don't want the screen to scroll at all, which it does once the html is loaded. How might I be able to fix this?
I found the solution after experimenting. It looks like, for some reason, putting anything in any of these divs other than the <select size="x>1"> makes it jump down, and giving them the property vertical-align:top fixes that.
Related
I'm having troubles centering my HTML form submit buttons in CSS.
Right now I'm using:
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
with this CSS content
#btn_s{
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
And it's not doing anything. I know I'm probably doing something stupid wrong. How can I fix this?
http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/
i just wrapped a div around them and made it align center. then you don't need any css on the buttons to center them.
<div class="buttonHolder">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
.buttonHolder{ text-align: center; }
Input elements are inline by default. Add display:block to get the margins to apply. This will, however, break the buttons onto two separate lines. Use a wrapping <div> with text-align: center as suggested by others to get them on the same line.
I see a few answers here, most of them complicated or with some cons (additional divs, text-align doesn't work because of display: inline-block). I think this is the simplest and problem-free solution:
HTML:
<table>
<!-- Rows -->
<tr>
<td>E-MAIL</td>
<td><input name="email" type="email" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register!" /></td>
</tr>
</table>
CSS:
table input[type="submit"] {
display: block;
margin: 0 auto;
}
Try this :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#btn_s{
width:100px;
}
#btn_i {
width:125px;
}
#formbox {
width:400px;
margin:auto 0;
text-align: center;
}
</style>
</head>
<body>
<form method="post" action="">
<div id="formbox">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
</form>
</body>
This has 2 examples, you can use the one that fits best in your situation.
use text-align:center on the parent container, or create a container for this.
if the container has to have a fixed size, use auto left and right margins to center it in the parent container.
note that auto is used with single blocks to center them in the parent space by distrubuting the empty space to the left and right.
/* here is what works for me - set up as a class */
.button {
text-align: center;
display: block;
margin: 0 auto;
}
/* you can set padding and width to whatever works best */
<style>
form div {
width: 400px;
border: 1px solid black;
}
form input[type='submit'] {
display: inline-block;
width: 70px;
}
div.submitWrapper {
text-align: center;
}
</style>
<form>
<div class='submitWrapper'>
<input type='submit' name='submit' value='Submit'>
</div>
Also Check this jsfiddle
I'm assuming that the buttons are supposed to be next to each other on the same line, they should not each be centered using the 'auto' margin, but placed inside a div with a defined width that has a margin '0 auto':
CSS:
#centerbuttons{
width:250px;
margin:0 auto;
}
HTML (after removing the margin properties from your buttons' CSS):
<div id="centerbuttons">
<input value="Search" title="Search" type="submit">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit">
</div>
If you want to take it to the next level, use flexbox:
.form {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
gap: 1em;
}
#btn_s {
width: 100px;
}
#btn_i {
width: 125px;
}
<div class="form">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
Guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
One simple solution if only one button needs to be centered is something like:
<input type='submit' style='display:flex; justify-content:center;' value='Submit'>
Although I've used an inline example, for production, the code should be placed in a CSS file using a class.
You can do it with text-align: center.
.form-1 {
text-align: center;
}
#btn_s {
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
<div class="form-1">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
Buttons are by default an inline-block style element. They will not respond to auto. You have to indicate a specific number.
button {
margin: 6px 50px;
}
(I prefer percentages, they seem to work better)
If, in the case, it must respond to margin: auto, you have to change it to be a block element.
button {
display: block;
margin: 6px auto;
}
I am currently trying to put a select2 tag inside my XHTML. However, I can't control its width. I have tried a lot of stuff, but none of them work.
Here is the problem I am currently facing:
I even tried to put CSS for select2 and then keep width:600px. But it's not working. Any suggestions?
<fieldset>
<h2 class="fs-title">Health Condition</h2>
<h3 class="fs-subtitle">Tell us more about you</h3>
<input type="text" class="medicalCondition" name="medicalCondition placeholder="What condition are you facing?" />
<div class="container">
<div class="block">
<select type="text" id="mealPreferences" multiple="true">
<option value="Beef">Beef</option>
<option value="Chicken">Chicken</option>
<option value="Pork">Pork</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
This is my attempt in CSS:
.container {
}
.block {
display: block;
padding: 10px 20px;
margin: 0 auto;
}
.mealPreferences {
display: block;
width: 300px;
}
mealPreferences is an id not class. So you are using a wrong css method to define the rules. Use #mealPreferences not .mealPreferences to define the css rule.
Change Css From-
.mealPreferences {
display: block;
width: 300px;
}
To-
#mealPreferences {
display: block;
width: 300px;
}
Below is the working example-
.block {
display: block;
padding: 10px 20px;
margin: 0 auto;
}
#mealPreferences {
display: block;
width: 500px;
}
<div class="container">
<div class="block">
<select type="text" id="mealPreferences" multiple="true">
<option value="Beef">Beef</option>
<option value="Chicken">Chicken</option>
<option value="Pork">Pork</option>
<option value="Vegetables">Vegetables</option>
</select>
</div>
</div>
In CSS if you define the classes (use . before name), to define any id you need to use #, use this:
.container {
}
.block {
display: block;
padding: 10px 20px;
margin: 0 auto;
}
#mealPreferences {
display: block;
width: 300px;
}
Try giving the object width: 100% and max-width: (maximum px you want) on css
I know there are many question about it, but they don't answer properly.
After readings and looking for, I tried this:
<input id="ext-element-47" class="x-input-file x-input-el" type="file" accept="" style="display:none">
hiding the file-input and then
this.element.down(".x-input-file").dom.click();
this works on Chrome's console but in my JS code it doesn't. It doesn't click.
Anyone knows why? and what can I do for make click?
Notes:
I need to make click because the file element is not visible and so when it clicks it does not show unless I do element.click ().
Here is an example what I'm doing:
document.getElementsByClassName('o-file-field-input')[0].click()
.o-file-field-input {
display: none;
}
.o-big-btn {
background-color: red;
height: 3em;
width: 3em;
}
<div class="x-container x-unsized o-cont-option" data-componentid="ext-container-5" id="ext-container-5">
<div class="x-inner x-align-center x-pack-center x-horizontal x-layout-box" id="ext-element-50">
<div class="x-button x-button-plain open-field-icon o-big-btn x-layout-box-item x-flexed x-stretched" id="ext-OUI_BaseButton-1" data-componentid="ext-OUI_BaseButton-1" tabindex="0" style="-webkit-box-flex: 1;">
<span class="x-button-icon x-shown smf smf-upload-file" id="ext-element-45"></span>
<div class="o-button-bg"></div>
<div class="x-unsized x-field-input x-has-height" id="ext-fileinput-1" data-componentid="ext-fileinput-1" style="height: 38px;">
<input id="ext-element-47" class="x-input-file x-input-el o-file-field-input" type="file" accept="">
<div class="x-field-mask x-hidden-display" id="ext-element-48"></div>
<div class="x-clear-icon" id="ext-element-49">
</div>
</div>
</div>
</div>
</div>
See ya!
Here's what I usually do: Wrap the input inside a <label> element, and then style the element as a button, for example:
.pretty-file {
border: 1px solid #000;
cursor: pointer;
display: inline-block;
padding: 5px 15px;
}
.pretty-file input[type="file"] {
display: none;
}
<label class="pretty-file">
Choose File
<input type="file" />
</label>
This finally works well:
var obElement = document.getElementsByClassName('input-file')[0];
//the title property overrides tooltip's description
obElement.setAttribute('title', ' ');
.flex-style{
display: flex;
}
.input-file{
opacity: 0;
margin-left: -40px;
width: 40px;
height: 45px;
}
.icon{
width: 40px;
height: 45px;
background-color: blueviolet;
}
<div class='flex-style'>
<div class='icon'></div>
<input class='input-file' type='file'>
</div>
http://plnkr.co/edit/LmMwgy2gig11nQXzCt1I?p=preview
I want the end result to look like this:
How should my css be, so that my search button is aligned with and right next to the search input?
see this Demo
<div class="srch">
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8">
<button>search</button>
</div>
.srch button {
float: right position: absolute;
margin-left: -56px;
display: table-cell;
background: #08c;
color: #fff;
height: 30px;
border: none;
}
.srch input {
float: left;
padding-right: 60px;
}
Something like this:
<div>
<div style="width: 300px; float: left; height: 40px;"></div>
<div style="width: 80px; float: left; height: 40px;"></div>
<div style="clear: both"></div>
</div>
You then place the button inside the second div and the input in the first...
Make the surrounding element ( ) position relative.
Make the input position absolute, then position it.
For the mag icon, simply use a background image making sure you set the display to 'block' and set the correct width and height. Remove the search text with font-size: 0;
I am trying to position an overlay over a div. I had the code working successfully when the div was guaranteed to be only one row, but I am struggling to obtain the proper height of the div when it breaks out. It appears that the div reports its single-row height, but displays a multi-line height after rendering.
function InitializeControls() {
console.log("Width: " + $('#PlanViewControls').width());
console.log("Height: " + $('#PlanViewControls').height());
console.log("innerHeight: " + $('#PlanViewControls').innerHeight());
console.log("outerHeight: " + $('#PlanViewControls').outerHeight());
$('#PlanViewControls').show();
$('#PlanViewControlsOverlay')
.stop()
.show()
.css({ opacity: .7 })
.width($('#PlanViewControls').width())
.height($('#PlanViewControls').height())
.offset($('#PlanViewControls').offset())
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
width: 100%;
min-width: 200px;
overflow: hidden;
padding: 5px;
}
#PlanViewControls > div
{
display: inline-block;
min-height: 20px;
}
<div id="PlanViewControlsOverlay">
</div>
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div class="separated" style="padding-top: 3px">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated" style="padding-top: 4px">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated" style="padding-top: 3px">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
Is it possible to obtain these metrics?
I've put your code into this fiddle, changed a part whith errors (what JSLint reported) with working code and put it into .ready() so it would get called.
Look from here, whether it helps. I didn't answered anything directly, but more precise question would help to nail down your problem (:
You don't need JavaScript at all!
Just cut and paste the #PlanViewControlsOverlay into the #PlanViewControls div. This way, you can use a percentual width and height to make it cover the whole area.
What you would do is add these lines of code in your css and getting rid of the display: none;.
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
width: 100%;
height: 100%;
display: block;
}
Here is an example: http://jsfiddle.net/uJrLT/21/