text adapting to button size - html

I had a problem where a text on a button went over the edge of the button. The text on the button was: "Thanks". I solved that with adding the below to the code. This solved the problem.
HTML
<div class="sign-up">
<p class="sub-header">#Helpers.GetText(CurrentPage, "signupHeaderText", CurrentPage.Parent)</p>
<form id="signupForm">
<div class="form-group">
<label class="sr-only" for="name">#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)</label>
<input type="text" class="form-control" placeholder="#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)" id="name" name="name" required />
</div>
<div class="form-group">
<label class="sr-only" for="email">#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)</label>
<input type="email" class="form-control" id="email" name="email" placeholder="#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">#Helpers.GetText(CurrentPage, "signupCtaButtonText", CurrentPage.Parent)</button>
</form>
</div>
CSS
.btn.btn-default.active,.btn.btn-default:active,.btn.btn-default:hover {
background-color: #71a0af;
color: #fff;
box-shadow: none
<!-- i added the below code to this class: -->
text-align: left;
padding-left: 12px;
width: 90px;
}
The problem is now that i discovered that another button is using the same class, but the text is here: "Yes please". That means that the button now is to small, and the text is flying over the side again.
What is the best solution on this problem? Should I make another class for the other button, or can I make it responsive, so that the button is adapting to the text?
Best Regards

This is an excerpt of my download class (because I mainly use it for download source code or download buttons above an article):
.download
{
display: inline-block;
/* gradient */
background-color: #627A85; /* old browsers */
background-image: -moz-linear-gradient(top, #8A9FA9 0%, #4B5E66 100%); /* firefox */
/* some other gradients removed here, for brevity */
border: none;
border-radius: 6px;
/* some other settings here removed for brevity */
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4), -2px -2px rgba(0, 0, 0, 0.2) inset;
line-height: 24px;
margin: 10px 0 0;
font-size: 16px;
padding: 5px 12px 7px 15px;
}
As you can see: no fixed width. The main part is the padding and the use of inline-block.

Related

Input background (image) gets removed after selection of suggestion

I have email input with background image as symbol on it. The issue is input works properly if user adds data but if they choose to select suggestions provide by browser, the image just hides.
See below HTML and CSS.
.login-form-email {
border-radius: 6px;
background-color: #fff;
background: url(img/envelop.png) no-repeat scroll 7px 7px;
padding-left: 40px;
}
<div class="form-group">
<label class="short-description"> Email </label>
<input id="username" name="username" type="text" class="form-control login-form-email" autocomplete="off" required>
</div>
This snippet might not work but I'll add snapshot of how it looks.
Here is the image 1 on how it looks initially.
Now, when I select the autosuggestion, it weirdly looks like this. (See envelop symbol is removed.)
You can wrap <input/> element in <div> and add styles to div::before. if you do it in this way, your input will be responsive also.
With -webkit-autofill you can change autocomplete styles in Webkit browsers.
.input-wrapper{
display: inline-block;
margin-left:-25px;
}
.input-wrapper::before {
content: "";
background: url(https://img.icons8.com/external-justicon-flat-justicon/64/000000/external-email-notifications-justicon-flat-justicon.png) no-repeat scroll 0px 0px;
background-size: 20px 20px;
padding-left: 30px;
position: relative;
left: 15%;
}
.login-form-email{
border-radius: 6px;
padding:5px 10px 5px 28px;
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
box-shadow: 0 0 0 30px white inset !important;
}
<div class="form-group">
<label class="short-description" for="email"> Email </label>
<div class="input-wrapper">
<input
id="email"
name="email"
type="email"
class="form-control login-form-email"
required
/>
</div>
</div>
this is because of when you select the suggestion value it will be autofill the field and the browser has the default autofill background property.
you have used the sort-hand property for the background so when you autofill the field value the background property will changed.
please use separated properties for that like this way.
.login-form-email {
border-radius: 6px;
background-color: #fff;
background-image: url(img/envelop.png);
background-repeat: no-repeat;
background-position: 7px 7px;
padding-left: 40px;
}
The problem is that currently the browser's default styling for this can not be overridden, or there is no direct solution to do so, see here:
How to avoid "-internal-autofill-selected" style to be applied?
The alternative solution is to use a before element, like so:
.form-group:before {
content: "";
background: url(https://emojipedia-us.s3.amazonaws.com/source/skype/289/envelope_2709-fe0f.png) no-repeat scroll 0px 0px;
padding-left: 20px;
background-size: 20px 20px;
z-index: 999;
position: relative;
left: 65px;
}
.login-form-email{
text-indent: 30px;
}
<div class="form-group">
<label class="short-description"> Email </label>
<input id="username" name="username" type="text" class="form-control login-form-email" autocomplete="off" required>
</div>
if you want to change the background color of auto-filled input you need to use these:
UPDATED:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px white inset !important;
background: url(https://img.icons8.com/external-justicon-flat-justicon/64/000000/external-email-notifications-justicon-flat-justicon.png) no-repeat scroll 0px 0px;
background-size: 20px 20px;
}

How to remove this white line at the bottom of the progress bar

I created a progress bar in the CSS but after running there is a white line below the progress bar.
I have tried using margin-bottom:0px and margin-bottom:-5px in progress CSS but it doesn't work. is there any other way?
is this default from the progress bar?
function progressbarOne() {
var pointStart = "10";
var pointEnd = "100";
document.getElementById("one").setAttribute("value", pointStart);
document.getElementById("one").setAttribute("max", pointEnd);
}
function progressbarTwo() {
var pointStart = "10";
var pointEnd = "100";
document.getElementById("two").setAttribute("value", pointStart);
document.getElementById("two").setAttribute("max", pointEnd);
}
/* Progress Bar */
progress {
width: 90%;
-webkit-appearance: none;
padding-left: 8px;
margin-left: 8px;
height: 8px;
}
progress::-webkit-progress-value {
-webkit-appearance: none;
background: #daa82b;
white-space: pre;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.89) inset;
}
progress::-webkit-progress-bar {
-webkit-appearance: none;
white-space: pre;
background: #fcfcfc;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.89) inset;
}
<body onload="progressbarOne();progressbarTwo();">
<div>
<form class="form-horizontal">
<fieldset style="height:175px; width:364px;background-color:#e9cb80">
<label class="mb-0 blue-dark-text" style="font-size:15px;white-space: pre; "><b> Progress Bar</b></label>
<br><br>
<div class="form-group">
<label for="" class="mb-0" style="font-size:12px;color:black;white-space: pre;padding-left:8px"><b> One</b></label>
<div id="referralBar" class="input-group border-bottom">
<progress id="one" value="0" max="0"> </progress>
</div>
</div>
<div class="form-group">
<label for="" class="mb-0" style="font-size:12px;color:black;white-space: pre;padding-left:8px"><b> Two</b></label>
<div id="cashbackBar" class="input-group border-bottom">
<progress id="two" value="0" max="0"> </progress>
</div>
</div>
<br>
</fieldset>
</form>
</div>
</body>
This Image when i run in mobile :
If you remove the "border-bottom" class from the referralBar&cashbackBar div the border is gone. It is there because you are using bootstrap, see: https://getbootstrap.com/docs/4.0/utilities/borders/

How to create a 7 character underline input text field in html and css(screenshot attached)?

I am creating an UI for a mobile app I am required to create a popover with the UI attached in the screenshot.How to create a 7 character underline input text field in html and css like the below one?
HTML Code
<ion-modal-view class="modal contact-details-modal" id="contactDetailModal">
<ion-content delegate-handle="modalContent">
<center>
<br><br>
<img src="assets/images/camera-small.png">
<br><p>Camera</p>
<div class="underline_camera" style="border: 0;border-bottom: 1px solid #b2b2b2;outline: 0;width: 100px;">
<input type="text" id="camera" name=" camera" value="" />
</div><br>
<div class="meter_reading" style="border: 0;border-bottom: 1px solid #b2b2b2;outline: 0;width: 20px;">
<input type="text" id="meter" name=" meter" value="" />
<!--<input type="text" id="meter" name=" meter" value="" />
<input type="text" id="meter" name=" meter" value="" />
<input type="text" id="meter" name=" meter" value="" />
<input type="text" id="meter" name=" meter" value="" />
<input type="text" id="meter" name=" meter" value="" />
<input type="text" id="meter" name=" meter" value="" />-->
</div>
<div class="button-bar">
<a class="button button-balanced">
SUBMIT</a>
</div>
</center>
</ion-content>
</ion-modal-view>
CSS Code
.contact-details-modal {
top: 15%;
border-radius: 3px;
-webkit-border-radius: 3px;
min-height: 70% !important;
width: 80%;
left: 10%;
}
Here's a solution that creates a single text field with underlines under each character (try deleting and writing another number in the input field):
input {
border: none;
width: 10.5ch;
background:
repeating-linear-gradient(90deg,
dimgrey 0,
dimgrey 1ch,
transparent 0,
transparent 1.5ch)
0 100%/100% 2px no-repeat;
color: dimgrey;
font: 5ch consolas, monospace;
letter-spacing: .5ch;
}
input:focus {
outline: none;
color: dodgerblue;
}
<input maxlength='7' value='0123456'/>
This uses the ch unit whose width is the width of the 0 character. It also assumes the font in the input field is a monospace one so that all characters have the same width.
So the width for every character is always 1ch. The gap between the characters is taken to be .5ch. This is the value we set for letter-spacing. The width of the input is the number of characters times the sum between the letter width (1ch) and the gap width (.5ch). So that's 7*(1ch + .5ch) = 7*1.5ch = 10.5ch.
We remove the actual border of the input and we set a fake one using a repeating-linear-gradient. The dash (dimgrey) goes from 0 to 1ch and the gap (transparent) starts immediately after the dash and goes to 1.5ch.
It's attached to the left and the bottom of the input - this is the background-position component (0% horizontally and 100% vertically).
It spreads across the entire input horizontally (100%) and is 2px tall - this is the background-size component of the background.
The Sass code that generates this CSS is:
$char-w: 1ch;
$gap: .5*$char-w;
$n-char: 7;
$in-w: $n-char*($char-w + $gap);
input {
border: none;
width: $in-w;
background: repeating-linear-gradient(90deg,
dimgrey 0, dimgrey $char-w,
transparent 0, transparent $char-w + $gap)
0 100%/100% 2px no-repeat;
font: 5ch consolas, monospace;
letter-spacing: $gap;
&:focus {
outline: none;
color: dodgerblue;
}
}
You can tweak the gap and other things here.
Add a max length of character to an input.
<input type="text" class="underline" maxlength="7">
Adding size="7" is an easy way of also setting the width of the input to contain the 7 characters. But it's better to handle this in CSS.
And give it the proper styling.
.underline {
background-color: #fff;
border: none;
border-bottom: thin solid gray;
}
First I set border to 0 to remove all border styling, after which I set styling for border-bottom. This way it takes only two lines of code instead of four when styling all border top, right, bottom and left.
Update
https://jsfiddle.net/1q3h8qeh/

Display fieldset data to center of page

Am trying to make my fieldset data to be at center of the page but it displays in my page towards left. It displays fine fiddle, http://fiddle.jshell.net/8SuLK/ but not displaying to center of page in browser. How to go about.
Thanks in advance.
Remove position from fieldset and try like this: DEMO
CSS:
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
text-align:center;
display:block;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
width:70%;
border: 2px groove threedface;
}
If you don't need to have your fieldset positioned as fixed then you can center it in two ways.
1) Setting a width to your fieldset and add auto to its margin property.
EXAMPLE
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px auto;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
border: 2px groove threedface;
width:75%;
}
DEMO http://fiddle.jshell.net/8SuLK/3/
2) Adding a wrapper to your fieldset and set it as text-align:center; and then set display:inline-block; to the fieldset.
EXAMPLE
<div class="wrapper">
<fieldset>
<label>First Name:</label>
<input type="text" />
<label>Middle Name:</label>
<input type="text" />
<label>Last Name:</label>
<input type="text" />
<label>Date of Birth:</label>
<input type="date" />
</fieldset>
</div>
.wrapper{text-align:center;}
fieldset {
border-radius: 10px;
background: #ffc;
margin: 20px;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
display:inline-block;
border: 2px groove threedface;
}
DEMO http://fiddle.jshell.net/8SuLK/4/
PS. Just a reminder in your jsfiddle you can see the syntax highlighter showing in red the syntax errors. In your case the last closing tag, </fieldset> was in red because each input tag wasn't closed. Remember the right syntax for input is <input type="text" />.
Furthermore it's good practice to add the id to each input <input type="text" id="firstname" /> and then specify what the label is for like <label for="firstname">First Name</label>

CSS Background color doesn't work unless a height is specified or it's floated?

Can anyone explain why on the 3rd line of the CSS in this JFiddle demo why the div ID of #form_container requires a height in order for the background to show if a float:left is specified at line 14?
I thought floats did not remove objects from the flow of the browser...
<div id="form_container">
<form id="contact_form" action="#" method="get" accept-charset="utf-8">
<p>
<label for="byour_name">Name:</label>
<input type="text" name="byour_name" value="" id="byour_name">
</p>
<p>
<label for="byour_email_address">Email:</label>
<input type="text" name="byour_email_address" value="" id="byour_email_address">
</p>
<p>
<label for="subject">Subject:</label>
<input type="text" name="formsubject" value="" id="form_subject">
</p>
<p>Message:
<br/>
<textarea id="form_messagebox" name="Message" rows="20" cols="25"></textarea>
</p>
<p>
<input id="submitBtn" type="submit" value="Send it!">
</p>
</form>
CSS
#form_container {
width: 300px;
/* height: 300px; Background works with this uncommented if the float is enabled*/
border: 2px red solid;
padding: 0 10px 0 10px;
background-color: red !important;
}
#form_container form {
color: black;
}
#form_container input, p {
margin: 0;
padding 0;
float:left; /* This breaks the background */
display:inline;
}
#form_container label {
width: 200px;
position:relative;
}
#submitBtn {
}
#contact input, textarea {
box-sizing: border-box;
color: rgb(0, 0, 0);
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
background-color: rgb(221, 220, 219);
font: normal normal normal 16px/1.3em'open sans', sans-serif;
border: 0px solid rgb(192, 185, 181);
}
#form_messagebox {
height: 150px;
width: 200px;
}
here is fiddle of your que see this
http://jsfiddle.net/jkkheni/eJS6b/3/
added a css class of clear
.clear{ clear:both; height:0px; width:0px; display:table; content:"";}
and added a div in your html
<div class="clear"></div>
before closing div with id form_container
when you use float always clear all float.
or you can also use overflow:hidden in div with form_container id
float removes height of the element if it is not specified.
Try:
#form_container{
overflow:hidden;
}
DEMO here.
OR
clear floats after finishing form:
<div class="clr"></div>
.clr{clear:both;}
DEMO here.