![I want to achieve the following red circle through css. I am using jquery mobile with angular js.My code is as below.
<div data-role="page" id="p2">
<div class="ui-bar ui-bar-d "data-role="header" >
Chat
<h1> contacts </h1>
Photos
</div >
<div data-role="content" data-position="center">
<div ng-controller="TalkCtl">
<ul >
Search:
<input type="search" ng-model="searchText">
<li ng-repeat="talk in talks | filter:searchText">
{{talk.name}} </br> {{talk.text}}
</li>
</ul>
</div>
</div>
IMAGE SNAPSHOT
This can be easily done using css background-image property, coupled with positioning and z-indexing.
Related
i'm trying to force bootstrap to vertical align this col in desktop view. because it's overlaping otherwise
the mess now :
enter image description here
so the problem fix it self if i resize the windows until it reach the mobile view (it will automaticly vertical align the div.) but i want it to be like that in any windows size.
what i trying to :
enter image description here
here is the catch. i can only acsess the css on that particular div.
because it's dynamically generated. and i cant change the html part.
here is what the html looks like :
<ul class="subquestions-list questions-list checkbox-list list-unstyled">
<div class="row">
<div class="col-md-1">
<li id="javatbd736732X11537X92547SQ001" class="question-item answer-item checkbox-item">
<div class="checkbox">
<label for="answer736732X11537X92547SQ001" class="answertext"><input class="checkbox" type="checkbox" name="736732X11537X92547SQ001" id="answer736732X11537X92547SQ001" value="Y" onclick="cancelBubbleThis(event);checkconditions(this.value, this.name, this.type)"><input type="hidden" name="java736732X11537X92547SQ001" id="java736732X11537X92547SQ001" value="">Grundlagen der Informatik</label>
</div>
</li>
</div>
<div class="col-md-1">
<li id="javatbd736732X11537X92547SQ002" class="question-item answer-item checkbox-item">
<div class="checkbox"><label for="answer736732X11537X92547SQ002" class="answertext"><input class="checkbox" type="checkbox" name="736732X11537X92547SQ002" id="answer736732X11537X92547SQ002" value="Y" onclick="cancelBubbleThis(event);checkconditions(this.value, this.name, this.type)"><input type="hidden" name="java736732X11537X92547SQ002" id="java736732X11537X92547SQ002" value="">Theoretische Informatik</label></div>
</li>
</div>
</div>
</ul>
i can also acsess it with javascript using dom manipulation. but i dont think it helps that much.
please help me!
thanks!
I have created my own modals from scratch and i want to prevent scrolling in the background when a modal is open, all i can find online is stuff about bootstrap which isn't helpful to me because my code doesn't automatically call 'modal-open' so
body.modal-open{
overflow:hidden;
}
Doesn't work for me.
<div id="wrapper3">
<a class="button" href="#openModal-4">
<img class="image"src="img/Animation.png">
<p class="text">Animation</p>
</a>
</div>
<div id="openModal-4" class="modalbg">
<div class="dialog">
X
<div class="popout">
<h1>2D Animation Project</h1>
<div>
<h2>Project Brief</h2>
<a class="modalfullimg"><img src="img/Design/moodboard.png"></a>
</div>
<h2>Sketches</h2>
<a class="modalfullimg"><img src="img/Design/initialsketches.png"></a>
</div>
</div>
</div>
Can you just modify the script you wrote to add a body class like 'modal-open' so you can apply the appropriate CSS? Seems like the easiest solution, if you're making it custom anyway.
I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).
I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html?
Thanks!!
Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.
<li>
<a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
<div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">
<div class="sidebarBox">
<h2 class="sideBarHeader">Cart </h2>
<div class="sidebarContainer" ng-repeat="item in cart">
<img src="{{item.imageUrl}}" style="width:90px;height:100px;">
<div class="sidebarContent">
<p class="sidebarTitle">{{item.title}} </p>
<p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
<p class="sidebarSubtitle">Price: ${{item.price}}</p>
</div>
<p class="sidebarLine"></p>
</div>
</div>
<br>
<div class="sidebarNoScroll">
<p style="color:black;font-size:22px;">Total</p>
<p class="sidebarTotal">${{ total() }}</p>
<button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
<button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
</div>
</div>
</li>
css.
.sidebarContainer {
overflow:scroll;
height:224px;
}
.sidebarNoScroll {
overflow: hidden;
}
Wrap the container.
<div class="sidebarContainer">
<div ng-repeat="item in cart">
</div>
</div>
I have a set of data which is an array of objects. Some objects have more data than the other. But each object will display in each col-md-4 div. Therefore, the height of each div will be different based on how much data an object has.
Here is my code:
<div class="col-md-12 eventlog-info-container">
<div class="row eventlogs-single-container">
<div class="col-md-4 eventlog-1-container" ng-repeat="record in records track by $index">
<h4>Event Log {{$index}}</h4>
<ul>
<li ng-repeat="(key, value) in record">{{::key}}: {{::value}}</li>
</ul>
</div>
</div>
</div>
My question is after ng-repeat, I want to find the biggest height of the element. And then apply the biggest height to each of the element using ng-style.
I have an idea to approach that using JQuery. However, I want to use Angular to do that? Any suggestion? Anuglar is not good for DOM manipulation?
Thank you in advanced.
After I did some research yesterday. I found an open source angular directive to solve my problem - angularJS Vertilize Directive An AngularJS directive to vertically equalize a group of elements with varying heights. In other words, it dynamically makes a group of elements the same height. Thank you Chris Collins who made this directive.
<div vertilize-container class="row">
<div ng-repeat="col in columns" class="col-sm-3">
<div class="well">
<div vertilize>
<h3>{{ col.title }}</h3>
<p>{{ col.body }}</p>
</div>
</div>
</div>
</div>
This answer should get you started on the right path.
<div class="col-md-12 eventlog-info-container">
<div class="row eventlogs-single-container">
<div class="col-md-4 eventlog-1-container" ng-repeat="record in records track by $index">
<h4>Event Log {{$index}}</h4>
<ul>
<li outer-height ng-repeat="(key, value) in record">{{::key}}: {{::value}}</li>
</ul>
</div>
</div>
</div>
app.directive('outerHeight', function(){
return{
restrict:'A',
link: function(scope, element){
//using outerHeight() assumes you have jQuery
// if not using jQuery
console.log(element.outerHeight());
}
};
});
I'm trying to give a different background-color to my button when it is active. The HTML code is as below.
<div class="tabs">
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- some content -->
</div>
<div id="tab2" class="tab">
<!-- some content -->
</div>
<div id="tab3" class="tab">
<!-- some content -->
</div>
<ul class="tab-links">
<li class="active">
<a href="#tab1"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON ACTIVE</p></p></a>
</li>
<li>
<a href="#tab2"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
<li>
<a href="#tab3"><span class="numer_viti">bla bla</span>
<p class="arrow-up"><p class="cmimet_ne_vite">BUTTON</p></p></a>
</li>
</ul>
</div>
</div>
I used both this codes in my CSS files and i didn't sow nothing happened:
This is the CSS code for my project:
.cmimet_ne_vite:active
{
background:#787878;
}
.cmimet_ne_vite.active
{
background:#787878;
}
So who knows were is the problem to help me resolve it?
You have no element with both classes "cmimet_ne_vite" and "active". Instead you have a .cmimet_ne_vite element which is a descendant of your .active element, so instead of .cmimet_ne_vite.active you'll need to use:
.active .cmimet_ne_vite {
background:#787878;
}
Furthermore, you cannot wrap two <p> elements within each other. The browser will render this as two separate elements. Change:
<p class="arrow-up">
<p class="cmimet_ne_vite">BUTTON</p>
</p>
To:
<p class="arrow-up">
<span class="cmimet_ne_vite">BUTTON</span>
</p>
Or something similar.
Finally, if this element is intended to be used as a button you'll need to give it a role attribute set to "button":
<span class="cmimet_ne_vite" role="button">BUTTON</span>