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;
}
Related
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;
}
I tried to change the style of gwt radio button style and couldn't succeed.
Is it possible to change the gwt radio button style directly? If No what else should I do to change it.
I tried input[type="radio"]{ } in css, this doesn't help.
Thanks,
Bennet.
From what i think from your question i made a sample, check if it suits your needs
Add the following css class to your application css
.gwt-RadioButton {
background-color: grey;
border: 1px solid #FFFF00;
margin: 10px;
font-size: 2em;
}
No need to add any addStyleNames as the RadioButton by deafult listens to the .gwt-RadioButton css class. The Result after applying above css is something like this,
EDITS :
After you provided the above sample it is very clear what you want. The .gwt-RadioButton allows you to style the RadioButton. What you want is to style the radio circle and the color when it gets selected. In order to do that you need to modify the input[type=radio] class and the label present with the RadioButton.
What we are doing here is disabling the default radio circle using display none and adding our own as a label:before content and then styling it. Hope this solves your problem.
Some Styles that you need to add and then play around to suit your needs are as follows.
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background-color: #282E5A;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
.gwt-RadioButton label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: aqua;
font-size: 30px;
text-align: center;
line-height: 18px;
}
You need to override gwt-RadioButton Css. For that you need to define a ClientBundle with CSSResource and inject it on your module load.
You may refer to
how to override gwt default css
I have tag me box to add the tag.
http://jsfiddle.net/hailwood/u8zj5/
I was trying to change it's looks using css.
I wanted to create tags and box to look like in this code:
http://jsfiddle.net/hAz5A/20/
I added the css in first but does not make change. Can any css guys help me out?
Just add the css from the second fiddle into the first fiddle
Note: if you want to remove the 'x' - delete tag (for some reason) then add display: none to your tagit-close class
FIDDLE
FIDDLE without delete button
ul.tagit.ui-widget li.tagit-choice {
display: block;
float: left;
position: relative;
line-height: inherit;
border-radius: 6px;
background-color: #EFEFEF;
border: 1px solid #DDD;
padding: 5px 15px 5px 5px;
margin-right: 10px;
color: #08c;
text-decoration: none;
}
ul.tagit.ui-widget li.tagit-choice a.tagit-close {
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
margin-top: -8px;
}
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/