Hello guys I have this code :
.fc-list-table > tbody {
display: block;
border-color: #ddd;
padding: 25px;
.fc-list-item {
display: grid;
padding: 15px 15px 15px 5px;
cursor: pointer;
border-bottom: 1px solid #000;
}
.fc-list-item:last-child {
border-bottom: none;
}
}
But not working as expected, because I want to add border to all items except the item that is before item with class fc-list-heading. Have you an idea ? I put an image where I show which items shuld contain border
Compare your code with this, and find out what you did wrong.
.fc-list-table > tbody {
display: block;
border-color: #ddd;
padding: 25px;
}
.fc-list-item {
display: grid;
padding: 15px 15px 15px 5px;
cursor: pointer;
border-bottom: 1px solid #000;
}
.fc-list-item:last-child {
border-bottom: none;
}
Related
I was writing some CSS for a very common user login form, except that when I logged in from another computer with the same browser (Firefox) and operating system (Ubuntu), some strange white borders emerged on the outside.
What's even stranger is that they tend to appear and disappear simply by resizing the window.
Because? how can this be prevented?
Thanks everyone for the help! :)
HTML:
<div class="npt nptFocus">
<span>Aa</span>
<input type="text" name="usr" placeholder="Nickname">
</div>
LESS:
// Palette
#main_color: blue;
#main: darken(saturate(#main_color, -97%), 25%);
#neutral: saturate(darken(#main_color, -25%), -25%);
#verde: #118769;
#rosso: #fe5f55;
#bianco: darken(saturate(#main_color, -40%), -45%);
#v_soft = 10%;
#v_medium = 25%;
#v_hard = 40%;
#neutral_dark: darken(#neutral, #v_soft);
#verde_dark: darken(#verde, #v_soft);
#rosso_dark: darken(#rosso, #v_hard);
#main_light: lighten(#main, #v_hard);
#main_dark: darken(#main, 8%);
#radius: 5px;
.npt {
display: table;
background: #bianco;
border-radius: #radius;
border: solid 1px #main_light;
width: 100%;
overflow: hidden;
input, span{
display: table-cell;
padding: 10px;
transition: 0.25s;
}
input {
border: none;
background: none;
border-radius: 0px;
color: #main;
width: 100%;
}
span {
border-right: solid 1px darken(#main_light, -15%);
color: darken(#main, -40%);
background: darken(#main_light, -25%);
padding-left: 15px;
padding-right: 15px;
width: 55px;
}
&.nptFocus {
border: solid 1px #neutral_dark;
span {
border-right: solid 1px #neutral_dark;
color: #bianco;
background: #neutral_dark;
}
}
}
SCREEN:
UPDATE 1: Added compiled CSS
.npt {
display: table;
background: #ebebfa;
border-radius: 5px;
border: solid 1px #a3a3a8;
width: 100%;
overflow: hidden;
}
.npt input,
.npt span {
display: table-cell;
padding: 10px;
transition: 0.25s;
}
.npt input {
border: none;
background: none;
border-radius: 0px;
color: #3e3e42;
width: 100%;
}
.npt span {
border-right: solid 1px #cacace;
color: #a3a3a8;
background: #e5e5e6;
padding-left: 15px;
padding-right: 15px;
width: 55px;
}
.npt.nptFocus {
border: solid 1px #6363e9;
}
.npt.nptFocus span {
border-right: solid 1px #6363e9;
color: #ebebfa;
background: #6363e9;
}
.npt.nptError {
border: solid 1px #fe5f55;
}
.npt.nptError span {
border-right: solid 1px #fe5f55;
color: #ebebfa;
background: #fe5f55;
}
.npt.nptError.nptFocus {
border: solid 1px #d38580;
}
.npt.nptError.nptFocus span {
border-right: solid 1px #d38580;
background: #d38580;
}
.npt.nptOk {
border: solid 1px #118769;
}
.npt.nptOk span {
border-right: solid 1px #118769;
color: #ebebfa;
background: #118769;
}
.npt.nptOk.nptFocus {
border: solid 1px #6cac9b;
}
.npt.nptOk.nptFocus span {
border-right: solid 1px #6cac9b;
background: #6cac9b;
}
UPDATE 2:
Following the help of #Manas Khandelwal and the tests carried out together, it seems that this is due to a browser rendering error as the logo above the form, having the width declared as a percentage, will never have a height with an integer value .
Ideas?
Really the only solution is really having to round all the heights via JavaScript?
$('.roundHeight').each(function(){
if(!$(this).is("[data-exmargin]")) $(this).attr('data-exmargin',parseFloat($(this).css('marginTop')));
var d = parseFloat($(this).attr('data-exmargin')) - ($(this).height() - Math.floor($(this).height()));
$(this).css('marginTop', d + 'px');
});
Add outline: none; to the input element;
Codepen: https://codepen.io/manaskhandelwal1/pen/WNGgQwP
i need the borders of my list to appear like this on the screen, Im not able to put the white spacing between the border-bottom and the border-right.
This is my code: https://jsfiddle.net/w1n72hkx/3/
HTML:
<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>
CSS:
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
border-color: DarkTurquoise;
}
.barraDatosSociales li {
display: inline;
padding-right: 5px;
border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
border-right: solid;
border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
padding-left: 5px;
}
Here i attach an image of how it should look like:
Just apply a bottom and top margin to your li elements and set their display to inline-block in order to make the margin matter.
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
padding: 0 5px;
border-color: DarkTurquoise;
}
.barraDatosSociales li {
padding-right: 5px;
/*Here' what changed*/
display: inline-block;
margin: 5px 0;
border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
border-right: solid;
border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
padding-left: 5px;
}
<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>
There are many ways to separate the internal borders:
you could move up list-items with a negative top value, e.g.
.barraDatosSociales li {
display: inline;
padding-right: 5px;
position: relative;
top: -2px;
}
or you could add a padding-bottom to the outer container
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
padding-bottom: 2px;
border-color: DarkTurquoise;
}
You need a little modification in the css for the list-items.
Inline elements do not accept top/bottom padding and margins. So try using display: inline-block
.barraDatosSociales li {
display: inline-block;
padding: 5px 15px;
}
I have a selector created as a component:
<my-selector
...
</my-selector>
and this is its css file:
my-selector{
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px;
}
.select-container {
position:relative;
display: inline;
margin-right: 10px;
}
.select-container:after {
content:"";
position:absolute;
pointer-events: none;
}
.select-container:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: .5em;
right: .75em;
border-top: 5px solid black;
}
select::-ms-expand {
display: none;
}
}
The problem I've is the distance between the words and the left margin. I've tried margin-left, padding and others in order to remove it or make it smaller but without success.
Any suggestions?
You added the padding via the css for the selector:
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px; /* this is the problem, and it's overwriting the padding attribute 4 lines up */
}
you need to remove the first incidence of padding, then set padding to something like:
padding: 3px 26px 3px 5px; /* top right bottom left */
I want to fix the table width using Display Tag.
.displayTable table {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.displayTable th, .displayTable td {
padding: 2px 4px 2px 4px !important;
text-align: left;
vertical-align: top;
width: 100%
}
.displayTable thead tr {
background-color: #9999CC;
}
.displayTable th.sorted {
background-color: #9999CC;
}
.displayTable th a,.displayTable th a:visited {
color: black;
}
.displayTable th a:hover {
text-decoration: underline;
color: black;
}
.displayTable th.sorted a,.displayTable th.sortable a {
background-position: right;
display: block;
width: 100%;
}
.displayTable th.sortable a {
background: url(../img/arrow_off.png) no-repeat right center ;
}
.displayTable th.order1 a {
background: url(../img/arrow_down.png) no-repeat right center ;
}
.displayTable th.order2 a {
background: url(../img/arrow_up.png) no-repeat right center;
}
.displayTable tr.odd {
background-color: #fff
}
.displayTable tr.tableRowEven,.displayTable tr.even {
background-color: #fff
}
.displayTable div.exportlinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
margin: 2px 0 10px 0;
width: 79%;
}
.displayTable span.export {
padding: 0 4px 1px 20px;
display: inline;
display: inline-block;
cursor: pointer;
}
.displayTable span.excel {
background-image: url(../img/ico_file_excel.png);
}
.displayTable span.csv {
background-image: url(../img/ico_file_csv.png);
}
.displayTable span.xml {
background-image: url(../img/ico_file_xml.png);
}
.displayTable span.pdf {
background-image: url(../img/ico_file_pdf.png);
}
.displayTable span.rtf {
background-image: url(../img/ico_file_rtf.png);
}
.displayTable span.pagebanner {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
margin-top: 10px;
display: block;
border-bottom: none;
}
.displayTable span.pagelinks {
background-color: #eee;
border: 1px dotted #999;
padding: 2px 4px 2px 4px;
width: 79%;
display: block;
border-top: none;
margin-bottom: -5px;
}
Depends on the data loaded, the table width varies. So, I want to make it look better by fixing the width of table. But I can't. How can I make it to fix the table width?
I try to wrap the Display with Div and set the css class of Div too. But It still doesn't work (for both display:table-cell or display:inline-block;. Thanks.
.commonList{
overflow: hidden;
background: #c0c0c0;
display: table-cell
text-align: center;
width: 100%;
height: 100%;
}
Edited: When I try to wrap the display table with Div of the above css setting, table width become 100% . but as each of the column of table has various width, it becomes so ugly because the first column becomes so wide (which only display id ,1 ,2 ,3 etc) And even my display tag pagination gone. How can I solve it? Thanks.
.displayTable table {
table-layout:fixed;
}
Specify table layout as fixed and that will solve ur problem
Here is my solution. for each columns, specify a certain class and use in Display Tag.
.displayTable {
border: 1px solid #666;
width: 100%;
margin: 20px 0 20px 0 !important;
}
.colId{
width: 2%;
}
<display:column class="colId">
For some reason when it knows the button is supposed to be disabled it shows the css for the .paginate_button and then crosses out the css for the .paginate_button_disabled. Does anyone know why?
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
Assuming you are adding .paginate_button_disabled to the element without removing .paginate_button, you will need to reorder your css.
The .paginate_button rule should come first:
.paginate_button {
padding: 2px 5px 2px 5px;
margin-right: 2px;
color: #52BFEA;
border: 1px solid #52BFEA;
}
.paginate_button_disabled {
border: 1px solid #F3F3F3;
color: #CCCCCC;
margin-right: 2px;
padding: 2px 5px;
border: 0;
}
.paginate_button:hover {
border:1px solid #52bfea;
color: #fff;
background-color: #52bfea;
}
.paginate_active {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #52bfea;
font-weight: bold;
background-color: #52bfea;
color: #FFF;
}
The way CSS works, is it cascades down the document. So if they both have the same specificity the CSS rule lower down will win.
If you are just adding the .paginate_button_disabled class to the element, without removing the .paginate_button class, then the latter would overwrite the disabled rules as it is defined later in the CSS document - they are literally cascading styles.
The best solution is to hide any unnecessary button.
use the following :
.paginate_button_disabled {
display: none;
}
in this case previous, next, first and last buttons will be shown only when they are needed.