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!
Related
I would like the font size for my form label and input fields to scale down from 18px to 10px when the browser width reaches 1460px or less.
I read that it is not possible to get fonts to automatically 'scale down' as such when the browser width decreases, and that I would need to use media queries instead.
Therefore I have put a media query at the top of my style tags asking the font size for my label and input to display at 10px when the screen size is 1460px, but it doesn't seem to work. The rest of my code is working fine however, so it must be something to do with the way I am coding my media query.
If someone could offer some help that would be much appreciated.. my code is pasted below.
#media only screen and (max-width: 1460px) {
label input {
font-size: 10px;
}
}
* {
box-sizing: border-box;
}
input[type=text],
select {
width: 95%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
resize: vertical;
transition: 0.3s;
outline: none;
font-family: Typ1451-Medium;
font-size: 18px;
margin: 7px;
}
input[type=text]:focus {
border: 1.25px solid #ea0088;
}
label {
padding: 21px 12px 12px 12px;
margin-left: 5px;
display: inline-block;
font-family: Typ1451-Medium;
font-size: 18px;
color: #999;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin: 2.5% 20% 0 20%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.left,
.right {
width: 50%;
}
form {
display: flex;
}
<div class="container">
<form action="signin.php" method="post">
<div class="left">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="* Please complete">
</div>
</div>
</div>
<div class="right">
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="* Please complete">
</div>
</div>
</div>
</form>
</div>
Your selector — label input — doesn't match any elements in your HTML.
None of your input elements are descendants of your label elements.
Perhaps you meant label, input to select label elements and input elements. If so, then it still wouldn't work because you define the input font-size with a more specific selector later on (and the most specific selector wins the cascade) and the label in a similar way (it doesn't have a more specific selector, but when selectors are equal, the last one wins the cascade).
Actually, you CAN scale fonts up or down with the viewport size. There is a method with calc() and vw units:
Basically you do something like font-size: 3vw and then set max and min font sizes.
Here is a link to the calculation on Smashing Magazine. The rest of the article is pretty interesting, too.
You can extend this even further and optimize the font size with media queries.
Have fun! :)
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
I have a search box like below and i am using bootstrap to give a flexible layout. How can use a design like below and make sure i can get a stretchable search box.
You'd need a container to put your input box in, and put a front and end div to it. Depending on browser compatibility you might want to add a few more div's to make sure your input box is shown properly in browsers like IEX7/8 though.
So you'd have the following:
<form class="searchbox">
<input type="text" class="text" />
<input type="submit" class="submit" />
</form>
Accompanied by the following example CSS
form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; }
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; }
form.searchbox input.submit { background:url(rightside_image.gif); }
Add your Html part like this
<div class="searchbox">
<input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value="">
</div>
css part, download a search box image and replace it with the name
.searchbox input.lightsearch {
background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent;
border: 0 none;
color: #575757;
font-size: 11px;
height: 19px;
margin-top: 24px;
padding: 2px 5px 2px 24px;
width: 170px;
}
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
This is ordinarily a simple task. I have a simple sign in form that has an email input,password input, and a submit button, all in a horizontal line. After hours and hours of taking styles off, and trying different structures, the button sits a little lower then the boxes. I am thinking it might be because I have absolutely positioned elements involved or that its' sitting in a div that has a background image.
Thanks in advance.
Here is the screen shot:
Here is the html structure:
<div id="new_home_join">
<div id="sign_up_home">
<div id="sign_in_table">
<form name="sendEmail" action="Home.php" method="post">
<table>
<tr>
<td class="sign_in_input">
<input type="text" name="email" class="text" value="Email<?php if($formError == "true") { echo stripslashes($_POST['name']); } ?>" onclick="clearify(this);" />
</td>
<td class="sign_in_input">
<input type="password" name="password" class="text" value="Password<?php if($formError == "true") { echo stripslashes($_POST['']); } ?>" onfocus="clearify(this);" />
</td>
<td class="sign_submit">
<input type="hidden" name="return" value="<?php echo $_GET['return']; ?>" />
<input type="submit" name="subSignIn" value="Login" />
</td>
</tr>
</table>
</form>
<div class="forget_pw">
<a href="password_forget.php">
Forgot Password?
</a>
</div>
</div>
<div id="not_member">
<a href="http://www.cysticlife.org/signUp.php">
<span style="color:#808080;font-size:18px;">Not a CysticLife member?</span><br /> Join our community today!
</a>
</div>
<div id="browse">
or just browse the
blogs and questions
</div>
</div>
<div id="fuss">
What is the CysticLife community?
</div>
</div>
and here is the relevant css:
#new_home_join {background:url(images/join_today.png) no-repeat;width:333px; height:200px;margin:0px 0px 0px 0px;}
#sign_up_home {width:343px;}
#sign_in_table {width:338px;margin:0px auto 0px auto;position:relative;}
#sign_in_table {width:338px;margin:0px auto 0px auto;position:relative;}
#sign_in_table table tr td.sign_in_input {padding:40px 0px 5px 10px;}
#sign_in_table table tr td.sign_in_input input {width:105px; border:1px #999999 solid;padding:2px;font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#666666;}
#sign_in_table table tr td.sign_submit input{width:72px; height:34px; background:url(images/search_button.png) no-repeat; font-style:Arial,Helvetica, sans-serif; color:#333333; font-size:11px;padding:5px 0px 10px 0px; border:0;}
.forget_pw {margin:5px 0px 0px 0px;position:absolute; top:62px; right:82px;}
.forget_pw a {padding:10px;font-family:Arial,Helvetica, sans-serif; font-size:10px; color:#626262; text-decoration:none;}
.forget_pw a:hover {color:#F37336;}
#sign_in_table table tr td.sign_submit input{width:72px; height:34px; background:url(images/search_button.png) no-repeat; font-style:Arial,Helvetica, sans-serif; color:#333333; font-size:11px;padding:5px 0px 10px 0px; border:0;}
#join_us {margin:0px auto 40px 60px; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#F37336; font-weight:bold; text-align:left;padding:0px 50px 80px 0px;float:right}
#join_us a {font-family:Arial,Helvetica, sans-serif; font-size:14px; color:#999999;text-decoration:none;}
#join_us a:hover {color:#F37336;}
#fuss {margin:25px auto 0px auto; font-family:Arial,Helvetica, sans-serif; text-align:center; color:#666666; font-size:12px;}
#fuss a {font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#666666; text-decoration:none;}
#fuss a:hover {color:#FF4701;}
A few things I noticed:
#sign_in_table table tr td.sign_in_input { ... }
#sign_in_table table tr td.sign_in_input input { ... }
#sign_in_table table tr td.sign_submit input{ ... }
1. You can simplify this. These selectors are overcomplicated and slow down both the rendering of the page and reading the code (see Writing Efficient CSS):
.sign_in_input { ... }
.sign_in_input input { ... }
.sign_submit input { ... }
The above will do the same as your code. Moreover, it doesn't depend on the HTML structure.
2. When looking at the properties, I notice that all the table cells have a different padding:
.sign_in_input {padding:40px 0px 5px 10px;}
.sign_submit { /* No rules, just a default padding */ }
You should make sure the vertical padding is the same:
.sign_submit { padding-top: 0px; padding-bottom: 0px; }
3. The submit button has a defined height but the inputs do not. If the height is higher than the height of the inputs, it is necessary to vertically align it to middle:
.sign_submit { line-height: 34px; /* = Height of the input */ vertical-align: middle; }
.sign_in_input input { height: 30px; /* Better specify the height of the input fields as well*/ /* ... */ }
4. Make sure that the submit button image does not have a white/transparent stripe on the top.
5. Make sure you set all vertical input margins to 0:
.sign_submit input { margin-top: 0px; margin-bottom: 0px; }
6. Try to move the hidden input field after the submit button. Should not change anything but who knows :)
7. If none of the above helps, you might also use a negative margin hack (but it's not really a nice solution):
.sign_submit input { margin-top: -5px; }
8. You happen to have the rule for .sign_submit input duplicated. Remove one of them to avoid hard to track errors.
9. When looking at your PHP code, I notice you directly embed the $_GET contents to the page. This is considered dangerous and you should always sanitize this using htmlentities to avoid XSS.
EDIT:
After looking at the site, simply changing the vertical-align of .sign_submit to bottom fixes the problem in my Opera browser:
.sign_submit { vertical-align: bottom; /* Instead of middle */ }
Add vertical-align: bottom to td.sign_submit. It's currently set to baseline in global.css.
After that, you may need to add a few pixels of top padding to get the positioning exactly correct, though.
Edit:
Looks like you'll need a new rule for that:
#sign_in_table table tr td.sign_submit { vertical-align: bottom; }