I'm trying to make a simple search form on my website and I'm using the input HTML element. But it is acting really weird.
It gets resized by the browser no matter which size I specify in the style. In the example below I've got an input element with the width of 180px, but the browser renders it as 147px. :/
Do you know what could be the problem?
Here's a video example and the code below: http://screencast.com/t/WwqAQDmofhf
<div id="search" style="background-color:#000; height:100px;">
<input style=" background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
border-radius: 5px 5px 5px 5px;
color: #666666;
float: left;
line-height: normal;
margin: 6px;
padding: 6px 27px 6px 6px;
width: 180px;
z-index: 40;"
type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div>
The meaning of 'width' depends on the page's box model. Traditionally width has included paddings and borders, but the standard model now excludes them.
If you do not have a correct doctype in your html, then most browsers would default to traditional box model, and you would be left with a box of 147px. Adding a doctype would fix it and force other layout to be standard-compliant.
<!DOCTYPE html>
<html><head><body>
<div id="search" style="background-color:#000; height:100px;">
<input style=" background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
border-radius: 5px 5px 5px 5px;
color: #666666;
float: left;
line-height: normal;
margin: 6px;
padding: 6px 27px 6px 6px;
width: 180px;
z-index: 40;"
type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div></body></html>
It's probably to do with:
padding: 6px 27px 6px 6px;
27px of right padding + 6px of left padding + 147px of reported width = 180px
Have you tried it with Javascript turned off in your browser?
Does it happen in this example?
Related
I am currently updating/working on this web page "https://www.emergencydentalservice.com/emergency-dentist-by-city" and their is an unwanted box shadow appearing in the body that I can not determine from where or why. On top of the unwanted shadow the site also seems to break after 768px and I can't figure out why. Any help would be greatly appreciated, thank you all. Image of the site breaking after 768px
You have a box shadow set to #inside-main on eds_main.css.
#inside-main {
width: 100%;
background: #fff;
margin: 0 auto;
box-shadow: 1px -2px 4px #666;
-webkit-box-shadow: 1px -2px 4px #666;
-moz-box-shadow: 1px -2px 4px #666;
-o-box-shadow: 1px -2px 4px #666;
}
becomes
#inside-main {
width: 100%;
background: #fff;
margin: 0 auto;
}
As for the layout breaking, you have #foot-de-eds, #foot-top-cites on eds_main.css set to:
#foot-de-eds, #foot-top-cites {
margin: 1.3em auto;
width: 100%;
max-width: 1028px;
padding-left: 2em;
}
Try removing the max-width: 1028px; - so:
#foot-de-eds, #foot-top-cites {
margin: 1.3em auto;
width: 100%;
padding-left: 2em;
}
For the shadow issue:
#inside-main still has a box-shadow property on it from eds_main.css.
Though you didn't really specify which shadows you do and don't want... as there are multiple on the page.
Inspect Element / Dev Tools is your friend. Makes it easy to hunt down properties you may be overlooking.
on <div class="phone-wrap">
remove
background: url(/eds_siteIMGS/phoneBG_seperated.png) repeat-x;
The image have shadow
I've been working on my site w/c uses built html editor that I can use and I am trying to copy the styles of the form on this page: https://imsc.clickfunnels.com/auto-webinar-registration10074792
Here is my current work in JSFIDDLE: https://jsfiddle.net/su5rr2nh/1/
However I am not sure why I can't get the exact styles including the height, width of the textboxes and select/dropdown element. As you can see the images doesn't go inside the textboxes and also my buttons doesnt look the same.
Heres my codes:
<div style="padding: 40px; background-color: rgba(243, 242, 242, 0.611765); border: 3px dashed rgba(0,0,0,0.7);">
<h1 style="font-size: 32px; text-align: center; font-weight: bold;">FREE BONUS!</h1>
<h4 style="font-size: 18px; color: rgba(47, 47, 47, 0.6); text-align: center;">Reserve your seat TODAY for this free training, and we will send you our <span style="font-weight: bold;">Amazon's Secret Business Cheatsheet</span> that will get you up and running in NO TIME!</h4>
<input id="name" style="border-radius: 5px !important; padding: 10px 90px; margin-top: 10px;" name="name" type="text" placeholder="Your Name.." />
<img src="http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/02/name2.png"/>
<input id="email" style="border-radius: 5px !important; padding: 10px 90px; margin: 10px;" name="email" type="email" placeholder="Your Email.."/>
<img src="http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/02/email2.png"/>
<select style="border-radius: 5px !important; padding: 10px 90px; margin: 10px;">
<option value="desired">Select Desired Date</option>
<option value="yesterday">Watch Yesterday's Broadcast Now</option>
<option value="feb8th">Wednesday, Feb 8th, 2017</option>
<option value="feb8th">Wednesday, Feb 8th, 2017</option>
</select>
<button style="padding: 13px 35px; margin-right: auto; margin-left: auto; color: #fff; font-weight: bold; display: inline-block; -ms-transform: all .2s ease-in-out; -webkit-transform: all .2s ease-in-out; transform: all .2s ease-in-out; text-align: center !important; text-decoration: none !important; background-color: #ea6645;">Register Your Spot Now! * seats are extremely limited *</button>
<p>* we will not spam, rent or sell your information *</p>
<p>Your Local Time: 4:18 PM</p>
</div>
I am tyring my best to copy every styles but its not going yet there. Any help to check what am I missing? Feel free to modify my jsfiddle if you want. I just want to copy the styles of it. I already use chromes inspector element but too many codes there.
Please help.
UPDATE AND EXPLANATION
//text-align: left; sets the text start at the left of the input.
//border: 1px solid rgba(0,0,0,0.2); sets a border with 1px solid design, in the color black, with an alpha value of 0.2
//box-shadow: 0 0 0 3px rgba(0,0,0,0.5); sets a shadow at the bottom of the input with 3px height and black color with an alpha value of 0.5
//background-color: #fff; sets the background of the input to white
//border-radius: 5px; rounds the corners of the input
//background-position: 96%; sets the background at 96% of the input. (allmost right)
//background-image: url(https://appassets1.clickfunnels.com/images/name2.png); sets the background to the image, that is found at the URL.
//background-repeat: no-repeat; sets the background to no repeat. Each background would repeat, until the end of the element. We only want the background once. so we dont to repeat it.
//appearance: none; some browsers let elements appear custom. we dont want it.
//padding: 12px 18px; to size up the input a bit. otherwise the text would hit top, left, bottom.
//font-size: 16px; sets the text size to 16px.
//width: calc(100% - 36px); calculates the with of the input. 100% for the whole area. -36px for the padding(18px) that we added to the right and left of the input.
<input type="text" placeholder="Enter Your Name..." name="name" data-type="extra" style="text-align: left; border: 1px solid rgba(0,0,0,0.2); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); background-color: #fff; border-radius: 5px; background-position: 96%; background-image: url(https://appassets1.clickfunnels.com/images/name2.png); background-repeat: no-repeat; appearance: none; padding: 12px 18px; font-size: 16px; width: calc(100% - 36px);">
I'm using Bootstrap for my JSP page.
I want to use <fieldset> and <legend> for my form. This is my code.
<fieldset class="scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
<label class="control-label input-label" for="startTime">Start :</label>
<div class="controls bootstrap-timepicker">
<input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
<i class="icon-time"></i>
</div>
</div>
</fieldset>
CSS is
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
}
I am getting output like this
I want output in the following way
I tried adding
border:none;
width:100px;
to legend.scheduler-border in CSS. And I'm getting the expected output. But the problem is I would like to add another <fieldset> for another fields. That time the width of text in legend is a problem as it is lengthier than than 100px.
So what shall I do to get output like I have mentioned? (Without striking the legend text)
That's because Bootstrap by default sets the width of the legend element to 100%. You can fix this by changing your legend.scheduler-border to also use:
legend.scheduler-border {
width:inherit; /* Or auto */
padding:0 10px; /* To give a bit of padding on the left and right */
border-bottom:none;
}
JSFiddle example.
You'll also need to ensure your custom stylesheet is being added after Bootstrap to prevent Bootstrap overriding your styling - although your styles here should have higher specificity.
You may also want to add margin-bottom:0; to it as well to reduce the gap between the legend and the divider.
In bootstrap 4 it is much easier to have a border on the fieldset that blends with the legend. You don't need custom css to achieve it, it can be done like this:
<fieldset class="border p-2">
<legend class="w-auto">Your Legend</legend>
</fieldset>
which looks like this:
In Bootstrap 5, modifications to the default style applied to the legend results in a different rendering than what is obtained with Bootstrap 4, you must then add float-none as class of the <legend> tag:
<fieldset class="border p-2">
<legend class="float-none w-auto">Your Legend</legend>
</fieldset>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset class="border p-2">
<legend class="float-none w-auto p-2">Your Legend</legend>
<input type="text">
</fieldset>
</form>
bootstrap html form fieldset legend
I had this problem and I solved with this way:
fieldset.scheduler-border {
border: solid 1px #DDD !important;
padding: 0 10px 10px 10px;
border-bottom: none;
}
legend.scheduler-border {
width: auto !important;
border: none;
font-size: 14px;
}
I had a different approach , used bootstrap panel to show it little more rich. Just to help someone and improve the answer.
.text-on-pannel {
background: #fff none repeat scroll 0 0;
height: auto;
margin-left: 20px;
padding: 3px 5px;
position: absolute;
margin-top: -47px;
border: 1px solid #337ab7;
border-radius: 8px;
}
.panel {
/* for text on pannel */
margin-top: 27px !important;
}
.panel-body {
padding-top: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
<p> Your Code </p>
</div>
</div>
<div>
This will give below look.
Note: We need to change the styles in order to use different header size.
Just wanted to summarize all the correct answers above in short. Because I had to spend lot of time to figure out which answer resolves the issue and what's going on behind the scenes.
There seems to be two problems of fieldset with bootstrap:
The bootstrap sets the width to the legend as 100%. That is why it overlays the top border of the fieldset.
There's a bottom border for the legend.
So, all we need to fix this is set the legend width to auto as follows:
legend.scheduler-border {
width: auto; // fixes the problem 1
border-bottom: none; // fixes the problem 2
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
color: black;
}
<div class="container">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Technical Ameen</legend>
<h2>Your Work Here</h2>
</fieldset>
</div>
if you will not find any proper solution for using legend tag in bootstrap 5
you can use the CSS property for an alternative solution in the legend tag this is an inline CSS example.
style="margin-top:-15px; background-color: white; color: black;"
also, add this line in the fieldset tag for margin-top
style="margin-top: 30px !important;"
I hope this is a very simple solution for getting legend style with bootstrap 5
<fieldset class="border p-2 form-group">
<legend class="control-label customer-legend pl-1">Your Legend</legend>
</fieldset>
use css:
.customer-legend:before {
left: 100px;
}
I created a search box:
<form>
<input type="search" class="search" placeholder="Search...">
</form>
The search button seems to have some kind of default inner shadow which I'd like to remove. This is how my CSS looks:
form
{
float: right;
}
.search
{
box-shadow: none;
padding: 6px 14px 6px 30px;
margin-top: 16px;
background: url(../images/search.png) no-repeat 8px 6px;
}
The "box-shadow: none;" doesn't work, I also tried the "box-shadow: 0 0 0 0;" but that doesn't work either. How can I remove the shadow? Thank you in advance.
Update: Don't do this. The outline is good for accessibility.
Try outline: 0. I think that you may also simply be referring to the default border. Try updating the border to whatever is desirable such as 1px solid black
http://jsfiddle.net/smZPy/
I'm using Bootstrap for my JSP page.
I want to use <fieldset> and <legend> for my form. This is my code.
<fieldset class="scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
<label class="control-label input-label" for="startTime">Start :</label>
<div class="controls bootstrap-timepicker">
<input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
<i class="icon-time"></i>
</div>
</div>
</fieldset>
CSS is
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
}
I am getting output like this
I want output in the following way
I tried adding
border:none;
width:100px;
to legend.scheduler-border in CSS. And I'm getting the expected output. But the problem is I would like to add another <fieldset> for another fields. That time the width of text in legend is a problem as it is lengthier than than 100px.
So what shall I do to get output like I have mentioned? (Without striking the legend text)
That's because Bootstrap by default sets the width of the legend element to 100%. You can fix this by changing your legend.scheduler-border to also use:
legend.scheduler-border {
width:inherit; /* Or auto */
padding:0 10px; /* To give a bit of padding on the left and right */
border-bottom:none;
}
JSFiddle example.
You'll also need to ensure your custom stylesheet is being added after Bootstrap to prevent Bootstrap overriding your styling - although your styles here should have higher specificity.
You may also want to add margin-bottom:0; to it as well to reduce the gap between the legend and the divider.
In bootstrap 4 it is much easier to have a border on the fieldset that blends with the legend. You don't need custom css to achieve it, it can be done like this:
<fieldset class="border p-2">
<legend class="w-auto">Your Legend</legend>
</fieldset>
which looks like this:
In Bootstrap 5, modifications to the default style applied to the legend results in a different rendering than what is obtained with Bootstrap 4, you must then add float-none as class of the <legend> tag:
<fieldset class="border p-2">
<legend class="float-none w-auto">Your Legend</legend>
</fieldset>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset class="border p-2">
<legend class="float-none w-auto p-2">Your Legend</legend>
<input type="text">
</fieldset>
</form>
bootstrap html form fieldset legend
I had this problem and I solved with this way:
fieldset.scheduler-border {
border: solid 1px #DDD !important;
padding: 0 10px 10px 10px;
border-bottom: none;
}
legend.scheduler-border {
width: auto !important;
border: none;
font-size: 14px;
}
I had a different approach , used bootstrap panel to show it little more rich. Just to help someone and improve the answer.
.text-on-pannel {
background: #fff none repeat scroll 0 0;
height: auto;
margin-left: 20px;
padding: 3px 5px;
position: absolute;
margin-top: -47px;
border: 1px solid #337ab7;
border-radius: 8px;
}
.panel {
/* for text on pannel */
margin-top: 27px !important;
}
.panel-body {
padding-top: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
<p> Your Code </p>
</div>
</div>
<div>
This will give below look.
Note: We need to change the styles in order to use different header size.
Just wanted to summarize all the correct answers above in short. Because I had to spend lot of time to figure out which answer resolves the issue and what's going on behind the scenes.
There seems to be two problems of fieldset with bootstrap:
The bootstrap sets the width to the legend as 100%. That is why it overlays the top border of the fieldset.
There's a bottom border for the legend.
So, all we need to fix this is set the legend width to auto as follows:
legend.scheduler-border {
width: auto; // fixes the problem 1
border-bottom: none; // fixes the problem 2
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
color: black;
}
<div class="container">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Technical Ameen</legend>
<h2>Your Work Here</h2>
</fieldset>
</div>
if you will not find any proper solution for using legend tag in bootstrap 5
you can use the CSS property for an alternative solution in the legend tag this is an inline CSS example.
style="margin-top:-15px; background-color: white; color: black;"
also, add this line in the fieldset tag for margin-top
style="margin-top: 30px !important;"
I hope this is a very simple solution for getting legend style with bootstrap 5
<fieldset class="border p-2 form-group">
<legend class="control-label customer-legend pl-1">Your Legend</legend>
</fieldset>
use css:
.customer-legend:before {
left: 100px;
}