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.
Related
I'm want to select the words "Dashboard", "Attendance", "Marcum" and "Results" and set their color to White.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="fpstartwrap">
<div class="fpstart">
<div class="iconset">
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net" title="Dashboard"
alt="Dashboard" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-home"></i>
</div>
Dashboard
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/attendance"
title="Attendance" alt="Attendance" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-user-times"></i>
</div>
Attendance
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/q" title="Marcum"
alt="Marcum" target="_parent">
<div class="navicon" align="center">
<i class="fa fa-3x fa-calculator"></i>
</div>
Marcum
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/user/" title="Results"
alt="Results" target="_self">
<div class="navicon" align="center">
<i class="fa fa-3x fa-id-card-o"></i>
</div>
Results
</a>
</div>
</div>
</div>
</div>
<div class="collapse" id="fpslider">
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net">Rafiee.net</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/attendance">Attendance</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/dailybonus">Daily Bonus</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/q">Marcum Calculator</a>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
I tried to do it by :
div a[role="button"] {
color: white;
}
However, since I have other elements with role "Button", they are all changed to white which is undesirable in my case. I only need to target these four words. Is it possible? Any help is appreciated in advance.
Thanks
Use the parent elements in the selector to be more specific:
.fpstartwrap > .fpstart > .iconset > div.btn.btn-secondary a[role="button"] {
color: white;
}
Or simply apply a class to those buttons which you only use for these four buttons and use that class in your selector.
To get a CSS selector to only act on a button inside a div use > this tells CSS to get all elements that have a parent div and role=button:
div > a[role="button"] {
color: white;
}
if you really need to be specific then you can even just add a special class to the buttons you wanna act on like
<a class="whiteButton" role="button" href="https://rafiee.net/attendance" title="Attendance" alt="Attendance" target="_blank">
Then for the CSS you can do
.whiteButton {
}
or if only whiteButton inside of div's
div > .whiteButton {
}
or even
div > a > .whiteButton {
}
div > a[role="button"]{
color: white;
background: blue;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="fpstartwrap">
<div class="fpstart">
<div class="iconset">
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net" title="Dashboard"
alt="Dashboard" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-home"></i>
</div>
Dashboard
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/attendance"
title="Attendance" alt="Attendance" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-user-times"></i>
</div>
Attendance
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/q" title="Marcum"
alt="Marcum" target="_parent">
<div class="navicon" align="center">
<i class="fa fa-3x fa-calculator"></i>
</div>
Marcum
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/user/" title="Results"
alt="Results" target="_self">
<div class="navicon" align="center">
<i class="fa fa-3x fa-id-card-o"></i>
</div>
Results
</a>
</div>
</div>
</div>
</div>
<div class="collapse" id="fpslider">
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net">Rafiee.net</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/attendance">Attendance</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/dailybonus">Daily Bonus</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/q">Marcum Calculator</a>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
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 am playing around with WebRTC and I want to create a video chat. I am after a layout that looks something like this:
Using best of my knowledge, I've put together the following:
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><i class="fa fa-commenting" aria-hidden="true"></i> My Chat App</a>
<button class="navbar-toggle" data-target="#navbar-main" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
<i class="fa fa-question-circle" aria-hidden="true"></i> Help
</li>
<li>
<i class="fa fa-info-circle" aria-hidden="true"></i> About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<i class="fa fa-users" aria-hidden="true"></i> 1 Online
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-ld-4 col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-body pad5">
<div style="height: 320px; background-color: #000;">
</div>
</div>
<div class="panel-footer">
Them
</div>
</div>
<div class="panel panel-default">
<div class="panel-body pad5">
<div style="height: 320px; background-color: #000;">
</div>
</div>
<div class="panel-footer">
You
</div>
</div>
</div>
<div class="col-ld-8 col-md-8 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<p><b>You</b>: Hello</p>
<p><b>Them</b>: Hi</p>
</div>
<div class="panel-footer custom-panel-footer pad5">
<div class="input-group">
<span class="input-group-addon" id="message-icon">
<i class="fa fa-commenting" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" placeholder="Type your message here ..." aria-describedby="message-icon">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<i class="fa fa-paper-plane" aria-hidden="true"></i> Send
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
This does not render quite right, here's a preview:
How can I implement the layout like my sketch? I just want "My" and "Their" video div to keep the 4:3 aspect ratio and scale with available width.
When the window resizes, I want the whole layout to shrink whilst keeping the aspect ratio of the video divs. But on a larger monitor, if there's space, i want the video divs to scale up whilst maintaining the aspect ratio.
Any ideas?
I've a bootstrap button group which includes a text between the buttons:
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group">
<div class="btn btn-primary">
<i class="fa fa-chevron-left"></i>
</div>
<div>2016</div>
<div class="btn btn-primary">
<i class="fa fa-chevron-right"></i>
</div>
</div>
</div>
</div>
</div>
How to avoid the line breaks, such that the buttons and the text are aligned in one line?
You need to display them in-line like:
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group">
<div class="btn btn-primary" style="display: inline-block;">
<i class="fa fa-chevron-left"></i>
</div>
<div style="display: inline-block;">2016</div>
<div class="btn btn-primary" style="display: inline-block;">
<i class="fa fa-chevron-right"></i>
</div>
</div>
</div>
</div>
</div>
Edit: Alternatively, as Turnip proposed in his answer, you can change the elements from divs to to another kind of element that is naturally displayed in-line. Either way, you will reach the same result.
divs are block elements. Change your buttons to <a>s and the text div to a <span> or any other inline/inline-block element.
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="btn-group">
<a class="btn btn-primary">
<i class="fa fa-chevron-left"></i>
</a>
<span>2016</span>
<a class="btn btn-primary">
<i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
I have a project where a user stores product information and creates articles. On my home view i have two divs. The one on the left is a ng-repeat which retrieves the articles of the products. The one on the right is a ng-repeat also, which shows my product list.
My problem is when i GET my articles, the right one div, breaks the line and shows up on my last result of my article.
this is the position of the right div i want
this is the position of the right div i dont want
here is my home view:
<!DOCTYPE html>
<html>
<head>
<style>
.col-md-4 {
float: right;
}
</style>
</head>
<body>
<br/>
<br/>
<div class="container" ng-controller="HomeCtrl">
<br/>
<div class="row">
<div class="col-md-8" ng-repeat="article in articles" >
<div class="panel panel-white post panel-shadow">
<div class="post-heading">
<div class="pull-left meta">
<div class="title h5">
<b>{{article.title}}</b>
</div><br/>
<ul class="list-unstyled list-inline">
<li><i class="glyphicon glyphicon-calendar"></i> {{article.published}}</li>
<li><i class="glyphicon glyphicon-user"></i> {{article._creatorname}}</li>
<li><button class="btn btn-danger btn-xs" ng-click="remove(article._id)"><span class="glyphicon glyphicon-trash"></span></button></li>
</ul>
</div>
</div>
<div class="post-description">
<p>{{article.body}}</p>
</div>
<div class="post-footer">
<div class="input-group">
<input type="text" id="userComment" ng-model="comment" class="form-control input-sm chat-input" placeholder="Write your message here..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" ng-click="addComment(article._id, comment)"><span class="glyphicon glyphicon-comment"></span> Add Comment</button>
</span>
</div>
<ul class="comments-list">
<li class="comment" ng-repeat="comment in article.comments">
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{comment._commentorname}}</h4>
<h5 class="time">{{comment.date}}</h5>
<div class="pull-right meta">
<button class="btn btn-danger btn-xs" ng-click="removeComment(article._id, comment._id)"><span class="glyphicon glyphicon-remove"></span> Remove</button>
</div>
</div>
<p style="width: 350px;">{{comment.content}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<section class="panel panel-default mail-categories">
<div class="panel-heading">
<strong><span class="fa fa-th"></span>
Resources</strong>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="resource in resources">
{{resource.name}}, Model Number: {{resource.modelno}}
</li>
</ul>
</section>
</div>
</div>
</div>
</body>
</html>