I'm trying to use a <fieldset> to group some controls. No matter what I do I can't get the border to display. My understanding is it should display by default. In the <style> I've tried setting border-width:1px which does nothing and border:solid draws a border outside of everything including the <legend>. I've tested in both Firefox and Chrome and no difference. What am I missing? Here is an example of my code. I'm playing with different layouts so ignore the inconsistency.
<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
<fieldset>
<legend>Project Basics</legend>
<ul>
<li>
<label for="txtName">Name</label>
<input type="text" id="txtName" />
</li>
<li>
<label for="txtDescription">Description</label>
<textarea rows=3 cols=20 id="txtDescription"></textarea>
</li>
</ul>
</fieldset>
</div>
<div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
<fieldset>
<legend>Cost Estimations</legend>
<label for="txtEstTotalHrs">Estimated Total Hours</label>
<input type="text" id="txtEstTotalHrs" />
<label for="txtEstLaborCost">Estimated Labor Costs</label>
<input type="text" id="txtEstLaborCosts" />
</fieldset>
</div>
And this is what I'm seeing, no borders.
Update to comments:
Mushroomator, yes I am using bootstrap. Are you saying to add the whole bootstrap css to the snippet? And I am the designer of the project.
Mike K., Agreed, I am not seeing whats in the plain snippet so something is being overwritten. I wasn't very clear but I did look at the what styles are being applied and at the Fieldset level, if I change the Border setting to 1px it draws an outside box around the fieldset. I added an image from the dev tools.
*JonoJames, I tried adding styling to the tag like this <fieldset style="border-color:black !important; border-style:solid !important"> and I still see nothing. When I look at the dev tools, it shows those attributes set at the Element level but nothing changes on the front end.
This should be a simple problem.
Testing Update: I found the references to the bootstrap css in the _Layout.cshtml file so I started commenting them out , one at a time. The offender seems to be <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> The only reference to fieldset, other than fieldset:disabled, is in this line.
fieldset{min-width:0;padding:10rem;margin:10rem;border:10rem}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}#media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}
I've tried setting all properties to something other than zero but no effect. settings like "10px" or "25rem". Anytime I do get a border, its always an "outside" border like this:
You could add a custom border with CSS
.fieldsetColored{
border-color: #F00;
border-style: solid;
}
<fieldset class="fieldsetColored">
<legend>box</legend>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<label for="txtEstTotalHrs">Estimated Total Hours</label></br>
<input type="text" id="txtEstTotalHrs" /></br>
<label for="txtEstLaborCost">Estimated Labor Costs</label></br>
<input type="text" id="txtEstLaborCosts" /></br>
</tr>
</table>
</fieldset>
You probably have a conflicting style sheet somewhere that turns the border off If its bootstrap use the !important CSS override style attribute
!important
looking at the class list <div class=" col-4 col-sm-4 col-med-4 col-lg-4 col-xl-4 e-primary" style="justify-content:space-around">
This looks like bootstrap
Finally figured it out. According to this discussion Fieldset legend does not work everything is turned off for fieldset borders in Bootstrap 5. To get the original alignment of the Legend (inline with the border) you have to set the Legend float:none; and width:auto;
My final CSS looks like this:
fieldset {
margin-bottom: 1em !important;
border: 1px solid #666 !important;
padding:1px !important;
}
legend {
padding: 1px 10px !important;
float:none;
width:auto;
}
Thanks for all your input. Reading through your replies a couple times helped me with my troubleshooting.
This should work!
<fieldset class="border rounded-3 p-3">
<legend class="float-none w-auto px-3">
Your Title
</legend>
<p>Your content</p>
</fieldset>
Related
This is the part of the HTML file of my Angular project, where I am using a checkbox with an input groups addon
<td
style="width: auto; word-wrap: normal"
class="text-wrap"
>
<fieldset>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div
class="input-group-text"
style="height: 30px"
>
<input
type="checkbox"
id="checkbox-addon1"
class="form-check-input"
/>
</div>
</div>
<input
type="text"
class="form-control"
placeholder="Compare data"
style="height: 30px; width: 80px"
/>
</div>
</fieldset>
</td>
When seeing this on desktop, it is showing in a correct way -
But when the same thing I am seeing in mobile view, I see like this
In mobile view, checkbox and text are not coming in the same line. Can anyone please help me to resolve this issue?
Edit 1:
I have defined the heading of this table column as
<th style="width: 9em" scope="col">Compare data</th>
Edit 2:
Based on what #HAPPY SINGH answered,
I tried using the below part of code, in my scss file
.input-group {
white-space: nowrap;
.form-control {
width: 50px !important;
padding-left: 0%;
padding-right: 0%;
}
}
But as soon as I change from width: 40px, the mobile view breaks again
Yes,
Use this few style CSS and remove inline CSS added in external CSS.
Mobile view media query:
#media only screen and (max-width: 767px) {
.input-group {
white-space: nowrap;
}
.form-control {
width: 40px;
}
}
Use this:
<div class="input-group mb-3" style="white-space: nowrap">
or
<div class="input-group mb-3" style="display:flex">
to disallow wrapping.
On the other hand, it is likely that .input-group already does this. Your elements are contained in a table column, and table will always display all of its columns, even when there is not enough screen space available, which is likely why the layout breaks. Rather than using tables for layout, prefer a flexbox approach instead.
Try this:
<div class="input-group mb-3" style="display: flex;">
Within a div with a non-white background, when I add an input element it gives me this ugly border.
<div class="input-group">
<input type="search" style="height:30px;">
</div>
What can I do to get rid of it?
That is unusual... what browser are you using to view this? Do you have a source page you can show us? I'm wondering whether it's a browser-defined default, or you have some other CSS causing this.
Regardless, there is a simple answer to this: Set your own border.
Like so:
<div class="input-group">
<input type="search" style="height:30px; border: 1px inset grey;">
</div>
You can also use this instead if you want iPhones to render the exact same border too (Apple devices like to style things their own way and this will override that):
<div class="input-group">
<input type="search" style="height:30px; border: 1px inset grey; -webkit-appearance: none;">
</div>
I would still recommend posting a link to a real example (perhaps on jsfiddle.net), just so we can verify what's causing the border issue. There are several possible reasons, though the above code should solve the most common ones.
I've got a form, which has a legend and a set of fields. I'm using Bootstrap 2.x to style it. For some reason, space appears above the form, but in Chrome only (it renders fine in IE10 and Firefox). I've pared it back to just the basics to demonstrate the issue I'm having:
<form>
<fieldset>
<legend>Legend</legend>
<div class="control-group">
<!-- This div results in the space appearing above the form -->
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" />
</div>
</div>
</fieldset>
</form>
If I remove the class="control-group" from the div wrapping the input field, the space magically disappears, despite seemingly having nothing to do with this issue. I've checked all the margins and padding of everything in Chrome, and there's nothing, so I don't know where this spacing is coming from. I need to use this class on these field divs, as I'm implementing a horizontal form. I'm pulling my hair out trying to work out how to fix this issue - any ideas? Here's a jsfiddle to demonstrate: http://jsfiddle.net/christhecoder/kDrVH/3/
Any help would be much appreciated!
http://jsfiddle.net/kDrVH/10/
#import url("http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css");
legend+.control-group{
margin-top:0px;
}
you get 20 margin from this: legend+.control-group
This is because bootstrap CSS rules for <legend> has margin-bottom:20px
Just add a CSS rule:
legend {
margin-bottom: 0px;
}
Also you can add this only to your legend label:
<legend style="margin-bottom: 0px;">
// Whatever you want
</legend>
JSFIDDLE DEMO
Instead of
legend+.control-group {
margin-top: 20px;
}
Use this.
It will preserve your current layout and remove space above the form.
legend+.control-group {
padding-top: 20px;
}
The Problem
I've got a problem where I'm trying to create rows of form inputs. This works OK, however, once the width of the total inputs gets too large, everything starts to wrap. What I would like is for a horizontal scroll-bar to appear inside the field-set and for all form elements for a single service-item div to remain on a single line.
<div style="display: inline-block;" class="horizontal-fields service-item">
<button class="horizontal-fields remove-service-item" style="float: left; margin-right: 5px;">-</button>
<label for="service_name">Name:</label>
<input name="service_name[]" id="service_name" value="" type="text">
<label for="service_description">Description:</label>
<input id="service_description" name="service_description[]" value="" type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label for="service_dsl_fnn[]">FNN:</label>
<input id="service_dsl_fnn" name="service_dsl_fnn[]" size="10" value="" type="text">
<button class="horizontal-fields new-service-item" style="display: inline-block;">+</button>
</div>
<br>
</div>
Current Results
Here is a JSFiddle showing the form in it's current state, I've included all the bare-bones CSS/HTML that I think are relevant: http://jsfiddle.net/FjxqG/3/
You will see that I've managed to get what I want by specifying width: 300% in the horizontal-fields class. However, this is of course not optimal because the width is essentially fixed and not automatically fitting the width of the service-item div.
Of course, this leaves the width much larger than it needs to be, but also always showing a horizontal-scroll, even when it isn't needed.
What I've tried
I've tried using display: inline-block; and whitespace: no-wrap;. However, the former did not seem to do much for me, and the latter only worked for the first few form items, not those inside the service-additional-fields div.
Unfortunately, I've got those latter items in the service-additional-fields div as they are dynamically inserted using jQuery, so although it's possible to take them out, I'd rather leave them in there, as it keeps the JavaScript simpler.
I've tried adapting the solution found here, with little success: http://www.css-lab.com/demos/image-display/side-scroll-gallery.html
Ended up with a similar situation in which the latter form elements were still wrapping.
I've also considered doing something like the jQuery solution found here: Horizontal scroll in DIV with many small DIV's inside (no text)
I guess this would work for me, because I already know that setting the width on horizontal-fields works OK, so using jQuery to find out what that width should be would probably work. However, it feels like I shouldn't need jQuery and it would be kind of a hack. So I'd like to avoid it if reasonably possible.
Thanks!
For some reason the other answer has been deleted and I can't get it back so having to answer again.
Previous answer was -
How about removing the floats and having inline-blocks with auto widths, And then for the .service-additional-fields as inline-block too?
Edited for a fuller answer.
HTML
<fieldset>
<legend>Fourth: Add Services</legend>
<div id="slide-wrap">
<div id="inner-wrap">
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
<div class="horizontal-fields service-item">
<button class="addField">+</button>
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<!-- Additional form fields are dynamically inserted here. -->
<div class="service-additional-fields">
<!-- Additional fields for DSL Tails -->
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
<label>Text Box:</label>
<input type="text">
</div>
</div>
</div>
</div>
</fieldset>
CSS
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
}
#inner-wrap {
float:left;
margin-right:-30000px;/*Be safe with Opera's limited negative margin of 32695px (-999em could cause problems with large font sizes)*/
padding-left:20px;
width: auto;
}
div.horizontal-fields input,
div.horizontal-fields textarea,
div.horizontal-fields select,
div.horizontal-fields label {
width: auto;
}
/* Horizontal fields is the class which is not re-sizing it's with correctly */
.horizontal-fields {
display: block;
}
.service-additional-fields {
display:inline-block;
}
DEMO
http://jsfiddle.net/aLKHJ/1/
Try this approach:
HTML:
<div id="slide-wrap">
<!-- + First row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - First row -->
<!-- + Second row -->
<div class="row">
<!-- All elements here -->
</div>
<!-- - Second row -->
</div>
CSS:
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
width: 400px; /* for example */
padding-left:20px;
}
div.row {
float:left;
white-space: nowrap;
}
Take it easy, I was really getting confused of inner styles, so I removed them.
JsBin demo
The first image belongs to Chrome desktop and the second is a browser for Android, the question is because in the mobile browser (including Safari for iPhone) I can not display the legend label on the site I'm creating, the words "Area de administradores "is a legend that giving slideDown click perform as shown in the image of the desktop browser but in the nevegador for mobiles I can not click.
Know why this error occurs? The next code belongs to the form login:
<div id="content">
<div id="wrapper">
<legend id="leyendaAdmin">// Área de administradores</legend>
<div class="loginIndex" >
<div class="titleIndex">
<img src="images/itcxx.png">
<h1>Bienvenido al<br>Centro de Información</h1>
</div>
<div class="inputLogin">
<form id="formLogin" name="formLogin" method="post" action="doLogin.php">
<center><h2>Iniciar sesión</h2></center>
<p class="fUser">
<input id="ncontrolLogin" name="ncontrolLogin" placeholder="Número de control" type="text" AUTOCOMPLETE=OFF maxlength="8" onKeyPress="return _onlyNumber(event);"/>
</p>
<p class="fPasswd">
<input id="passwdLogin" name="passwdLogin" placeholder="Contraseña" type="password" AUTOCOMPLETE=OFF maxlength="4" onKeyPress="return _onlyNumber(event);"/>
</p>
<input id="bIniciar" name="bIniciar" value="Iniciar" type="submit"/>
</form>
<br/>
<div id="status_msg"></div>
</div>
</div>
</div>
<br/>
<div id="wrapper">
<legend id="leyenda">// Área de visitantes</legend>
<button id="bSearch" name="bSearch">Realizar búsqueda</button>
</div>
</div>
And CSS:
#wrapper legend{
text-align:left;
background-color:#000;
color:#F0F0F0;
font-size:25px;
float:left;
width:100%;
padding:5px 0px 5px 10px;
margin:10px 0px;
border-bottom:1px solid #fff;
border-top:1px solid #d9d9d9;
}
There are at least two problems I can see. One was mentioned in the comments, you cannot have two elements with the same id attribute on one page.
The other issue may be your problem: you are using <legend> incorrectly.
http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#the-legend-element
The legend element
Contexts in which this element can be used: As the first child of a fieldset element.
That means that the only time you can use a <legend> is like this:
<fieldset>
<legend></legend>
<!-- content -->
</fieldset>
Browsers are free to do what they with invalid markup, you may be seeing a side effect of this.
Before trying to solve problems in HTML, CSS, or JavaScript, always check your results with the The W3C Markup Validation Service first. Debugging broken or invalid HTML is impossible.