Have used the below code for text editor with bullet listing in it.
<div text-angular="text-angular" ng-model="comments"
style="border: 1px solid #e1e1e1;"
ta-toolbar="[['ul']]" name="htmlcontent1" class="form-control myform1-height"
ta-html-editor-class="form-control myform1-height">
</div>
the issue is the text editor doesn't popup keyboard when touched.
have used below css for it.
.closing-textarea {
width: 100%;
margin-top: 30px;
border: 1px solid #dee5e7;
outline: none;
-webkit-appearance: none;
resize: none;
padding: 10px;
}
.closing-comments-wrapper .form-control {
border: none;
border-top: 1px solid #e1e1e1;
/*padding: 10px;*/
/*border: 2px dashed #DDD;*/
}
.closing-comments-wrapper .ta-editor.form-control.myform1-height, .ta-scroll-window.form-control.myform1-height {
min-height: 150px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
.closing-comments-wrapper .form-control.myform1-height > .ta-bind {
height: auto;
min-height: 150px;
padding: 6px 12px;
}
.closing-comments-wrapper .btn-group>.btn:first-child {
background: rgb(255, 255, 255);
float: right;
}
.closing-comments-wrapper .btn-group {
float: right;
}
.ta-hidden-input {
display: none;
}
Related
.sear {
height: 50px;
width: 400px;
border: 0.5px solid black;
border-radius: 15px 0px 0px 15px;
}
.sear:focus {
//how to make only the border radius and other part of box selected?
}
.bar {
display: inline;
height: 50px;
width: 60px;
border: 0.5px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" style="display: inline; margin-left: 20%;" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
I was just wondering if it is possible to select only the border-radius and the rest of the box when the mouse is focused on the input as opposed to the corner of the box.
If you want to remove the default outline (which is not recommended for accessibility reasons) and add your own you can do this by changing the border color on focus but I would recommend wrapping the elements with a div and using javascript to add and remove a class to make this styling change like this:
var btnGroup = document.querySelector('.btn-group');
var input = document.querySelector('.sear');
input.onfocus = function() {
btnGroup.classList.add('focus');
}
input.onblur = function() {
btnGroup.classList.remove('focus');
}
.btn-group {
display: flex;
align-items: center;
position: relative;
width: 100%;
border: 1px solid black;
border-radius: 15px;
background-color: white;
width: 400px;
}
.btn-group.focus {
border-color: rebeccapurple;
}
.sear {
flex: 1;
border: none;
padding: .5rem;
margin: 0 0 0 0.5rem;
line-height: 1rem;
font-size: 1rem;
outline: none;
}
.bar {
padding: .5rem 1.5rem;
width: 60px;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
outline: none;
border-left: 1px solid #999;
}
.bar:hover {
cursor: pointer;
}
<div class="btn-group">
<input type="text" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
</div>
for example:
.sear:focus {
/* to change the border when selected. */
border: 2px solid #0000ff;
}
If you are looking to have outline radius, its not posisble as mentioned in the comments, as a work around you can have something like this:
.sear {
height: 50px;
width: 400px;
border: 0.5px solid black;
border-radius: 15px 0px 0px 15px;
}
.sear:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 2px #9ecaed;
}
.bar {
display: inline;
height: 50px;
width: 60px;
border: 0.5px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" style="display: inline; margin-left: 20%;" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
Just trying to understand what you want.
May be something like this ?
.sear {
height: 50px;
width: 400px;
border: 1px solid black;
border-radius: 15px 0px 0px 15px;
margin-left: 20px;
}
.sear:focus {
border-top: solid 3px blue;
border-left: solid 3px blue;
border-bottom: solid 3px blue;
margin-top: -2px;
}
.sear:focus + .bar {
border-top: solid 3px blue;
border-right: solid 3px blue;
border-bottom: solid 3px blue;
}
.bar {
display: inline-block;
height: 54px;
width: 60px;
border: 1px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" class="sear" placeholder="Search..."/>
<button class="bar">🔎</button>
I have created a form and set focus to none but I am still getting the green box to appear and stay around each form field when I am testing.
Here is the form: https://secureforms.nextens.nl/TEMPLATE
I have already tried using:
*:focus {
outline: none;
}
AND
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
But for some reason, this still isn't working. Below is the CSS that I am using to style the form.
input[type=text], select {
font-size:15px;
width: 85%;
margin: 8px 0;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 25px;
box-sizing: content-box;
}
.elq-form select
{
font-size:15px;
width: 85%;
margin: 8px 0;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 25px;
box-sizing: content-box;
}
.elq-form radio
{
font-size:15px;
width: 100%;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 25px;
box-sizing: content-box;
}
input[type=submit] {
width: 100%;
background-color: #337ab7;
color: white;
margin-top: 8px;
margin-bottom: 8px;
border: none;
border-radius: 0px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #337ab7;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
}
I just want the green highlighting around the form fields not to show up.
add this in your css
.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active,
.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active {
outline: 0;
}
You have this CSS in your template, you gotta remove it to get what you want
.LV_valid_field,
input.LV_valid_field:hover,
input.LV_valid_field:active,
textarea.LV_valid_field:hover,
textarea.LV_valid_field:active {
outline: 1px solid #00CC00;
}
.LV_invalid_field,
input.LV_invalid_field:hover,
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover,
textarea.LV_invalid_field:active {
outline: 1px solid #CC0000;
}
According to Dev-Tools, it is line 7 of your CSS that is causing the issue:
.LV_valid_field, ...
I'm attempting to make a login page for a website, https://essaydapp.com to submit and try and get into the application. I'm trying to mimic their design (see link) but I'm having some issues:
Screenshots:
https://imgur.com/w2GAphF
https://imgur.com/rimWY0s
In the first screenshot you can see the little 1px dashed border, I would like that to be the height of the entire page rather than the form only.
In the second screenshot you can see on the edges of the page and top there is the white color, but I would like that to be blue too. Thanks for any help in advance.
form {
/*border: 10px solid #1acebc;*/
padding: 28px;
border-left: 1px solid black;
border-left-style: dashed;
border-right: 1px solid black;
border-right-style: dashed;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}
img {
display: block;
margin: 0 auto;
padding-bottom: 60px;
padding-top: 30px;
width: 300px;
height: 300px;
}
body {
background-color: #e7f3f6;
/*border-left: 250px solid #007da5;
border-right: 250px solid #007da5;*/
border-left: 175px solid #007da5;
border-right: 175px solid #007da5;
padding-top: 175px;
padding-bottom: 215px;
}
<form>
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>
This code removes any padding from left and right.
I hope that's what you want.
body{
border: 1px dashed;
backgroud-color: #e7f3f6;
margin-left: 0px;
margin-right: 0px;
}
Your existing code is somewhat messy. Instead, I suggest to use the following flex-box solution
body {
padding: 0;
margin: 0 auto;
background-color: #007da5;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
form {
display: flex;
width: 75%; /*Set the width required*/
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e7f3f6;
border-left: 1px dashed black;
border-right: 1px dashed black;
}
img {
width: 300px;
height: 300px;
padding-bottom: 60px;
padding-top: 30px;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 85%;
}
input[type=text],
input[type=password] {
width: 85%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}
<form>
<img src="https://i.imgur.com/ihZBCxx.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>
I am trying to have some pre-input on my forms and I want the input field to expand to the end of the container div. The problem is the input field seems to expand past the container div due to the length of the pre-input text.
.container {
width: 70%;
}
.input-field {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 100%;
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
width: 100%;
}
.input-field:hover {
border: 1px solid #05c9f0;
}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
Another example here: http://codepen.io/anon/pen/wgdErO
If you try the example code, you will note you can click the input box way outside where I want it to end.
Any thoughts on a fix?
Try using the flexbox layout.
.container {
width: 300px;
}
.input-field {
background: #fff;
border: 1px solid #ddd;
display: flex;
align-items: center;
}
.input-field .addon {
padding: 2px 8px;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding: 0 4px;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
flex: 1;
}
.input-field:hover {
border: 1px solid #05c9f0;
}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
<img src="//dummyimage.com/300x50">
Just decrease the input width from 100% to a lower value like 99.7% and that will do the trick:
.container {
width: 70%;
border: 1px solid red;
}
.input-field {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 99.7%;
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
width: 100%;
}
.input-field:hover {border: 1px solid #05c9f0;}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
You can calculate the width like this! width: calc(100% - 125px); rather than set it to 100%
Hello guys need your help by merging two <div>s' borders. Here is what I want to get and what I've gotten until now:
enter image description here
and this is what i want to do enter image description here
Could someone please tell me how to do so? Here is my code if it helps something:
css :
#plink {
position: relative;
width: 200px;
float: left;
}
#open {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
width: 200px;
text-align: center;
line-height: 50px;
}
#closed {
border: 1px solid black;
width: 200px;
text-align: center;
line-height: 50px;
}
#closed:hover a {
display: block;
}
#open:hover a {
display: block;
}
#pbase {
border: 1px solid black;
position:relative;
width: 600px;
height: 300px;
float: left;
}
and html :
<div id="plink">
<div id="open">My details</div>
<div id="closed">My ads</div>
<div id="closed">Favorites</div>
</div>
<div id="pbase"></div>
#plink {
position: relative;
width: 200px;
float: left;
border-top: 1px solid black;
border-left: 1px solid black;
}
#open {
border-bottom: 1px solid black;
border-right: 1px solid white;
text-align: center;
line-height: 50px;
}
#closed {
border-bottom: 1px solid black;
width: 200px;
text-align: center;
line-height: 50px;
}
#pbase {
border: 1px solid black;
position: relative;
width: 600px;
height: 300px;
float: left;
margin-left: -1px;
z-index: -1;
}
https://jsfiddle.net/8rrov5hb/
This was achieved by setting #pbase with margin-left: -1px and z-index: -1 to put it behind #plink
The div #open has border-right: 1px solid white to make it appear transparent - just change this to whatever background color you need
Set border-right color white and use z-index to keep open menu on over the right part. Try like following. Hope this will help you.
#open {
border-color: black #fff black black;
border-style: solid;
border-width: 1px;
line-height: 50px;
position: relative;
text-align: center;
width: 199px;
z-index: 1;
}
Update:
$('.menu a').click(function (e) {
e.preventDefault();
$(this).closest('div').siblings().removeClass('open');
$(this).closest('div').addClass('open');
});
#plink {
position: relative;
width: 200px;
float: left;
}
.open {
background-color: #a7a7ff !important;
border-right: 1px solid #a7a7ff !important;
line-height: 50px;
position: relative;
text-align: center;
z-index: 1;
}
.menu {
border: 1px solid black;
width: 200px;
text-align: center;
line-height: 50px;
background-color: #5e5eb6;
}
.menu:hover a {
display: block;
}
.open:hover a {
display: block;
}
#pbase {
border: 1px solid black;
position: relative;
width: 600px;
height: 300px;
float: left;
background-color: #a7a7ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plink">
<div class="menu open">My details</div>
<div class="menu">My ads</div>
<div class="menu">Favorites</div>
</div>
<div id="pbase"></div>
A couple of issues. You were using multiple id's with the same name, these should have been changed to classes. and 'open' / 'active' should be a state set with a class.
There was duplication in the css for the different states.
The main takeaway is that you needed to change the width of the active `.tab-nav'.
css was missing box-sizing
* {
box-sizing: border-box;
}
.tab-navigation {
position: relative;
width: 200px;
float: left;
}
.tab-nav {
border-top: 1px solid black;
border-left: 1px solid black;
background-color: white;
width: 200px;
text-align: center;
line-height: 50px;
}
.tab-nav:last-of-type {
border-bottom: 1px solid black;
}
.tab-nav:hover, .tab-nav.open {
width: 202px;
}
.tab-nav a {
display: block;
}
#pbase {
border: 1px solid black;
position:relative;
width: 600px;
height: 300px;
float: left;
z-index: -1;
}
<div class="tab-navigation">
<div class="tab-nav open">My Details</div>
<div class="tab-nav">My ads</div>
<div class="tab-nav">Favorites</div>
</div>
<div id="pbase"></div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#plink').click(function(){
$('#open, #pbase').css('border','2px solid #000');
})
})
</script>