I have Bootstrap 3.2.0. When I put a table into a page (.xsp) it takes so much space there.
I tried all bootstrap classes like table-condensed, table-responsive etc. for tables and input-sm, form-control and the others for inputboxes.
I created a CSS class shown below and then even if I use those classes nothing changed.
Expected result:
I'm looking for a solution on how to make whole spaces between inputBox and table to disappear.
.input-group-xs>.form-control, .input-group-xs>.input-group-addon, .input-group-xs>.input-group-btn>.btn {
height: 22px;
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
.input-xs {
height: 22px;
padding: 2px 5px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
Thanks in advance
C.A.
I assume you are using <xp:table> ... </xp:table> for your table.
The white space within the table which you want to reduce is defined for class .table as
padding: 8px.
Change it this way:
.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,
.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td
{
padding: 1px;
}
Related
I am trying to replicate this custom checkbox codepenhttps://codepen.io/zFunx/pen/dWbevd?editors=0100
But for the rest of my project i use bootstrap4 and it overwrites my costom checkbox somehow.
Here is my test My testhttps://codepen.io/GitMorin/pen/aEXrJq
As you can see I have added a .myCheckbox class to the input compare to the working example. I got a bit stuck of how I can overwrite bootstrap to the cosutm checkboxes.
Does anyone have any advice? Much appreciated
Try to replace the following CSS. This might be your correct answer. This is behaving differently from other because of font-family and some other CSS related things.
input.myCheckbox[type=checkbox] + label:before {
content: "\2714";
border: 0.1em solid #000;
border-radius: 0.2em;
display: inline-block;
width: 1.5em;
height: 1.5em;
padding-left: 0;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
I'm making a blog and I am using a free template to manage my fron-end part, but now I want to add one class called code_block. Every time I write an article and I want to add a
<p class="code_block"> some code</p>
and the code piece to be displayed in a similiar to how this last code is displayed here in stackoverflow.
I went to the END CSS file entered:
.code_block{
color: #933 !important;
border: 5px solid red;
}
didn't work, tried adding the css directly in the html, didn't work, tried adding manualy the css while in chromium web tool, didn't work what is happening ?!
source: https://github.com/martin-varbanov96/summer-2016/tree/master/Pitonia/Django/mysql_blog/blog
EDIT:
made it more specific:
.ar
ticle ul li p .code_block{
color: #933 !important;
border: 5px solid red;
}
Still not working I think priority is not the problem here.
ID has got more priority. Remove the color from here. Or you can override.
#body.home .body div p {
color: #ffffff;
display: block;
font-family: Arial;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
You can override it like this...
#body.home .body div p.code_block{
color: #933;
border: 5px solid red;
}
I am trying to style a pull-quote div tag. I want to style the quote mark " so it is bigger than the rest of the statement.
I thought of using the first-letter pseudo-element. However when I did so, it did not work properly. Here are the cases I tried:
If I wrote the sentence like this: "This is a test,(with no spaced between the "and theT then both the "Tappear big.
If I wrote it with a space between them, none of them get bigger.
My question is: is there a way to get the " only to be bigger?
Here is the html code I used: <div class="pullquote-right">"this is a test</div>
The css:
.pullquote-right {
display: inline-block;
max-width: 350px;
float: right;
padding-left: 15px;
margin-left: 25px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size:115%;}
.pullquote-right::first-letter {font-size: 200%;}
Thanks.
An option would be to use the ::before and ::after pseudo elements.
.quote::before,
.quote::after {
content: "\0022";
font-size: 2em;
font-weight: bold;
color: green;
vertical-align: -.3em;
}
<p class="quote">This is a great quote</p>
The first-letter pseudo class refers to the first letter and the punctuation directly preceding it. Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
I think the easiest way to do what you want might be to put a span tag around the punctuation you want to make bigger and style that from the css.
Or you can check out this work-around: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
I ended up combining the two answers to be able to use the div tag and not neet to add extre <p></p>as follows:
.pullquote-left {
display: inline-block;
max-width: 350px;
float: left;
padding: 20px;
margin-left: 15px;
border-left: #3b5998;
border-left-width: thick;
border-left-style: solid;
font-style: italic;
color: darkgray;
font-size: 110%;
background-color: white;
box-shadow: 5px 5px 5px #888888;
text-align: center;
}
.pullquote-left::before {
font-size: 2em;
font-weight: bold;
content: "\201C";
}
<div class="pullquote-left">This is the final result.</div>
I am just starting to use SlickGrid and amazed by its quality. However, when it comes to styling, I did not find any docs or examples recommending an overall styling approach. There are options and APIs scattered in various places, but it's very difficult to extract a strategy out of those. Also the grid leverages jQuery UI themes. Unfortunately those are interfering with what I am trying to achieve. We have picked up jQuery UI only for the calendar widget along with the ui-darkness theme. This theme works perfectly fine for the calendar widget, but the grid needs to override every aspect of it.
Here's a jsFiddle that shows the look I am trying to achieve: http://jsfiddle.net/nareshbhatia/3q6RD/. Just for illustration, it uses a regular HTML table. However I would like to achieve the exact same styling using SlickGrid. The CSS in this jsFiddle is essentially the requirement I have from my visual designer, e.g.
#positions-table th {
background-color: #505050;
color: #eeeeee;
text-shadow: none;
font-size: 13px;
height: 40px;
line-height: 40px;
}
Edit: I also created a jsFiddle with a starter SlickGrid implementation: http://jsfiddle.net/nareshbhatia/vJshY/. As you can see, the ui-darkness theme has completely taken over!
Within your second/last jsFiddle you can modify the CSS to have this code
.slick-header-column.ui-state-default {
background:none ;
background-color: #505050 ;
color: #eeeeee;
border: none;
padding: 0;
text-shadow: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
height: 40px;
line-height: 40px;
}
.slick-row.ui-widget-content, .slick-cell {
background: none;
background-color: #eeeeee;
color: #666666;
border: none;
border-bottom: solid 1px #ffffff;
font-size: 14px;
height: 60px;
line-height: 60px;
padding: 0 5px;
}
I would like to apply this css on my .FileUpload button , but It only works on IE and not on Chrome and I still don't know what is wrong with it. Someone as got an idea ?
Thanks for helping
.FileUpload
{
width: 90px;
float: left;
color: black;
font-family: Segoe UI,Arial, Sans-Serif;
border: 1px solid #C7D2D8;
height: 30px;
text-decoration: none;
display: inline;
background: white;
margin: 10px 10px 10px 540px;
text-align: center;
padding: 4px 0;
letter-spacing: -1;
border: none;
cursor: pointer;
}
AFAIK it is not possible to style an <input type="file">, for all browsers. But you could replace the upload-field with javascript and the replacement can by styled as much as you want.
You'll get an example of such a replacement script in this blog entry.
You can try using jquery instead, this would be cross browser compatable then, more info here > http://jqueryui.com/demos/button/#default
either that or there are several examples here on different methods of achieving what you want http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/