i want to make notifications (li) scrollable when i put the li of notification in one div class="notification-body" it doesn't give me the result i want as bellow on the picture.
<li ng-if="vm.logged">
<div class="dropdown">
<button class="btn-noti" id="dropdownNoti" ng-click="vm.showDropdown($event)">
<span class="fa fa-bell-o"></span>
</button>
<ul class="dropdown-menu notification-menu" aria-labelledby="dropdownNoti">
<div class="col-md-12 col-xs-12" style="border-bottom: #655771;border-bottom-style: double;">
<h5 class="notification-title"><i class="fa fa-bell"></i> Notifications</h5>
<a class="mark-all" ng-click="vm.markAllRead()">Mark all as read</a>
</div>
<div class="notification-body">
<li ng-if="!vm.notifications.length"><a>You have no new notification yet.</a></li>
<li class="notification-type" ng-repeat="notification in vm.notifications" ng-style="{'background-color': notification.unread==false? 'white' : '#f5f5f5'}" style="border-bottom-style: ridge;">
<a ui-sref="profile({id: post.user.id})">{{notification.description}}
<h6><i class="fa fa-clock-o"></i> {{vm.timeOf(notification)}}</h6>
</a>
<a class="mark-as btn btn-default " ng-click="vm.markAsRead(notification)" data-toggle="popover" data-trigger="hover" data-content="as read" ng-class="{'add-white' : notification.unread==true }" ></a>
</li>
</div>
</ul>
</div>
</li>
By setting Height and Width property of not-body style you can achive it.
<div class="not-body" style="height:200px; width:100px; overflow:scroll;">
Try doing it. I think it'll work as you want.
Related
I am using Bulma and I made an hoverable dropdown, but the dropdown content exceeds the whole page content. How can I make it fixed with larger width and also responsive?
For now it looks like this:
Html code:
<div class="navbar-end">
<div class="dropdown is-hoverable navbar-item ">
<div class="dropdown-trigger">
<button aria-controls="dropdown-menu6" aria-haspopup="true" class="button is-primary">
<strong>Account</strong>
</button>
</div>
<div class="dropdown-menu has-text-centered" id="dropdown-menu6" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>Acces your quizbee account, test your skills and have fun. </p>
<hr class="dropdown-divider">
<div class="buttons is-centered">
<button class="button is-primary is-rounded">Register</button>
<button class="button is-light is-rounded">Login</button>
</div>
</div>
</div>
</div>
</div>
You just need to set a position of dropdown. Add class is-right
<div class="dropdown is-right is-active">
I need some advice to make bootstrap panel header responsive. Panel has title with several buttons on the right side. It looks fine in large screen but looks ugly when browser size is small.
My full code here jsfiddle.
.panel {
margin: 15px;
}
.panel-title {
padding-top: 7px;
font-size: 20px;
}
.mr-10 {
margin-right: 10px;
}
<div class="panel panel-success panel-br-4">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left">
<i class="fa fa-file-text" aria-hidden="true"></i> <span>Documents</span>
</h4>
<a id="document-сreate-btn" class="btn btn-success pull-right">
<i class="fa fa-plus-circle"></i>
<span>Create new document</span>
</a>
<a class="btn btn-warning pull-right mr-10">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</a>
<a class="btn btn-warning pull-right mr-10">
<span>Save new order</span>
</a>
</div>
<div class="panel-body">Some content</div>
</div>
When all items cannot fit in one line, I want to make header as in the next picture:
Is such things makes by flexbox or bootstrap grid system? Whats the better way? I will appreciate any examples! :)
This is just a quick example of how to use Bootstrap grid system. It's not gonna be as perfect as you want but it will give you an introduction to grid systems. Also, don't forget to read about media queries.
<div class="panel panel-success panel-br-4">
<div class="panel-heading">
<div class="row">
<div class="col-sm-6">
<h4 class="panel-title">
<i class="fa fa-file-text" aria-hidden="true"></i>
<span>Documents</span>
</h4>
</div>
<div class="col-sm-3" style="display: flex">
<a class="btn btn-warning mr-10">
<span>Save new order</span>
</a>
<a class="btn btn-warning">
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</a>
</div>
<div class="col-sm-3">
<a id="document-сreate-btn" class="btn btn-success mr-10" data-url="">
<i class="fa fa-plus-circle"></i>
<span>Create new document</span>
</a>
</div>
</div>
</div>
<div class="panel-body">Some content</div>
I'm using bootstrap for an easy responsive design. However, I moved computer today and was going to work on my project some more and my design is acting up (See attached figures). I have tested to see if I changed width, would it act up; no it did not. I then played with the height of my browsers to see if it did and yes it did act up and displayed improperly. I am fairly new-ish to bootstrap, but I am not sure what is causing this or could be on something on my computer end. I used Chrome for both viewing. I also tested with Edge and it displayed properly.
Look top-right for view port
This is what it should look like
This is what I get when changing resolution
At request, another part of the code which is loaded via JS.
<body>
<div id="interfaceNaviation" style="position:relative;top:0;left:0;right:0;background-color:green;">
<div class="navBar"><span class="navLink">Home</span> <span class="navLink">Presentation</span> <span class="navLink">Schedules</span> <span class="navLink">Display</span></div>
<br>
<div id="loginInfo">
<button id="signinButton" type="button" class="btn btn-primary btn-fixed-width navbar-btn" style="visibility: visible; display: inline;">
Sign in <i class="fa fa-white fa-sign-in icon-right"></i>
</button>
<a href="javascript:void(0);" id="signoutButton" class="navbar-nav" style="visibility: hidden; display: none;">
<span>Sign Out</span>
<i class="fa fa-blue-custom fa-sign-out"></i>
</a>
<div style="display:inline;" id="signinText">Authorize requests using OAuth 2.0:</div>
</div>
</div>
<div id="pres_interface" class="container-fluid" style="height:90%;">
<div id="pres_options" class="row" style="height:5%;">
<div id="add-placeholder" class="col-xs-2"><button id="btn_add-placeholder" class="btn btn-success fa-1.2x">Add Placeholder</button></div>
</div>
<!--style="left:0px;width:20%;height:100%;position:relative;"-->
<div id="pres_editor_panel" class="row" style="height:95%">
<div class="col-xs-2">
<div id="editor_display">
<div id="placeholderContainer"><span class="header fa-1.2x">Placeholders</span></div>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph1">ph1 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph2">ph2 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph04">ph04 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="Test">Test <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="Test1">Test1 <i data-id="void" class="fa fa-trash-o"></i></span></li>
</div>
</div>
<!-- style="width:79.9%;height:100%" -->
<div class="col-xs-10 fa-padless-left">
<iframe id="fake_view" src="fake_view.html" style="width:100%;height:100%;border:1px solid #081D79;"></iframe>
</div>
</div>
</div>
<div id="pres_options-lower" style="background-color:purple;left:0;right:0;text-align:right;bottom:0;">
<button>Restore</button>
<button>Save</button>
<button>Publish</button>
</div>
<div id="window_mask" class="mask hidden"></div>
<div id="popup_display" class="hidden"></div>
<div id="sub_popup_display" class="hidden"></div>
<div id="sub_window_mask" class="mask hidden"></div>
</body>
This is my body code WITHOUT being edited via JS:
<body>
<div id="interfaceNaviation" style="position:relative;top:0;left:0;right:0;background-color:green;">
<div class="navBar"><span class="navLink">Home</span> <span class="navLink">Presentation</span> <span class="navLink">Schedules</span> <span class="navLink">Display</span></div>
<br /><div id="loginInfo">
<button id="signinButton" type="button" class="btn btn-primary btn-fixed-width navbar-btn">
Sign in <i class="fa fa-white fa-sign-in icon-right"></i>
</button>
<a href="javascript:void(0);" id="signoutButton" class="navbar-nav">
<span>Sign Out</span>
<i class="fa fa-blue-custom fa-sign-out"></i>
</a>
<div style="display:inline;" id="signinText"></div>
</div>
</div>
<div id="pres_interface" class="container-fluid" style="height:90%;" >
<div id="pres_options" class="row" style="height:5%;">
<div id="add-placeholder" class="col-xs-2"><button id="btn_add-placeholder" class="btn btn-success fa-1.2x">Add Placeholder</button></div>
</div>
<!--style="left:0px;width:20%;height:100%;position:relative;"-->
<div id="pres_editor_panel" class="row" style="height:95%">
<div class="col-xs-2">
<div id="editor_display" >
</div>
</div>
<!-- style="width:79.9%;height:100%" -->
<div class="col-xs-10 fa-padless-left">
<iframe id="fake_view" src="fake_view.html" style="width:100%;height:100%;border:1px solid #081D79;" ></iframe>
</div>
</div>
</div>
<div id="pres_options-lower" style="background-color:purple;left:0;right:0;text-align:right;bottom:0;">
<button>Restore</button>
<button>Save</button>
<button>Publish</button>
</div>
<div id="window_mask" class="mask hidden"></div>
<div id="popup_display" class="hidden"></div>
<div id="sub_popup_display" class="hidden"></div>
<div id="sub_window_mask" class="mask hidden"></div>
</body>
Thanks for any help! I am stumped at this right now.
I'm currently using 2 Font Awesome icons. The problem is that I want to add text under each one that align with these icons. The problem is that the text is centered on the page but not under the corresponding icons.
Code:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Title</h1>
<p class="intro-text">description</p>
<a href="#about" class="btn btn-circle page-scroll btn-lg">
<i class="fa fa-angle-double-down animated"></i>
</a>
<a href="#contact" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>About Contact
</div>
I think this is what you want to do. Here is the fiddle:
http://jsfiddle.net/plushyObject/02s7wnm8/
<div class="col-md-8 col-md-offset-2 text-center outline">
<h1 class="brand-heading">Title</h1>
<p class="intro-text">description</p>
<div class="col-sm-4 outline">
<a href="#about" class="btn btn-circle page-scroll btn-lg outline">
<i class="fa fa-angle-double-down fa-fw"></i>
</a>
<p class="outline">
Text is centered by 'text-center' class inherited from first
column.
</p>
</div>
</div>
If you text-align the parent element, it will be inherited by the picture.
CSS
.container {
text-align: center;
}
Line it up using an HTML <table>, and style it with CSS. That way it will stay on top of the icons correctly.
http://jsfiddle.net/vd6smL75/
I've got the following problem:
I have two circles that are put one on top of the other. I would like them next to each other. Here is the HTML for the above picture:
<div class="col-lg-6">
<div class="page-scroll" style="text-align:center !important;" id="arrow2">
<a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
</a>
</div>
<div class="page-scroll" style="text-align:center !important;">
<a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>
I have followed the following link and get the following:
Here is my HTML for this:
<div class="col-lg-6">
<div class="page-scroll" style="text-align:center !important;float:left;" id="arrow2">
<a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
</a>
</div>
<div class="page-scroll" style="text-align:center !important;float:left;">
<a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>
So my question is how can I get these two buttons next to each other but in the middle of the text block?
I would put them both in the same div, set the style of each to block and then your text-align center will affect them. Also you should probably take the float left off, because that is sending them to the left of the page.
The winning answer was:
<div style="display: inline-block; margin-left: auto; margin-right: auto;">
<div class="page-scroll" style="text-align:center !important;float:left;padding-right:2%" id="arrow2">
<a href="#feature2" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-down animated"></i>
</a>
</div>
<div class="page-scroll" style="text-align:center !important;float:left;" id="arrow4">
<a href="#intro" class="btn btn-circle" style="border: 4px solid black !important;color:black">
<i style="font-weight:bold" class="fa fa-angle-double-up animated"></i>
</a>
</div>
</div>
Put both of your icons in the same div. They were stacking on top of each other before because you had them in separate divs. After that, you can text-align: center; for the parent div which holds them both and that should work.
Something like this for illustration:
<div class="col-md-6">
<div class="page-scroll text-center">
<i class='fa fa-angle-double-up'></i>
<i class='fa fa-angle-double-down'></i>
</div>
</div>
I just tested this in a bootstrap project im working on it worked for me as you desired