I'm trying to center an input box on the center of the page. When you click the button "Prices" It should show a text box right under the button centered. Instead, it's showing all the way to the left.
Here is what I have:
<div class="header-content">
<div class="header-content-inner">
<h1 class="text text-primary vintage-retro sr-intro">IFixIT Repair</h1>
<hr class ="sr-intro">
<p style="font-family:Arial;" class ="text sr-intro">Repairs By Students, For Students</p>
Schedule Repair
</div>
Prices
<div id="repair-prices" class="text-center collapse">
<input class="typeahead form-control" name="search" placeholder="Model of Device (i.e. iPhone 6)">
</div>
</div>
With this, I get this result after the button click:
The box is all the way to the left.
Any help would be awesome! If you need to see anything else, let me know. Thanks!
Try using the <center> tag, that may help.
If you are using HTML5, this does not work and you must center using CSS.
Try using add some css in input class. Because when you used form-control class it has display:block property, so that it will take 100% of width.
.typeahead.form-control{
display:inline-block;
width:auto;
min-width:280px;
}
.btn.btn-primary.sr-intro{
margin-bottom:10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header-content text-center">
<div class="header-content-inner ">
<h1 class="text text-primary vintage-retro sr-intro">IFixIT Repair</h1>
<hr class ="sr-intro">
<p style="font-family:Arial;" class ="text sr-intro">Repairs By Students, For Students</p>
Schedule Repair
</div>
Prices
<div id="repair-prices" class="text-center">
<input class="typeahead form-control" name="search" placeholder="Model of Device (i.e. iPhone 6)">
</div>
</div>
I dont know whether is correct, but i have tried your code with fiddle
>>> fiddle demo <<< without form-control class
add this and remove form-control class
.text-center {
text-align: center;
}
your form-control class in search is 100% width, so you cant center it.
Related
which I use to clear the text. This x box always appear. I want this x box to appear only when input has focus and hide after word. Currently it appears all the time.
<div class="input-group">
<div class="btn-group has-feedback has-clear">
#Html.TextBoxFor(m => m.Amount)
<a id="searchclear3"
class=" a glyphicon glyphicon-remove-circle form-control-
feedback form-control-clear"
style="pointer-events:auto; text-decoration:none;
cursor:pointer;"
onclick="$(this).prev('input').val('');return false;">
</a>
</div>
</div>
You can use some fancy CSS to hide the “searchclear3" element when the text box isn’t focused. The trick is to use the CSS “Adjacent Sibling Selector”, +. (Ref: MDN)
HTML
<div class="input-group">
<div class="btn-group has-feedback has-clear">
<input id="txtInput" type="text"/>
<a id="searchclear3"
class=" a glyphicon glyphicon-remove-circle form-control-
feedback form-control-clear"
style="pointer-events:auto; text-decoration:none;
cursor:pointer;"
onclick="alert('click'); return false;">X
</a>
</div>
</div>
Notice that for convenience, I hard-coded the markup for the text box, put an “X” in the a element and fudged the onclick handler. You’ll have to figure out an appropriate selector for the text box and get rid of the other stuff.
CSS
input#txtInput + a#searchclear3 {
visibility: hidden;
}
input#txtInput:focus + a#searchclear3 {
visibility: visible;
}
Those rules say that an a element with id “searchclear3” that is a sibling of an input whose id is “txtInput” should be visible when the input has focus, and hidden otherwise.
I am trying to customize the tooltip's width of element-ui framework because text inside tooltip is broken incorrectly.
Here is generated tooltip element with is placed on the bottom of body tag
<div role="tooltip" id="el-tooltip-8061" aria-hidden="true" class="el-tooltip__popper is-dark popper-width" style="transform-origin: center top;z-index: 2031;/* display: none; */">
<div data-v-65209316="" class="row">
<div data-v-65209316="" class="col-5">Employee</div>
<div data-v-65209316="" class="col-7">John Smith</div>
</div>
<div x-arrow="" class="popper__arrow" style="left: 77px;"></div>
</div>
and here is my vue code:
<el-tooltip placement="bottom" theme="dark" popper-class="popper-width" :popper-options="customPopperOptions">
<template slot="content">
<div class="row">
<div class="col-5">
Employee
</div>
<div class="col-7">
John Smith
</div>
</div>
</template>
</el-tooltip>
and
customPopperOptions() {
return {container: document.body, boundariesElement: document.body}
}
I see you are using bootstrap classes, have you thought about splitting them out because your 12 grid has less space to occupy on your employee tooltip. 1st off,
try evening them out:
<div class="row">
<div class="col-6">
Employee
</div>
<div class="col-6">
John Smith
</div>
</div
See if that works, should split the difference. If this causes issues then you will probably need to adjust your CSS code because it looks as though your class .popper-width has a set width.
In my project, span elements are used to show error messages or control labels. The text color of the messages is red and I need to set the color of the text depending on the background color of the element(f.e. f1 element) which stays behind the span element in UI since I use the error messages on different input elements with different background colors. Is there any way to solve this problem? Thanks in advance.
theme.scss file
.has-error .help-block, .has-error .control-label {
color: red;
}
login.component.html file
<form #form="ngForm" (ngSubmit)="onSubmit(form, $event)">
<div upeFormGroup hasFeedback [hasError]="un.invalid">
<div class="input-group">
<input type="text"
[(ngModel)]="user.username"
upeFormControl
name="username"
#un="ngModel"
placeholder="User"
required>
</div>
<span [upeHelpBlock]="un.invalid">Please fill the name input</span>
</div>
</form>
auth.component.html file
<div fxFlex="grow">
<div class="form-box">
<router-outlet></router-outlet>
</div>
</div>
auth.component.scss file
.form-box {
background-color: gray;
}
You can use ngClass directive to add or remove classes from elements according to a specific state. Read more here https://angular.io/api/common/NgClass
Example
<span [ngClass]="{isError:un.invalid}">Please fill the name input</span>
And then in your style file
span.isError{
color: white;
}
If I understand you want change text color depend of the background color who is dynamic:
You could create an angular component:
<form #form="ngForm" (ngSubmit)="onSubmit(form, $event)">
<div upeFormGroup hasFeedback [hasError]="un.invalid">
<div class="input-group">
<input type="text"
[(ngModel)]="user.username"
upeFormControl
name="username"
#un="ngModel"
placeholder="User"
required>
</div>
<app-error [ ... ] [isInvert]="isInvert" [message]="message"></app-error>
</div>
</form>
app-error:
<span [ngStyle]="{color: '#000', filter: (isInvert ? 'invert(1)' : 'invert(0)')}">
{{message}}
</span>
// for black and white but use css class for more colors
I'm trying to animate a chat. Every time the user clicks on the input field or "send" icon, I want the chat bubbles to appear one after the other. This is my part of my code so far. Right now, they all have "display: none." The picture below shows them without it.
<div class="messages">
<div class="message" id="msg1" style="display: none;">Hi! I'm looking for an old friend. She attended Martin Grove a few years ago.</div>
<div class="message" id="msg2" style="display: none;">Her name is Sam.<br>
<i>*insert pic of Sam and MC*</i></div>
<div class="message" id="msg3" style="display: none;">Did you know her or her last name by any chance? </div>
<div id="msg4" class="message-teacher" style="display: none;">Hello there!</div>
<div class="message-teacher" id="msg5" style="display: none;">Unfortunately, I did not have the pleasure of teaching Sam. Her last name and whereabouts are a mystery to me as well. </div>
<div class="message-teacher" id="msg6" style="display: none;">However, I do know she was in the photography club. I always saw her carrying a camera, always taking pictures. </div>
<div class="message-teacher" id="msg7" style="display: none;">In fact, I believe she won a contest for one of them. </div>
<div class="message-teacher" id="msg8" style="display: none;">She’s a super talented girl!</div>
<div class="message-teacher" id="msg9" style="display: none;">Best of luck on your search. I hope you two are reunited soon!</div>
</div>
<div class="input">
<div class="plus-icon" style="font-size: 25px; color: #2A84FF; margin: auto;">
<i class="fas fa-plus-circle"></i>
</div>
<div class="subinput" style="font-size: 25px; color: #2A84FF; margin: auto;">
<input type="text" placeholder="|" />
<i class="fas fa-smile"></i>
</div>
<div class="btn" style="font-size: 23px; color: #2A84FF; margin: auto;"><i class="fas fa-paper-plane"></i></div>
</div>
I would query for the required elements, create an array out of it, and shift() (aka remove the first element of the array - or you can use pop() to remove the last element, depending on your needs). When you pop or shift an element from an array, those functions return the removed element and we can remove the CSS class that hides those elements in the DOM.
const myHTMLCollection = document.getElementsByClassName("invisible");
const HTMLElementsArr = [...myHTMLCollection];
function showMessage() {
if (HTMLElementsArr.length > 0) {
HTMLElementsArr.shift().classList.remove('invisible');
}
}
.invisible {
display: none;
}
<p class="invisible">Some text 1 click</p>
<p class="invisible">Some text 2 clicks</p>
<p class="invisible">Some text 3 clicks</p>
<button onClick="showMessage()">Show a message</button>
I have a problem regarding jquery selectable , I have div that contains user information , this is my div
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" ondblclick="sys.callUserProfile('+user.id+')" id="user_'+user.id+'"style="z-index: 9999;" onmousedown="sys.mouseDown()" onmouseup="sys.mouseLeave()">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="'+getUserImage(user.avatar)+'"width="100%">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >'+user.fullName+'</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
and I need the whole fc-event div to function as one , so the div with id="append_users" should contain the selectable class and the div with class fc-event should be considered as selection , I tried like this
( "#append_users" ).selectable();
but all childs take the ui-selectee class and it doesn't function at all, so what I want to do is the div with class fc-event should be considered as one, I hope i am clear, anyone please help
The documentation doesn't make it hugely clear, but from looking at the code and descriptions of the demos on the jQueryUI website (http://jqueryui.com/selectable/) it can be seen that the element you execute the "selectable" command against is intended to the container for the things you want to be selectable. It will automatically make all the child elements of that element into things which can be selectable. This is logical because generally you'd want to have several selectable items in a list and be able choose one or more items to select.
So if you want your "append_users" element to be selectable, you have to make the parent of that element the target of your "selectable" command. You haven't shown what the parent is, so for the purpose of example I'm going to assume it's just another <div>:
HTML:
<div id="selectable">
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" id="user_1" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="1" id="user_1_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="https://i.imgur.com/db4KgSp.png" width="100px">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >user.fullName</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">user.employee_id</p>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$("#selectable").selectable();
See http://jsfiddle.net/s6Lmy70b/2/ for a working demonstration.
(N.B. This is using very slightly adjusted markup compared to yours, just for demonstration and to make it easier to get it working, but the principle is the same regardless of the exact content being displayed)