Form within a non-white background strange borderrs - html

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.

Related

<fieldset> has no border

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>

How to I prevent deletion of contenteditable span?

I'm trying to use a contenteditable span. But if, as the user, I delete all the text within the span, the span disappears and is no longer editable (still in the DOM though). How do I prevent this?
I'm seeing this problem in both Chrome and FF.
Here's what I've tried:
<div class="subgroup" contenteditable="false" style="border: 1px solid red;">
<span class="header editable" contenteditable="true">initial contents</span>
</div>
I put contenteditable="false" on the parent element based on this answer from 2015, but the result is the same whether or not that attribute is present on the parent.
Of course, I could have JS intercept keypresses to prevent the user from completely clearing the contents, but that's a bad UX. I'd much prefer a pure HTML solution in any event.
In writing up this question, I discovered a solution. For others who might need it: put a border on the span.
But there, as suggested by #G-Cyrillus, a better solution is to add padding to the span when the node is empty:
<style>
.subgroup span:empty { padding-right:1em;}
</style>
<div class="subgroup" contenteditable="false" style="border: 1px solid red;">
<span class="header editable" contenteditable="true">initial contents</span>
</div>
Anyone have a better solution?

Bootstrap button styles margin-left:-1px when click outside that area

I've use bootstrap in my project, like this below
<div class="input-group">
<input type="text" class="form-control input-lg" autofocus>
<span class="input-group-btn">
<button class="btn btn-primary btn-lg" type="button">search</button>
</span>
</div>
and in Bootstrap, I saw :
.input-group-btn:last-child > .btn {
margin-left: -1px;
}
So I write some CSS to avoid the useless margin-left:-1px; but I still have a problem:
When I click the area outside the <div class="input-group search-bar">, the button still have a effort like margin-left:-1px;
I'm confused, should I write some JavaScript to avoid this?
From the bootstrap source code on Github, these -1px styles are used when having button groups where the buttons align next to each other from doubling the border. If you place 2 buttons with a 1px border next to each other, you create visually a 2px border. The -1px shifts the button over so that the border is not doubled.
Comment from actual github source:
// Prevent double borders when buttons are next to each other
The -1px margin is there to prevent double borders when buttons are next to each other. It's meant to be this way.
If you really need to get rid of this, you may also have to adjust some of the negative margins and/or z-index for .input-group-btn > .btn:hover, :focus, :active, :first-child, and :last-child.

How to style the border of a h:selectBooleanCheckbox?

How can I give the <h:selectBooleanCheckbox> a red border?
I tried it as follows, but the border doesn't appear at all.
<h:selectBooleanCheckbox style="border: 1px solid red;" />
try this one ,
<h:selectBooleanCheckbox id="deleSub" style="border-color:red;" value="#mobeeCustomerHome.deleteSubscription}" />
The JSF <h:selectBooleanCheckbox> generates a HTML <input type="checkbox"> element. The style of the HTML <input type="checkbox"> element is very strictly controlled by the specific webbrowser used by the client.
Using border works in Internet Explorer only and even then the appearance is ugly. There's some good padding between the box and the border. To get it to appear the way you want in other browsers you should be using outline instead.
<h:selectBooleanCheckbox style="outline: 1px solid red" />
Note that this does in turn not work in IE! You'd likely want to specify the both CSS properties if you want to have a red border across all browsers.
<h:selectBooleanCheckbox style="border: 1px solid red; outline: 1px solid red" />
Please note that this is completely unrelated to JSF. It's a pure HTML/CSS matter. JSF is merely a HTML code generator. The problem ultimately boils down to the styleability of a HTML <input type="checkbox"> element.
A completely different alternative is to go for a 3rd party JSF component library which allows more fine grained control over the UI, such as PrimeFaces. See also the <p:selectBooleanCheckbox> showcase. It's using jQuery UI (with CSS themeroller!) under the covers.
This has more the to due with the HTML checkbox itself rather than the JSF tag.
See post: How to change checkbox's border style in CSS?
You could try:
outline: 1px solid red;
-moz-appearance: none;
This gets part of the way I think your looking for in FF it does nothing in IE8 (border does nothing in IE8 either). I haven't tested any other browsers.

Text in label position differently after zoom in IE7

I'm having a problem with IE7 after I zoomed the page. Some of the text was compressed and the hover/onClick was not in the place where that text is.
Here is my sample code and css:
CSS:
.pagination{background-color: #CCFFFF;padding:2px 2px 2px 2px;}
.paginateNo{color: #000000;margin: 0 3px 0 3px;font-size: 10px; }
.paginateYes{margin: 0 3px 0 3px;color: #0033FF;cursor:pointer; font-size: 10px;}
.paginateYes:hover{color: #FF0000;text-decoration: underline;}
HTML:
<div id="pagination" class="pagination" align="right">
<label class="paginateNo">Records 1 - 20 of 150</label>
<label class="paginateNo">First</label>
<label class="paginateNo">|</label>
<label class="paginateNo">Previous</label>
<label class="paginateNo">|</label>
<label class="paginateNo">1</label>
<label class="paginateYes" onClick="showPage(?);">2</label>
<label class="paginateYes" onClick="showPage(?);">etc...</label>
<label class="paginateNo">|</label>
<label class="paginateYes" onClick="showPage(?);">Next</label>
<label class="paginateNo">|</label>
<label class="paginateYes" onClick="showPage(?);">Last</label>
</div>
Note: ? means page number
I'm not sure if some of my CSS causing this, but in ff and chrome I had no problem. Is this IE7 problem or just in my code. I'll appreciate any help. Thanks
use IE Conditional CSS or study about conditional css
note: using above trick, your site will not be validated by w3c
A test with version of IE and browser may proof that this is a browser bugs. I also do some experiment with label to see what its different with my current display and its only prove that this a browser behavior.