I am able to make input field with icon but I need the input field should be rounded corner ![enter image description here][1] and horizontally center width smaller as show in image .
please check the below image
Please check my search bar is smaller in width and horizontally centered having rounded corner .can we make this in ionic
here is my code
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
</ion-content>
The answer is simple
first you need to put all you need inside ion-item tag and then you need some css properties to shape that ion-item
Example
HTML CODE :
<ion-item class="roundedInput">
<ion-label position="floating">Rounded Input</ion-label>
<ion-input></ion-input>
</ion-item>
CSS Code :
.roundedInput {
--border-color: var(--ion-color-medium-shade);
--border-radius: 3px;
--border-width: 1px;
--box-shadow: 2px gray;
--highlight-height: 0;
--background: #f8f9fa;
}
to take control of the item behavior you need some more CSS Codes
like this :
.roundedInput.ion-invalid.item-has-focus {
--border-color: var(--ion-color-danger-shade);
}
.roundedInput.ion-valid.item-has-focus {
--border-color: var(--ion-color-success-shade);
}
.roundedInput.ion-invalid.ion-dirty {
--border-color: var(--ion-color-danger-shade);
}
.roundedInput.ion-valid.ion-dirty {
--border-color: var(--ion-color-success-shade);
}
the label with floating position will increase the input height
if its not what you like , all you need to do is just change the position to static or with no position property.
or you can just use placeholder
Why not just set some attributes to your outer div and your inner label in your .css like
div#container{width: 300px; margin-left: auto; margin-right: auto;}
label#rounded{border-radius: 15px;}
Here's the pen. Is this what you're looking for?
Related
I would like to display the hidden button content in my card when hovering over it. I am currently attempting to use the adjacent sibling selector to do this, by connecting a hover element (the card) to another element (the hidden button) to achieve this. The code is is as follows
<div class="container">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<div class="card-white">
<div class="secret-button">
<img src="images/approve.svg" id="i">Hidden button
</div>
<img src="images/chococake2.jpg"
style="width: 245px; height: 191px;"
/>
<h3>Recipe</h3>
<h4>German Chocolate Cake</h4>
<p>5/5</p>
<p>reviews</p>
<p>make it again</p>
</div>
</div>
My hidden button is currently set as display none on my css purposely, but I would like to then make it visible by doing the below
.card-white:hover{
background-color: #8C8C8C;
border: 5px solid green;
text-decoration: none;
}
.secret-button{
display: none;
}
.card-white:hover + .secret-button{
display: block;
}
The issue is that despite my attempt above, this is not changing my html page. The plus button appears as orange on my sublime text, which suggests to me it does not like or recognize the selector as valid css code for some reason.
I think the main problem is that I may need to restructure the html/css as these two elements may not be proper siblings, but just want to know how best to go about this.
Is there any way to keep dropdown triangle (▼) displayed for multiple mode of ui-select?
<div ui-select multiple ng-model="selectedItems" class="form-control">
<div ui-select-match>
<span>{{$item.name}}</span>
</div>
<div ui-select-choices repeat="item in availableItems" >
<span>{{item.name}}</span>
</div>
</div>
I managed to steal the triangle from ordinary ui-select:
<i class="caret pull-right" ng-click="$select.toggle($event)"></i>
but having difficulties displaying it properly on the ordinary place to the right. Any tips? Thanks.
The solution I got so far: reused this caret class and made it displayed on top of the component using style position: relative; left: -1.5em;, placing the element right after ui-select (placing it straight inside ui-select is not possible because angularjs replaces it's content with own templates - so my caret comes after but then shifted left)
Also, I had to attach ng-click which does $select.toggle($event) to this caret element. As long as the $select is not available out of scope of ui-select, I had to introduce outer controller which includes both ui-select and caret elements - and simply assign $select a field within it using ng-init on ui-select.
So it looks something like:
<div ui-select multiple ng-model="selectedItems" class="form-control" ng-init="mySelect = $select">
<div ui-select-match>
<span>{{$item.name}}</span>
</div>
<div ui-select-choices repeat="item in availableItems" >
<span>{{item.name}}</span>
</div>
</div>
<span style="position: relative; left: -1.5em;" class="caret"
ng-click="mySelect.toggle($event)></span>
▼ is displayed only when dropdown is not opened. Also, clicking it requires some pixel-hunting (can be mitigated by putting the caret into a div that spreads vertical). So it's a partial solution.
The best approach I worked out is a scalable background SVG image applied using this CSS:
.select2-search-field {
width: 100%;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 13 6' fill='gray'><polygon points='0 1 8 1 4 5'></polygon></svg>");
background-repeat: no-repeat;
background-position-y: center;
background-position-x: right;
}
I created a dropdown menu that opens when you click on a text box, and then when you chose a string for that dropdown list, it puts it in the text box.
I would like to make that when you hover your mouse on the strings in the dropdown, they get slightly highlighted! how can I achieve this?
<div class="row">
<div class="col-xs-12 max300" uib-dropdown is-open="vm.descriptionDropdownOpen">
<textarea name="remarks" class="form-control" ng-model="vm.presence.description" ng-click="vm.toggleDescriptionDropdown()" autofocus></textarea>
<ul id="descriptionDropdown" uib-dropdown-menu>
<li ng-repeat="descr in vm.loadedDescriptions" ng-click="vm.presence.description = descr.text; vm.descriptionDropdownOpen = false;">
{{descr.text}}
</li>
</ul>
and the css to keep the dropdown aligned with the textbox:
#descriptionDropdown {
width: 100%;
line-height: 150%;
padding-left: 8px;
position: relative;
}
thank you very much
you can do something like this
#descriptionDropdown li:hover{
background-color:#eaeaea;
}
Change the color code to your desired color code.
And remove the padding from ul to avoid space around background when you hover. Instead, use padding on li
#descriptionDropdown li{
padding-left:8px;
}
You could add this css :
li:hover {
background-color: blue;
}
I have a modal window that shows a few data that also has Images which open in Blueimp gallery. The problem I have is, when the image is opened in BlueImp gallery, the image is not vertically aligned in the middle of the screen. Its either to the bottom or to the top and it depends on where I have scrolled in the modal window. I need to go to the middle of the modal window and open the gallery in which case the Lightbox looks centered. This issue doesnt happen when blueimp is used directly in the page without a modal. It appears the blueimp gallery's lightbox is centered to the whole modal height instead of the viewport height. How can I override that for blueimp inside modal windows only? Is there a css fix or js fix to override this when blueimp is used in boostrap modals?
Here is a sample of my set-up:
<div uib-modal-window="modal-window" class="modal fade" role="dialog" size="xl" index="0" animate="animate" ng-style="{'z-index': 1050 + $$topModalIndex*10, display: 'block'}" tabindex="-1" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-xl">
<div class="modal-content" uib-modal-transclude="">
<div class="lightBoxGallery">
<a ng-repeat="image in vm.ngModel" ng-href="{{::vm.imageurl(image.name)}}" data-gallery="">
<img ng-src="{{::vm.getImage(image.name)}}" class="img-responsive img-thumbnail animated fadeIn">
</a>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol> </div>
</div>
</div>
</div>
</div>
My set-up: Angular 1.5 + Bootstrap 3 + Bootstrap UI + BlueImp Gallery
UPDATE:
The problem I am having here is, my Bootstrap Modal window has overflow-y as scrollable and it has a fixed positioning:
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
And when the blueimp-gallery is opened, as a child div with fixed position, it is positioning the Div to the center of the parent's fixed position instead of center of the viewport:
.blueimp-gallery {
position: fixed;
z-index: 999999;
overflow: hidden;
background: #000;
background: rgba(0,0,0,.9);
opacity: 0;
display: none;
direction: ltr;
-ms-touch-action: none;
touch-action: none;
}
The blueimp-gallery is aligning to the middle, but I dont want it aligning to the middle of parent (modal) div. I want it aligned to the middle of viewport. For example, in my laptop, my modal has a height of 2000px where as my viewport height is a lot less like 860px. That is why the gallery lightbox is opening either to the top or bottom of the viewport unless the user is right in the middle of the modal window. If I place the blueimp-gallery directly in the body without the modal window, I dont have this issue. But in this use case, I have to place the blueimp-gallery inside a Modal window that has variable height depending on the dynamic content loaded in it.
I am still stuck on this, does anyone have a suggestion to this problem please?
The only way I was able to resolve this issue was to pull the "#blueimp-gallery" element out of the Modal Window and then insert it again as a direct child of the body element. Using Jquery, I added this code that fixed the issue:
$(document).ready(function(){
$("#blueimp-gallery").prependTo($("body"));
});
Now, after the above code, the BlueImp Gallery's fixed position is relative to the body element and therefore the height is that of the viewport. The Modal height no longer affects the BlueImp Gallery's height since it is now placed as a direct child of body element.
You should try to put the blueimp in a div with the class row and then another div with the class col-md-6 not 100% sure but it should be alligned in the middle then.
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="blueimp-gallery" class="blueimp-gallery vcenter ">
...
</div>
</div>
</div>
Edit tried it it has to have container tag above it to.
most likely this is not the sollution to getting it to the center vertically but this is worth a try i guess
ADDITION
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
create a costum tag add it in a css file and call on it.
I am trying to make a simple fade IN and fade out example in AngularJS.I need show a div with slide up or slide down or fade in fade out as we do in jquery . I have search button on header (left top button circle)**on click I show search div it is working in my plunker. My issue is to do animation...
http://plnkr.co/edit/Z5Y51werBnzM6Yl7tcTB?p=preview
Secondly I need to add z-index because it generates new layer. When I click search button **"my name " come down when search bar is open. Why?
<ion-view>
<ion-header-bar align-title="" class="bar-positive">
<div class="buttons">
<i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
</div>
<h1 class="title">Title!</h1>
<a class="button icon-right ion-chevron-right button-calm"></a>
</ion-header-bar>
<div class="list list-inset searchclass" ng-show="isdiplay">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
<ion-contend>
<div style="margin-top:50px">
my name
</div>
</ion-contend>
</ion-view>
Not trying to attack you here, but just some small feedback:
I took a look at your code and its quite messy to my likings.
your html is not correct ( you have two head tags, two body tags, two html tags?)
also you write
<ion-contend> instead of <ion-content>
and in your css z-index=999px instead of z-index: 999
but anyway here you have a plunkr doing exactly what you want it to do:
Working Plunkr
basically what I changed is the following:
To make the search bar fall over the content, you should make its position absolute and not relative.
Then I used ngClass to conditionally apply the fade-in, fade-out css3 animations depending on the state of the search bar (shown/hidden)
css snippet
/* Keyframes for the fade-in */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration: 0.5s;
-moz-animation-duration:0.5s;
animation-duration:0.5s;
}