please visit link
here you can see as in below image :
I want to hide the empty spaces present between "Text1", "Textfield" & "check" button.
also empty spaces present between 2 horizontal lines.
I want to display "check" button right next to Text field".
i tried using "position : relative ; right: 200px; "
but it affected on other parts of the page.
.block-check-delivery .block-title strong {background-image:none; font-size: 11px;}
.block-check-delivery .block-content {padding:0 10px; }
.block-check-delivery .button {float: right;}
.block-check-delivery input{width: 107px;}
i want to display like this :
enter image description here
The button has a CSS rule:
.block-check-delivery .button {
float: right;
}
That's the one causing the trouble. Remove the float: right rule and it will be alright.
The space is generated by a <br> element you can hide using CSS with the following rule:
.block-check-delivery .block-content > br:first-child {
display: none;
}
Then
.block-check-delivery .block-title {
float: left;
margin-right: 10px;
border: 0;
}
Also the button should have
.block-check-delivery .button {
float: left;
}
And I would suggest you to try out also this rule to fix the design:
.block-check-delivery .block-content > br:last-child {
display: none;
}
Generally speaking using <br> elements to create space between elements is a bad design pattern. I would like you to rely on padding and margin rules and remove those <br> elements from your HTML markup.
You need to remove Div class="block-title" and place strong tag in the Div class="block-content".
also remove br tag
With these two styles the result appears to be correct ... then you can play with the margins on the "block-title" or on the "check" button.
.block-title {
position: relative;
padding: 10px 0 0;
margin-bottom: 5px;
// border-top: 1px solid #cccccc; // remove this...
border: none !important; // Add this
display: inline-block; // <----- ADD THIS
}
.block-content {
margin-top: 5px;
display: inline-block; // <----- ADD THIS
}
This is the image result...
<div class="block-title" style="
display: inline-block;
">
<strong><span>Check Availability at</span></strong>
</div>
<div class="block-content" style="
display: inline-block;
vertical-align: middle;
">
<br>
<input name="zipcode" size="17" type="text" id="zipcode" value="" maxlength="10" class="input-text" placeholder="Enter ZIP Code">
<button type="button" name="zip-check" title="Check" class="button" id="zip-check"><span>Check</span></button>
<div id="delivery-message"></div>
<div id="delivery-html"></div>
<br>
</div>
Does your requirement
Related
I want to align two inputs in the same line.
I used the solutions available here:
http://jsfiddle.net/XAkXg/
http://www.java2s.com/Code/HTMLCSS/Form/inputclassidselectorandpropertyselector.htm
Aligning html inputs on same line
html form - make inputs appear on the same line
Everything would work, but in my case, the input[type=text] has been defined earlier
The CSS code looks pretty much as this:
input {
margin-left: 50px;
}
input[type=text] {
width: 75%;
min-width: 450px;
padding: 12px 20px;
box-sizing: border-box;
outline: none;
border: 1px solid #f7fbff;
background-color: #f7fbff;
}
input[type=text]:focus {
background-color: #c6e2f2;
}
input[type=number]:focus {
background-color: #c6e2f2;
}
and now I have implemented the location feature into my HTML code:
<figure class="fig" id="location">
<label>
<div class="order">1</div>
<p>Location<span class="asterisk">*</span></p>
</label>
<button class="locbtn" id="btn-geolocation">Find my location</button>
<br>
<label for="lat" class="location">Latitude</label>
<input type="text" name="latitude" class="location">
<label for="lon" class="location">Longitude</label>
<input type="text" name="longitude" class="location">
<div style="clear:both;"></div>
</figure>
and accordingly CSS:
.location {
width: 50x;
float: left;
vertical-align: top;
margin: auto;
}
.location input[type=text]{
width: 25px;
display: inline-block;
}
and the effect is, as you can see below:
the input texts don't work, since they have been defined earlier in the code (for entire form).
How can I make the input[type=text] definition also for this section considered?
Moreover, instead of display: inline-block; I tried: display: inline; and float: left; It didn't work either.
I have html something like this http://jsfiddle.net/nLt9unxa/5/ and I want to place 3 block .number__label, .text__label, and .from__input in one line. .form__input must be align to the right side of form and all 3 elements must be vertical align in one line. How to do this? And I don't want use display: table-cell
And also if you know very good tutorial or book about alignment, where described all possible alignment and receipts how to do it, like cheatsheet, please share link.
you forgot to put : after max-width and min-width in .number__label
DEMO
.number__label {
display: inline-block;
background-color: #ffffff;
border: solid 1px;
max-width:20%;
min-width:20%;
}
Use vertical-align: middle (or top, or bottom). Here is the fiddle: http://jsfiddle.net/1ddewjxd/
.class
{
vertical-align: middle;
}
to align elements to right set the parent element to text-align: right, and the child elements to text-align: left. You could also float: right, but that can complicate things.
.item__label {
text-align: right;
}
.number__label, text__label, form__input {
text-align: left;
}
Run this code snippet to check whether all your requirements are done or not? also check fiddle
Check CSS Layout or learn from W3School
form {
width:70%;
background-color: #dddddd;
font-size: 20px;
}
.itme__label {
display: block;
}
.form__item {
display: block;
padding: 3px 5px;
}
.number__label {
display: inline-block;
background-color: #ffffff;
border: solid 1px;
max-width 20%;
min-width 20%;
}
.text__label {
display: inline-block;
background-color: #888888;
max-width: 50%;
}
.form__input {
display: block;
min-width: 20%;
max-width: 20%;
font-size: 1em;
margin-left:120px;
}
<form>
<div class="form__item">
<p>
<label class="item__label">
<span class="number__label">
01 12 31 23 123 2452 34534 5345
</span>
<span class="text__label">
text label long long long very long long for two or more lines ong very long long for two or more linesong very long long for two or more lines
</span>
<input type="text" class="form__input" value="input text">
</input>
</label>
</p>
<div class="errors">
<p class="error">
some error
</p>
</div>
</div>
</form>
I have created 4 column grid in my html form. i want to have last label and textbox field to be align right side of the page.
I have tried using float:right property but it doesn't seem to work
In fiddle example it is not in single line.
.row {
margin: 10px;
}
.elements {
padding: 10px;
margin-left: 50px;
margin-top: 10px;
border-bottom: ridge;
border-bottom-color: #1f6a9a;
padding-left: 0;
}
.field {
font-size: 15px;
color: #b6d6ed;
}
label {
display: inline-block;
}
input {
background-color: transparent;
border: 0px solid;
height: 25px;
width: 60px;
color: #b6d6ed;
text-align: center;
}
/* I Tried Below Line to Right Align */
.row > .elements:nth-child(2) {
float:right;
}
<div class="row">
<span class="elements">
<label class="field" for="Title">Title</label>
<input id="Title" name="Title" type="text">
</span>
<span class="elements">
<label class="field" for="DateOfBirth">Date of Birth</label>
<input id="DateOfBirth" name="DateOfBirth" type="text" value="" class="hasDatepicker">
</span>
</div>
jsfiddle
Float the first span to the left:
.row > .elements:first-child {
float: left;
}
See it here: http://jsfiddle.net/3DtqB/2/
You have to put the elements class into a <div class=".."></div> and add an CSS command
.elements {
float: right;
margin-top: -[x]px
}
Also you should use two id's instead of a class elements like left_box and right_box and add the commands to the right box.
Simple fix, just add white-space:nowrap; to the .elements class.
I want to set the width of the fieldset of this field and then have the wrapper and input box be fluid to take up the available space.
This is how far I have got with a bit of help on here:
.lft { float: left; }
ul, li { list-style-type: none; vertical-align:middle; }
.ts3 { font-size: 15px; }
.dc3 { background-color: #808080; }
.tc5 { color: #333333; }
.p4 { padding: 4px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}
.fieldwrapper{display:inline-block; width:100%}
label{width:300px; display:inline-block; }
<ul>
<li>
<div class="r6 dc3 ts2 p4">
<label field_id="None" for="sender">Sender email address</label>
<div class="fieldwrapper">
<input class="field" placeholder="Email" type="text" value="">
</div>
</div>
</li></ul>
When I set the wrapper to 100% it stretches the whole way across, rather than the whole way across minus the width of the fieldset.
This is what I am trying to achieve for a fluid width site:
Input box fill up available space?
Add
input.field{width:100%}
.fieldwrapper{display:inline-block; width:70%}
label{width:25%; display:inline-block; }
You can adjust the width of label and input accordingly.
Demo http://jsfiddle.net/cskQ8/38/
New update
input.field{width:100%}
.fieldwrapper{ padding: 0 5px 0 0;
overflow: hidden;}
label{width:200px; display:inline-block; float:left}
Check the updated demo here
Yup, of course it does you've floated the button right taking it out of the document flow. You'll have to set right padding on the container for the input (not the fieldwrapper) to make up for the elements to the right of it.
.containingDiv{padding-right:75px;}
.fieldwrapper{width:100%;}
If you structure your CSS and markup in a more semantic manner now, future you will be very grateful. Definition lists are an appropriate place to start:
<dl class="form-container clearfix">
<dt><label for="sender">Sender email address</label></dt>
<dd><input placeholder="Email" type="text" value="" /></dd>
</dl>
And CSS (remember to include a clearfix):
.form-container { /*just whatever styles you had applied*/}
/*label container, fixed width*/
.form-container>dt {float:left; width:150px;}
/*input container, defaults to width:auto*/
.form-container>dd { margin-left:150px; }
/*box-sizing property is the best thing since sliced bread*/
.form-container input[type=text] {width:100%;box-sizing:border-box;padding:4px;}
Fiddled, try resizing the result frame and see how fluid it is!
Please answer the following questions:
How to merge search box and search button as shown in below example1 and example2? The box and button are joined together.
How to put 'magnifier' icon on the left side of the search box?
How to put a default text into the box like 'Search for items' and fade it when user clicks on the box.
Example1
Example2
Example3 (I don't want a separate button as shown below)
Please help! Thanks!!
Easiest way is to make the entire text field wrapper, from the icon on the left to the button on the right, one div, one image.
Then put a textfield inside that wrapper with a margin-left of like 30px;
Then put a div inside the wrapper positioned to the right and add a click listener to it.
HTML:
<div id="search_wrapper">
<input type="text" id="search_field" name="search" value="Search items..." />
<div id="search_button"></div>
</div>
CSS:
#search_wrapper{
background-image:url('/path/to/your/sprite.gif');
width:400px;
height:40px;
position:relative;
}
#search_field {
margin-left:40px;
background-transparent;
height:40px;
width:250px;
}
#search_button {
position:absolute;
top:0;
right:0;
width:80px;
height:40px;
}
JQuery:
$(function(){
// Click to submit search form
$('#search_button').click(function(){
//submit form here
});
// Fade out default text
$('#search_field').focus(function(){
if($(this).val() == 'Search items...')
{
$(this).animate({
opacity:0
},200,function(){
$(this).val('').css('opacity',1);
});
}
});
});
For your first question, there are many ways to accomplish the joining of the button to the search box.
The easiest is to simply float both elements to the left:
HTML:
<div class="wrapper">
<input placeholder="Search items..."/>
<button>Search</button>
</div>
CSS:
input,
button {
float: left;
}
Fiddle
This method has some limitations, however, such as if you want the search box to have a percentage-based width.
In those cases, we can overlay the button onto the search box using absolute positioning.
.wrapper {
position: relative;
width: 75%;
}
input {
float: left;
box-sizing: border-box;
padding-right: 80px;
width: 100%;
}
button {
position: absolute;
top: 0;
right: 0;
width: 80px;
}
Fiddle
The limitation here is that the button has to be a specific width.
Probably the best solution is to use the new flexbox model. But you may have some browser support issues.
.wrapper {
display: flex;
width: 75%;
}
input {
flex-grow: 2;
}
Fiddle
For your second question (adding the magnifier icon), I would just add it as a background image on the search box.
input {
padding-left: 30px;
background: url(magnifier.png) 5px 50% no-repeat;
}
You could also play around with icon fonts and ::before pseudo-content, but you'll likely have to deal with browser inconsistencies.
For your third question (adding placeholder text), just use the placeholder attribute. If you need to support older browsers, you'll need to use a JavaScript polyfill for it.
It's all in the CSS... You want something like this:
http://www.red-team-design.com/how-to-create-a-cool-and-usable-css3-search-box
Also, for the search icon:
http://zenverse.net/create-a-fancy-search-box-using-css/
Src: Quick Google.
You don't merge them, rather you give the illusion that you have. This is just CSS. Kill the search box borders, throw it all into a span with a white background and then put the fancy little dot barrier between the two things. Then toss in some border radius and you are in business.
The above tut might look too lengthy. The basic idea is this:
Arrange the input box just like you do. The input text box should be followed by the button. add the following css to do that.
position:relative;
top:-{height of your text box}px;
or you can use absolute positioning.
<div id="search_wrapper">
<input type="text" id="search_field" name="search" placeholder="Search items..." />
<div id="search_button">search</div>
</div>
#search_wrapper{
background-color:white;
position:relative;
border: 1px solid black;
width:400px;
}
#search_field {
background-transparent;
border-style: none;
width: 350px;
}
#search_button {
position:absolute;
display: inline;
border: 1px solid black;
text-align: center;
top:0;
right:0;
width:50px;
}
http://jsfiddle.net/zxcrmyyt/
This is pretty much easy if You use bootstrap with custom css
My output is diffrent but the logic works as it is..
I have used Bootstrap 5 here you can also achieve this by using Pure CSS,
<div class="container my-5">
<div class="row justify-content-center">
<div class="col-10 p-0 inputField text-center">
<input type="text" id="cityName"placeholder="Enter your City name..">
<input type="submit" value="search" id="submitBtn">
</div>
</div>
</div>
For Styling
#import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
* {
font-family: 'Ubuntu', sans-serif;
}
.inputField {
position: relative;
width: 80%;
}
#cityName {
width: 100%;
background: #212529;
padding: 15px 20px;
color: white;
border-radius: 25px;
outline: none;
border: none;
}
#submitBtn {
position: absolute;
right: 6px;
top: 5px;
padding: 10px 20px;
background: rgb(0, 162, 255);
color: white;
border-radius: 40px;
border: none;
}
Hear is an Example !
https://i.stack.imgur.com/ieBEF.jpg