I am trying to remove the border that creates the panels Body but having some issues finding it.
Here is the code for my panel:
<div class="panel">
<div class="panel-heading"> <span class="panel-title"><i class="icon-user"></i> Training Team</span><button type="button" name="addProjectMember" class="btn btn-mini pull-right"><i class="icon-plus"></i> Add Project Member</button></div>
<div name="trainingTeamBody" style="display:none;" class="panel-body">
<span name="teamError"><br><div class="alert alert-warning"><center>No Project Members Assigned</center></div></span>
<table name="teamTable" class="table table-hover" style="display: none;">
<thead>
<tr>
<th><small>Member</small></th>
<th><small>Role</small></th>
<th><small>Supervisor</small></th>
<th><small>Date Assigned</small></th>
<th><small>Who Assigned</small></th>
<th><small>Action</small></th>
</tr>
</thead>
<tbody name="teamTableResults"></tbody>
</table>
</div>
</div>
In the image above, All I would like its the gray bar which would be what I'd consider to be the heading. If there are no results to show, I simply want the bar to appear without the outline of the body.
As a test, I removed the body completely from the code but the border was still there.
Is there a part of the panels CSS that is causing this that I can overwrite?
This is for Panels in Bootstrap 2 which I did by using the following CSS:
panel {
padding: 15px;
margin-bottom: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-heading {
padding: 10px 15px;
margin: -15px -15px 15px;
font-size: 17.5px;
font-weight: 500;
background-color: #f5f5f5;
border-bottom: 1px solid #dddddd;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
.panel-footer {
padding: 10px 15px;
margin: 15px -15px -15px;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-primary {
border-color: #428bca;
}
.panel-primary .panel-heading {
color: #ffffff;
background-color: #428bca;
border-color: #428bca;
}
Here you go - http://jsfiddle.net/AndrewL32/9ema30gx/2/
.panel {
border: 0 !important;
}
Hope that helps :)
Related
I'm trying to get my the background color on my search glyph to take up the full box. Ideally, it should look like this.
However, it currently looks like this.
I'm not sure what's going on.
Here's my html (I'm using Bootstrap).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" placeholder="Search by user name, member types, genres..." />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
Edited to add my CSS:
#custom-search-input{
padding: 3px;
border: solid 1px #E4E4E4;
border-radius: 6px;
background-color: #fff;
height: 75%;
}
#custom-search-input input{
border: 0;
box-shadow: none;
}
.input-group-btn{
background: #E44424;
}
#custom-search-input button{
margin: 2px 0 0 0;
background: #E44424;
box-shadow: none;
border: 0;
color: black;
padding: 0 8px 0 10px;
border-left: solid 1px #ccc;
}
#custom-search-input button:hover{
border: 0;
box-shadow: none;
border-left: solid 1px #ccc;
}
#custom-search-input .glyphicon-search{
font-size: 23px;
}
You have padding in
#custom-search-input{
padding: 3px;
}
That's the reason.
You should instead have it on
.form-control{
padding: 3px;
}
if you need padding on input
Here's Plunker
I have a table on the webpage which I am trying to make responsive(fit to the screen size) but unfortunately the table is going out of the screen in the mobile view for some reasons. The pictorial represenation of what I want in a mobile view is:
At this moment after inspection, I am able to get the following image in a mobile view (which is going out of the screen):
The div class = "section header single" points to the 1st ROW having the "Dependents" text. The HTML code for it is:
<div class="section header single">
<div class="inter">
<!-- ko i18n:'dependents' -->Dependents<!-- /ko -->
<div class="info header-sections" data-bind="popup: {
popupId: 'info-popup',
closeOnOutsideClick: true,
vm: {title: '', message: depend_info[locale.selected_locale()]}
}"></div>
</div>
</div>
The above image is in the inspect mode and in the mobile view(in between 320px and 767px) as well and it is going out of the screen which I am trying to resolve. The CSS(mobile view) and CSS(desktop view) which I am using for the above image are-
CSS Mobile View for the 1st row containing the text "Dependents":
#media screen and (max-width: 768px)
{
.default-body .section.header.single
{
background: none !important;
background-color:#656364 !important;
border: 1px solid #bfbfbf !important;
box-shadow: none !important;
top: 0 !important;
margin-top:0px !important;
}
}
.section.header
{
position: relative;
padding: 10px 0px !important;
width: 100%;
}
.section
{
height: auto;
display: table;
}
.default-body .section.header.single {
background: url(img/section-bg-BenPal.png) repeat-x scroll 0 0 #0359a6 !important;
border: 1px solid #bfbfbf !important;
box-shadow: none !important;
top: 0 !important;
margin-top: 40px !important;}
CSS Desktop View for the 1st row containing the text "Dependents":
.section.header.single {
top: 0;
}
.default-body .section.header {
background-color: #0a2f73;
border: 1px solid #0a2f73;
}
.section.header {
position: relative;
top: 20px;
padding: 10px 0px !important;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
width: 100%;
}
.section.single {
margin-top: 0px;
}
.section {
box-shadow: 0 2px 3px #CCCCCC;
-moz-box-shadow: 0 2px 3px #CCCCCC;
-webkit-box-shadow: 0 2px 3px #CCCCCC;
width: 100%;
height: auto;
padding: 10px 0px;
display: table;
margin-top: 20px;
}
My task is to make the entire table fit to the mobile screen. I have tried using width: auto or 100% but still the table is going out of the screen for some reasons. In the parent classes as well, I have changed the width to 100% or auto but still the table is going out of the screen.
In order to make the things more clear, I am including the HTML and CSS codes for the content beneath the "Dependents" text row:
The HTML code for the content beneath the Dependents row is:
<div class="section single">
<div class="inter">
<table cellspacing="0" cellpadding="0" class="table title">
<tbody><tr>
<td class="cell1"><!-- ko i18n:'dependents.name' -->Name<!-- /ko --></td>
<td class="cell2"><!-- ko i18n:'dependents.type' -->Type<!-- /ko --></td>
<td class="cell3"><!-- ko i18n:'dependents.status' -->Status<!-- /ko --></td>
<td class="cell4 last"></td>
</tr>
</tbody><tbody data-bind="foreach: dependents"></tbody>
</table>
<!-- ko ifnot: pendingApproval || viewReadonlyBenefits-->
<table cellspacing="0" cellpadding="0" class="table">
<tbody><tr data-bind="css:{hidden: dependents().length != 0}" class=""><td colspan="3" class="cell-common"><!--ko i18n: 'dependents.no.dependent' -->There is no dependent registered in your file<!--/ko--></td></tr>
<tr>
<!-- ko if: showAddButton() --><!-- /ko -->
</tr>
</tbody></table>
<!-- /ko -->
</div>
</div>
The CSS code(Desktop view) for the content beneath the "Dependents" text row is:
.section.single {
margin-top: 0px;
}
.section {
box-shadow: 0 2px 3px #CCCCCC;
-moz-box-shadow: 0 2px 3px #CCCCCC;
-webkit-box-shadow: 0 2px 3px #CCCCCC;
width: 100%;
height: auto;
padding: 10px 0px;
display: table;
margin-top: 20px;
}
.section {
border-top: 0;
border-left: 1px solid #aecaea;
border-right: 1px solid #aecaea;
border-bottom: 1px solid #aecaea;
box-shadow: 0 2px 3px #CCCCCC !important;
-moz-box-shadow: 0 2px 3px #CCCCCC !important;
-webkit-box-shadow: 0 2px 3px #CCCCCC !important;
background-color: #fff;
}
I am also including the snapshot of the webpage corresponding to above HTML and CSS codes::
The CSS code for the mobile view corresponding to the content beneath the "Dependents" text row is:
#media screen and (max-width: 767px) and (min-width: 320px)
.section.single {
margin-top: 0px;
background-color: #EBEBEB;
}
.section.single {
margin-top: 0px;
}
.section {
box-shadow: 0 2px 3px #CCCCCC;
-moz-box-shadow: 0 2px 3px #CCCCCC;
-webkit-box-shadow: 0 2px 3px #CCCCCC;
width: 100%;
height: auto;
padding: 10px 0px;
display: table;
margin-top: 20px;
}
.section {
border-top: 0;
border-left: 1px solid #aecaea;
border-right: 1px solid #aecaea;
border-bottom: 1px solid #aecaea;
box-shadow: 0 2px 3px #CCCCCC !important;
-moz-box-shadow: 0 2px 3px #CCCCCC !important;
-webkit-box-shadow: 0 2px 3px #CCCCCC !important;
background-color: #fff;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to show a coloured rectangle in a table and make it look nice, but I'm terrible at HTML / CSS.
This is what I have (and it looks like garbage):
<table>
<tr>
<td>
#2E21FF <span style="background-color: #2E21FF;border-width=1px;border-style:solid;border-color:rgb(204,204,204);padding:0;margin:0;"> </span>
</td>
</tr>
</table>
This minicolor demo has a nice swatch in the input, but I can't seem to even come close to it:
http://labs.abeautifulsite.net/jquery-minicolors/
Fiddle:
https://jsfiddle.net/Kieveli/9hjm9Lkf/
Note that the td is styled differently with a class color-box and all the colors are then separately handled with their classes, giving you re-usability of code and simple implementation.
.color-box span {
border: 1px solid rgb(204, 204, 204);
padding: 2px;
padding-left: 25px;
margin: 0px;
margin-right: 10px;
border-radius: 3px;
}
.color-box {
border: 1px #aaa solid;
padding: 6px;
padding-right: 100px;
border-radius: 3px;
-moz-box-shadow: inset 0 0 2px 0 #888;
-webkit-box-shadow: inset 0 0 2px 0 #888;
box-shadow: inset 0 0 1px 0 #888;
}
.blue-box {
background-color: #0088cc;
}
.red-box {
background-color: #ff6161;
}
.green-box {
background-color: #70c24a;
}
.yellow-box {
background-color: #e0e03e;
}
<table>
<tr>
<td class="color-box">
<span class="blue-box"></span> #0088cc
</td>
<td class="color-box">
<span class="yellow-box"></span> #e0e03e
</td>
</tr>
<tr>
<td class="color-box">
<span class="green-box"></span> #70c24a
</td>
<td class="color-box">
<span class="red-box"></span> #ff6161
</td>
</tr>
</table>
Does this give you a start?
https://jsfiddle.net/9hjm9Lkf/1/
td {
border: 1px solid #ccc;
background-color: #efefef;
padding: 5px 6px 5px 10px;
border-radius: 5px;
font-family: calibri;
color: #777;
}
td span {
background-color: #716bc7;
border-left=1px solid #ccc;
width: 20px;
height: 100%;
display: inline-block;
border-radius: 5px;
}
you can find many examples in this page : css tricks
Here, an example with a square and a triangle :
.square {
height: 150px;
width: 150px;
background-color: #0074d9;
border-radius: 80px;
margin-bottom: 30px;
float: left;
margin-right: 20px;
border-radius: 5px;
}
.triangle {
margin-left: 4.5cm;
height: 0px;
width: 0px;
border-left: 100px solid #0074d9;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-top: 100px solid transparent;
}
<h2>Just some shapes : </h2>
<div class="square"></div>
<div class="triangle"></div>
Below is an example how to create a coloured rectangle in a table.
td {
border:solid thick darkblue; border-radius: 1em;
border-width:3px; padding-left:9px; padding-top:6px;
padding-bottom:6px; margin:2px; width:980px;
}
<table>
<tr>
<td
<span "background":#ff0000;
width:200px;
height:100px;
display: inline-block></span>;
</td>
</tr>
While building a page, I encountered a problem i couldn't explain:
The first div in a sidebar has a weird break above
Second picture, showing that the top div in sidebar (template-sidebar-payment) doesn't actually contain that gap.
I had a margin appear from nowhere, without it being set anywhere (I've searched broad and wide).
#template-sidebar {
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element {
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment {
border-top: 0;
!important
}
#template-sidebar-rules {
border-bottom: 0;
!important
}
<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>
Please note, that the reason for making this a table-cell is because I want the sidebar to scale along the (right hand side) content as it expands in length.
As for now, I tried removing certain things, adding display: blocks etc. but nothing helped.
If any more code is needed (I guess there might be a case where te problem could lie somewhere else?) please ask in comments and I will be happy to provide.
we need live demo for inspecting this situation. but i think setting vertical align to sidebar will solve your problem.
#template-sidebar {
vertical-align:top;
}
I think it's the margin from the hr. Add a margin-top: 0 to it:
#template-sidebar{
display: table-cell;
width: 200px;
padding-right: 15px;
height: 626px;
background: #FFF;
border-right: 7px solid #fec30d;
}
.sidebar-element{
height: 200px;
border-top: 10px solid #ffffff;
border-bottom: 10px solid #ffffff;
}
.sidebar-element hr {
border: none;
height: 1px;
margin-top: 0;
color: #c6c6c6;
background-color: #c6c6c6;
/*border: 0.5px solid #c6c6c6;*/
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
}
.sidebar-element h4 {
padding-top: 10px;
}
#template-sidebar-payment{
border-top: 0; !important
}
#template-sidebar-rules{
border-bottom: 0; !important
}
<div id="template-sidebar">
<div id="template-sidebar-payment" class="sidebar-element">
<hr noshade/>
<h4>Sposoby płatności</h4>
</div>
<div id="template-sidebar-delivery" class="sidebar-element">
<hr noshade/>
<h4>Sposoby dostawy</h4>
</div>
<div id="template-sidebar-rules" class="sidebar-element">
<hr noshade/>
<h4>Regulamin</h4>
</div>
</div>
The only issue I see, is the padding-right.
Attempt altering padding-right from 15px to 5px and see if that changes anything.
EDIT: Saw your comment. See below.
It probably origins from the
.sidebar-element h4 {
padding-top: 10px;
}
part of your style sheet.
The problem is that when I resize the window to small size (mobile) it looks fine, but when i revert it to large the canvas extends outside its parent column.
Fiddle
I am using bootstrap 3.3.
But i have to tell that,no problem with other boxes, it doesn't go out of boxes expect this graph
.ibox-title {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #ffffff;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 4px 0px 0;
color: inherit;
margin-bottom: 0;
padding: 14px 15px 7px;
height: 48px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
canvas {
background: pink;
}
<div class="row">
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-content" style="border-radius: 10px;">
<div>
<h3 class="font-bold no-margins">
Statistics Graph
</h3>
</div>
<div class="m-t-sm">
<div class="row">
<div class="col-md-12">
<div>
<canvas id="lineChart" height="114"></canvas>
</div>
</div>
</div>
</div>
<div class="m-t-md">
<small class="pull-right">
<i class="fa fa-clock-o"> </i>
Update on 16.07.2015
</small>
<small>
<strong>Analysis of sales:</strong> The value has been changed over time,sdasdas as been changed over time,sdasdas
</small>
</div>
</div>
</div>
</div>
You probably have set only #media for mobile, so when u resize back to "normal" view it doesn't find a #media for normal view and no rules is overriden.
You should do something like this:
div.try {width:400px;border:1px solid #000;height:300px;}
#media (max-width:400px) {
div.try {width:150px;}
}
#media (min-width:401px) {
div.try {width:400px;}
}
<div class="try"></div>
Canvas is not being resized dinamically so you can try with:
canvas {
width: 100%;
height: auto;
}
canvas {
width: 100%;
height: auto;
}
.ibox-title {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #ffffff;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 4px 0px 0;
color: inherit;
margin-bottom: 0;
padding: 14px 15px 7px;
height: 48px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
<div class="row">
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-content" style="border-radius: 10px;">
<div>
<h3 class="font-bold no-margins">
Statistics Graph
</h3>
</div>
<div class="m-t-sm">
<div class="row">
<div class="col-md-12">
<div>
<canvas class="img-responsive" id="lineChart" height="114"></canvas>
</div>
</div>
</div>
</div>
<div class="m-t-md"> <small class="pull-right">
<i class="fa fa-clock-o"> </i>
Update on 16.07.2015
</small>
<small>
<strong>Analysis of sales:</strong> The value has been changed over time,sdasdas as been changed over time,sdasdas
</small>
</div>
</div>
</div>
</div>
Actually, issue is this when the page is loaded the graph is being created with particular height and width but there is no such option when you resize the window. SO, we have to call redraw() or draw() on $(window).resize() function.
Note: Draw() and redraw() function depends on chart library you are using. First, check which function is to recreate the chart then call it.
But, most of the chart library have redraw function.
I can tell you more if mention the jquery plugin name for the charts.