I want to ask that is possible use some bootstrap's paginatinon to ngx Pagination ? I would like to use mechanism from ngx Pagination and css from bootstrap.
You can use your own template and customise the styling if that's what you're trying to do to look like bootstrap:
https://github.com/michaelbromley/ngx-pagination#paginationcontrolsdirective
https://github.com/michaelbromley/ngx-pagination#styling
An example here:
http://michaelbromley.github.io/ngx-pagination/#/custom-template
Or you could use ngx-bootstrap :)
https://valor-software.com/ngx-bootstrap/#/pagination
Apply Bootstrap style on "ngx-pagination" Component
After installation ngx-pagination, add this style in your custom style sheet or in your component related style file
.ngx-pagination{
margin-bottom:0 !important;
}
.ngx-pagination li{
margin-right: -1px !important;
}
.ngx-pagination li.current{
background-color: #007bff !important;
border: 1px solid #007bff !important;
padding: 6px 12px !important;
z-index: 999999 !important;
position: relative;
}
.ngx-pagination li a:focus{
outline:none;
}
.ngx-pagination a, .ngx-pagination button{
color: #007bff !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
padding: 6px 12px !important;
}
.ngx-pagination .disabled{
color: #6c757d !important;
pointer-events: none !important;
cursor: auto !important;
background-color: #fff !important;
border: 1px solid #dee2e6 !important;
padding: 6px 12px !important;
}
Related
I'm working on a custom bootstrap menu and for some reason, I can not change any styles of the menu item once the user is on the item.
Is there something wrong with my syntax, its Monday morning so maybe I'm tired and have a simple mistake but I can't see it.
.navbar-inverse {
.navbar-nav {
padding: 10px !important;
a {
&:hover {
border-bottom: solid green 3px !important;
color: $my-white !important;
font-weight: bold;
background-color: transparent !important;
}
&:active {
border-bottom: solid green 3px !important;
color: $my-white !important;
font-weight: bold;
background-color: transparent !important;
}
&:focus {
border-bottom: solid green 3px !important;
color: $my-white !important;
font-weight: bold;
background-color: transparent !important;
}
}
}
}
I can work it with css, for example
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
border-bottom: solid green 3px !important;
color: $my-white !important;
font-weight: bold;
background-color: transparent !important;
}
but not in sass, why is this ?
I wanted to apply "Enhanced user interface" to a field that helps users search through a list of schools. My CSS is not applying correctly to the dropdown in this field.
I'm using Avada theme. I added CSS to theme in Customizing Additional CSS. All classes apply to all Gravity Form fields except the enhanced one.
body .gform_wrapper .gform_body {
font-size: 20px !important;
letter-spacing: 1.5px !important;
line-height: 25px !important;
margin-bottom: 80px !important;
}
body .gform_wrapper .gform_body .gfield_label {
font-size: 18px !important;
font-weight: 400 !important;
letter-spacing: 1.5px !important;
line-height: 25px !important;
margin-top: 10px !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]
{
border: 1px solid #ccc !important;
font-size: 20px !important;
font-weight: 500 !important;
color: #676767 !important;
letter-spacing: 1.5px !important;
line-height: 25px !important;
border-radius: 0px !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox
{
border: 0px !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #676767 !important;
letter-spacing: 1.5px !important;
line-height: 25px !important;
border-radius: 0px !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield select
{
border: 1px solid #ccc !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #676767 !important;
padding: 10px !important;
border-radius: 0px !important;
}
.wpf-autocomplete {
border: 1px solid #ccc !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #676767 !important;
padding: 10px !important;
border-radius: 0px !important;
}
I tried creating a custom CSS class for this field and adding it to Appearance>Custom CSS of the schools field. That didn't work.
.wpf-autocomplete {
border: 1px solid #ccc !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #676767 !important;
padding: 10px !important;
border-radius: 0px !important;
}
The dropdown takes on a deafult size. The search field when I click on the dropdown is the correct size, so that field is picking up the CSS.
enter image description here
Any suggestions?
I have a weird case where the caret for the twitter bootstrap select is not appearing after some customisation. I am therefore looking to restore the style for the select. These are the current styles:
#sidebar2 select {
max-width: 100%;
margin: 0px;
border: 1px solid #ccc !important;
outline: 0;
display:block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075) !important;
border-radius: 2px !important;
width: 100% !important;
height: 32px !important;
font-weight: 500;
-webkit-appearance: none !important;
-webkit-transition: none !important;
text-transform: none;
font: inherit;
vertical-align: top;
}
Because you use -webkit-appearance: none !important, it will make the caret disappear, you can try on mozzila and see the caret still there
http://jsfiddle.net/4UA82/1/
#subscribe-submit input[type="submit"] {
text-decoration: none !important;
color: #000000 !important;
font-size: 12px !important;
padding-top: 5px !important;
padding-right: 5px !important;
padding-bottom: 5px !important;
padding-left: 5px !important;
background-color: #24890d !important;
}
#subscribe-submit input[type="submit"]:visited {
text-decoration: none !important;
color: #000000 !important;
}
#subscribe-submit input[type="submit"]:hover {
font-size: 12px;
background-color: #2b2b2b;
color: #000000 !important;
}
#subscribe-submit input[type="submit"]:active {
font-size: 12px;
background-color: #2b2b2b;
}
I am just trying to get this button to hover to the desired background color, but it is not working for some reason.
I can get it to hover if I delete the initial settings though:
#subscribe-submit input[type="submit"] {
text-decoration: none !important;
color: #000000 !important;
font-size: 12px !important;
padding-top: 5px !important;
padding-right: 5px !important;
padding-bottom: 5px !important;
padding-left: 5px !important;
background-color: #24890d !important;
}
So I am not sure what is going on.
thanks!
Remove the !important tag
#subscribe-submit input[type="submit"] {
background-color: #24890d;
}
The need to use !important on every attribute suggests that there are flaws in the way you are structuring your CSS
In #subscribe-submit input[type="submit"] Change
background-color: #24890d!important;
to
background-color: #24890d;
I am trying to create 2 buttons of the same width that will look as following:
White text in a blue square with black border and with margin of lets say 5px from each side:
this is my css code:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
}
But what I am getting is:
I am using Google Chrome browser, and when I click on "inspect element" I can see all my css properties there, but my application is ignoring them.
You need to declare the border style (solid in your case)
Try the following
a.button
{
background-color: Blue;
border: 2px solid black;
color: White;
padding: 2px 5px;
width:100px;
text-align:center;
margin: 5px;
display:inline-block;
text-decoration:none;
}
You will need to adjust the css, and add hover and active states.
Example: http://jsfiddle.net/3tKS7/
Make your element an inline-block:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
display: inline-block;
}
Not sure if the capitalized color names are helping either.