I have a small box placed at the bottom of the page. I am trying to place a form right above a div but the form keeps jumping into the bootstrap div.
this is the html attempt
EDITTED:
I also want the row across the form to have a background color as thesame with the breadcrumbs but it is not showing
<div style="padding:1px; background-color: #F2F2F2;">
<form class="rightiest" method="post" action="/logout">
<input class="btn btn-link" type="submit" value="Leave Group"/>
</form>
</div>
<div class="breadcrumb">
<div class="wrap">
<div class="container" style="text-align: center;font-size: 80%;">
<strong> Please hold we will soon attend to you shortly</strong>
</div>
</div>
</div>
This is the css controlling the form
form.rightiest {float:right; margin-top:0px; margin-bottom:7px;}
with the above, the form keeps overlapping into the div. Please how can I place the form right above the div.
You need to clear your floats.
.breadcrumb {
clear: both;
}
Clear the float.
form.rightiest {float:right;
margin-top:0px;
margin-bottom:7px;}
.breadcrumb {
clear: both;
}
<form class="rightiest" method="post" action="/logout">
<input class="btn btn-link" type="submit" value="Leave Chat"/>
</form>
<div class="breadcrumb">
<div class="wrap">
<div class="container" style="text-align: center;font-size: 80%;">
<strong> Please hold we will soon attend to you shortly</strong>
</div>
</div>
</div>
Related
I need to right align a hyperlink in a <div>, however the only way I can get it to move right is to use the <p> tag. This puts the hyperlink on a new line rather than the same line.
How can I get it on the same line, and also give some spacing? Right now it looks like a run on sentence
<div>
<label class="control-label" for="ddlProfile">Profile:</label>
<input type="text" data-ng-model="viewModel.Name" class="form-control" />
<button >New</button>
<button >Edit</button>
<p style="text-align:right; display:block; margin:auto"><a href="https://www.w3schools.com" >Open New Form</a>
Display Detail</p>
</div>
You can use flexbox for this. Wrap the content in two parts - one for the left side, and another for the right. Then use margin to position the right side as you want.
.flex {
display: flex;
}
.right {
margin-left: auto;
}
/* your second question */
.right a {
margin-left: 1em;
}
<div class="flex">
<div class="left">
<label class="control-label" for="ddlProfile">Profile:</label>
<input type="text" data-ng-model="viewModel.Name" class="form-control" />
<button>New</button>
<button>Edit</button>
</div>
<div class="right">
Open New Form
Display Detail
</div>
</div>
Why not just float the elements to the right? but you need to change the order of the elements.
.float-right{
float:right;
}
.right-space{
padding-right:10px;
}
<div>
<label class="control-label" for="ddlProfile">Profile:</label>
<input type="text" data-ng-model="viewModel.Name" class="form-control" />
<button>New</button>
<button>Edit</button>
<a class="float-right" href="https://www.w3schools.com">Display Detail</a>
<a class="float-right right-space" href="https://www.w3schools.com">Open New Form</a>
</div>
I have a script and i want to change the position of the and Tag to switch thier places (For my RTL language). I want the Tag to be on the right side, and the Tag to be at the left side of the form.
Here's what i have:
What i want is:
Here's Some code:
<form class="form-horizontal" onsubmit="return false;">
<fieldset>
<div id="userIdInputContainer" class="control-group">
<label class="control-label" for="userId">משתמש</label>
<div class="controls inline-inputs">
<select id="userId" name="userId"></select>
<span class="help-inline"></span>
</div>
</div>
<div id="filterCustomerIdTEInputContainer" class="control-group">
<label class="control-label" for="filterCustomerIdTE">לקוח</label>
<div class="controls inline-inputs">
<select id="filterCustomerIdTE" name="filterCustomerIdTE"></select>
<span class="help-inline"></span>
</div>
</div>
<div id="projectIdInputContainer" class="control-group">
<label class="control-label" for="projectId">פרויקט</label>
<div id="parentProjectIdTE" class="controls inline-inputs">
<select id="projectId" name="projectId"></select>
<span class="help-inline"></span>
</div>
</div>
<div id="categoryIdInputContainer" class="control-group">
<label class="control-label" for="categoryId">סוג עבודה</label>
<div class="controls inline-inputs">
<select id="categoryId" name="categoryId"></select>
<span class="help-inline"></span>
</div>
</div>
<div id="descriptionInputContainer" class="control-group">
<label class="control-label" for="description">תיאור</label>
<div class="controls inline-inputs">
<textarea class="input-xlarge" id="description" rows="3"><#= _.escape(item.get('description') || '') #></textarea>
<span class="help-inline"></span>
</div>
</div>
</fieldset>
</form>
Click on the "הוספת רשומה" blue button at the left to see the form.
Here is a the code of a bootstrap.min.css (click to download) that handle the css parameters for the form:
.form-horizontal .control-label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-right:10px;padding-left:10px}.media .pull-left,.media .pull-right{display:block;float:none;margin-bottom:10px}.media-object{margin-right:0;margin-left:0}.modal{top:10px;right:10px;left:10px}
And the code of bootstrap-responsice.min.css (click to download):
.control-label{float:left;width:160px;padding-top:5px;text-align:right}.form-horizontal .controls{*display:inline-block;*padding-left:20px;margin-left:180px;*margin-left:0}.form-horizontal .controls:first-child{*padding-left:180px}.form-horizontal .help-block{margin-bottom:0}.form-horizontal input+.help-block,.form-horizontal select+.help-block,.form-horizontal textarea+.help-block,.form-horizontal .uneditable-input+.help-block,.form-horizontal .input-prepend+.help-block,.form-horizontal .input-append+.help-block{margin-top:10px}.form-horizontal .form-actions{padding-left:180px}table{max-width:100%;background-color:transparent;border-collapse:collapse;border-spacing:0}
I tried several css/html ways to implement it but without success.
You can use left and right floats on your .control-label and .inline-inputs classes to easily flip between RTL and LTR mode.
See my quick and dirty JS fiddle here: http://jsfiddle.net/ub07t7ax/
All it does is toggle between floating the controls right and the labels left, and vice-versa.
Of course you don't have to do this in script, that is just an example.
Update: To use this without JS, simply add the rtl class to your fieldset in your HTML to enable RTL mode.
Example CSS:
.inline-inputs select,
.inline-inputs input,
.inline-inputs textarea {
box-sizing: border-box;
width: 100%;
}
.inline-inputs {
float: right;
width: 75%;
}
.control-label {
float: left;
width: 25%
}
.rtl .inline-inputs {
float: left;
}
.rtl .control-label {
float: right;
text-align: right;
}
UPDATE 2: Bootstrap!
To work with bootstrap dialogs, first add the following classes to your CSS:
.rtl .inline-inputs {
margin-left: 0 !important;
}
.rtl .control-label {
float: right;
text-align: right;
}
Then to make the dialog show in RTL mode, add the rtl class to the DIV that is shown as a dialog, e.g.
<!-- modal edit dialog -->
<div class="modal hide fade rtl" id="timeEntryDetailDialog">
...
</div>
Please read this. This is tutorial for creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts.
Without seeing your CSS I don't know if there is more to it then a simple rearranging of the html (put labels after the div for your inputs) but if not it should just be that. Here is an example jsfiddle.
<div class="block">
<input type="text" />
<label>Simple label</label>
</div>
<div class="block">
<input type="text" />
<label>Label with more text</label>
</div>
<div class="block">
<input type="text" />
<label>Short</label>
</div>
i have html form and css, to side my button side by side. but im not able to give space between the buttons.
here is my code:
<html>
<body>
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" style="float:left;color:#fff" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" style="float:left" value="colSplit"/>
</form>
<p style="clear:floats"></p>
</div>
</body>
</html>
In this instance, you want to set the form elements to float. From there, you can add a margin to the first form element.
<html>
<body>
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank" style="float: left; margin-right: 5em;">
<input type="submit" value="paste2"/>
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank" style="float: left;">
<input type="submit" value="colSplit"/>
</form>
</div>
</body>
</html>
The easiest way is to add margin to one of the inputs.
Style="margin-right:30px;"
You may see your code with the 30px space between inputs here: http://jsfiddle.net/d6g66/
A jsfiddle or something to show it in action would be good or at least the css, but you should look into http://necolas.github.io/normalize.css/ for clear fix and without seeing your css, you should be able to use margins or padding.
Give the custom-button class a width and change the second button to float:right
http://jsfiddle.net/v85sH/
The width can be pixel, percentage, anything you like and the two buttons will be spaced evenly to the left & right.
CSS
.custombuttons {
width:100%;
}
.firstbutton {
float:left;
color:#fff;
}
.secondbutton {
float:right;
}
HTML
<div class="custom-buttons">
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" class="firstbutton" value="paste2" />
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" class="secondbutton" value="colSplit" />
</form>
<p style="clear:floats"></p>
</div>
We need to achieve that the search form with search button fill the entire column area.
UPDATE:
I have a simplified version of code which can be viewed here: http://jsfiddle.net/persianturtle/Trgr6/10/
Another, previous jsFiddle version is here:
Here is the live example http://jsfiddle.net/Trgr6/3/
You will see black area as an example of the entire area to fill in the old version.
In the new version, I tried to set the width of the search form to the width of the:
.row-fluid .span9 { }
Class width, which is:
width: 74.46808510638297%;
And the code:
<div class="searchbar">
<div class="container">
<div class="row-fluid">
<div id ="test" class="span9">
<form class="form-search">
<div class="input-append span12">
<input type="text" class= "search-query" placeholder="Enter Search">
<button type="submit" class="btn">Search</button>
</div>
</form>
</div>
<div class="span3 info">
.span3 column
</div>
</div>
</div>
</div>
Im not sure if I updated your Fiddle or not, but yeh. This will work.
http://jsfiddle.net/xWTuF/2/
Override the input append from inline-block to block and give it a padding-right equal to that of the overall button width and the padding on the input.
Give the input a width of 100%;
.container .form-search .input-append {
display:block;
padding-right:99px
}
.input-append input.search-query {
width:100%
}
Oh I also removed the span12, you dont need it. Reorganised the html to:
<div class="searchbar">
<div class="container">
<div class="row-fluid">
<div class="span9">
<form class="form-search">
<div class="input-append">
<input type="text" class="search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
</div>
<div class="span3 info">
.span3 column
</div>
</div>
</div>
</div>
I have 1 form and I would like to place it in 2 divs, so that the following:
<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</form>
</div>
<div position:relative">
<form id="testForm2">
</form>
</div>
would be turned into something like this:
<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</div>
<div position:relative">
</form>
</div>
See the fiddle. Any ideas?
Thanks!
What you want, is to put the form around both divs like so:
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
</div>
<div style="position:relative">
</div>
</form>
Here's an updated version of your jsFiddle.
Edit
Also, your second div's style is incorrect. It's fixed now in my example.
The markup in your jsFiddle file required some tidying up. This is what i would go with, trying to minimize your code somewhat:
<div class="post_edit_modeling">
<div class="tab_trash">
<div id="prof_picture">
<form id="testForm2">
<fieldset id="left">
<legend>Sex:</legend>
<div>
<label>
<input type="radio" name="sex" id="genderMale" value="male" />
Male
</label>
</div>
<div>
<label>
<input type="radio" name="sex" id="genderFemale" value="female" />
Female
</label>
</div>
<div>
<label>Weight</label>
<input id="weightpounds" type="text" name="weightpounds"/>
</div>
<div>
<label>Bust</label>
<input id="bust" type="text" name="bust"/>
</div>
</fieldset>
<fieldset id="right">
<div>
<label>Cup</label>
<input id="cup" type="text" name="cup"/>
</div>
<div>
<label>Waist</label>
<input id="waist" type="text" name="waist"/>
</div>
<div>
<label>Hips</label>
<input id="hips" type="text" name="hips"/>
</div>
<div>
<label>Hair Color</label>
<select name="haircolor">
<option value="1">White</option>
<option value="2">Black</option>
<option value="3">Yellow</option>
<option value="4">Blue</option>
</select>
</div>
<div>
<label>Dress Size</label>
<input id="dress" type="text" name="dress"/>
</div>
</fieldset>
<fieldset>
<div>
<input type="button" name="btnUpdate" id="btnUpdate" value="Update" />
</div>
</fieldset>
</form>
</div>
</div>
</div>
CSS:
form div {float: left; margin-bottom: 15px;}
fieldset { float: left; width: 200px; border: 0; padding: 0; margin: 0;}
#left { }
#right { margin-right: 0; }
label {float: left;}
input {clear: both;; float: left}
Ive updated your jsFiddle file. Here.
Can you not just make the two divs live inside the form? Like this:
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
Form Content Here
</div>
<div position:relative">
Form Content Here
</div>
</form>
If the form is affecting your page layout, make sure that you set the form style to display:inline;!
As Drackir and joe_coolish said, you don't need to nest your form tags that way.
Typically I always open the entire content block with the form tag, totally isolated from the other content. There's absolutely no harm in doing things this way. ANything including <h1> and entire layouts can be nested in a form, as long as you know that every input within it will belong to that form.
<form>
<!-- tons of content here including layout -->
</form>
Can't you just put the 2 DIV's inside the FORM tags? Something like:
<form>
<div id="one">
...
</div>
<div id="two">
</div>
</form>
edit: Seems I'm a little too late :)
Just move your <div> tags within the <form>...
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
... left side ...
</div>
<div position:relative">
... right side ...
</div>
</form>
what about
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
</div>
<div position:relative">
</div>
</form>