My goal is to fix the width of rowsPerPageTemplate im p:datatable
(i'm using primefaces and HTML5)
what i did:
in my css i fixed the style of the select menus as follow
select{width : 100% !important;}
the problem is that rowsPerPageTemplate took the same width of selectmenu which is not expected ,i want that rowsPerPageTemplate take customized width different than the width of the select menu, so i added this code in the css
select.customWidth
{
width:45px;
}
i called this style in my xhtml page as below
<p:dataTable
rowsPerPageTemplate="5,10,15"
styleClass="customWidth">
Howver it seems that customWidth is not taken in account
screen shoot
can anyone guide me to the right point
Problem solved, I added this code in the style sheet to set the width of rowsPerPageTemplate (10em in my case )
.ui-paginator .ui-paginator-rpp-options {
margin-left: 1em;
margin-right: 1em;
background-image: none;
width: 10em !important;
}
Related
I am a newbie and designing a Wordpress website (www.dimjaa.org). I am sticking to a minor css problem for last two days but failed to find out the solution. I want to take help from you to solve it and also eager to know root of the cause.
I am using evolve themme. I added header widgets.
Content of the header widget area are Login and Logout links. I want to display these at the top-right of the widget area.Image of the header-block showing unnecessary padding on both sides
Two problems that I am facing now are : 1. Background-color of the header-block which holds the widget area can not be changed. Or the header-block can not be covered by the widget area completely (it takes margin in left and right). The header-block can not be targeted properly. Any one of the above may be considered as solution of the issue.
2. Moreover the Login and Logout links can not be placed on the top-right of the area. Even can not be vertically centered. Interestingly when I remove the float: right; then it can be vertically centered. My html and css as below:
.header-block{
background-color: red;
}
.header-widgets{
background-color: #CDAE02;
}
.user-log a{
float: right;
text-decoration: none;
background-color:#581845;
color: #ddd;
border-radius: 15px;
font-size: 14px;
margin-right: 1em;
}
.user-log a:first-child{
padding: 4px 13px;
}
.user-log a:last-child{
padding: 4px 8px;
}
.user-log a:hover {
background-color:#B12307;
font-size: 15px;
}
<ul class="user-log">
Login
Logout
</ul>
I expect a solution from the experts and also hope to gather knowledge for understanding the issue better.
container is a class used by Bootstrap, so you can force that class to have width 100% by using !important in your rule, or you can define a new class called container-full and replace it with the container class:
.container-full{
margin: 0 auto;
width: 100%;
}
Also, changing the color of header-block won't affect, since it has other children that have other colors and has no space to show the color in the background. You may change the header-widgets' color. And it seems like you have padding and margin rules already defined in .widget-content & .header-widgets classes. You either have to change these rules in style.css, or write new rules that contain !important command in the end of the rules, so you can force them to affect the rules.
I am using material design lite and try to control the height of a td using mdl-data-table__cell--non-numeric by opening material.min.css and adding height:20px to the selector, did not make any diference.
.mdl-data-table__cell--non-numeric{text-align:left; height:20px;}
Also try to create a new selector and apply to the columns i need, and also did not make any diference :
.padtd{
height: 20px;
}
How can i control the height from .mdl-data-table__cell--non-numeric ?
Think you should use the !important tag, if you want to set your own attributes.
.mdl-data-table__cell--non-numeric {
text-align:left !important;
height: 20px !important;
}
It would appear that that bootstrap puts a 10px margin on the top and bottom of the pager and I would like to cut that down to 2px and also make the height of the pager a bit smaller. I'm using the code from the xsnippets.openNTF as follows:
<xp:pager partialRefresh="true" id="pager1" for="repeat1"
panelPosition="left" styleClass="bootstrapPager">
<xp:pagerControl type="Previous" id="pagerControl1"
styleClass="bootstrapPagerPrevious">
<xp:this.value><![CDATA[«]]></xp:this.value>
</xp:pagerControl>
<xp:pagerControl type="Group" id="pagerControl2"
styleClass="bootstrapPagerMiddle">
</xp:pagerControl>
<xp:pagerControl type="Next" id="pagerControl3"
styleClass="bootstrapPagerNext">
<xp:this.value><![CDATA[»]]></xp:this.value>
</xp:pagerControl>
</xp:pager>
as suggested I created a new css and copied the css from the xsnippets into it and applied it to the page however I don't think that should be necessary with bootstrap built in so I removed the css. The pager works the same either way. So I want to over-ride the bootstrapPager class and change the margins.
I created a new css called it myBootstrap.css and added this block
.bootstrapPager {
display: inline-block;
padding-left: 0;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 2px;
margin-top: 2px;
line-height: 1.42857;
}
and changed the top and bottom margins to 2px. added the css as a resource but the pager margins do not appear to have changed. Maybe there are some other settings that need changing. As I read it this class should override the main bootstrap.css.
EDIT
If I set disable Theme to true then it appears to remove the margins, but then it also removes all of the additional styling and that is no good either.
Here is what the pager looks like (not connected to the repeat yet but that should not matter. The major issue is the amount of vertical space that it consumes. When I inspect the element in Chrome it looks very much like it is getting the values from the main bootstrap css.
Bill,
Not sure this will work, but please try adding !important to your CSS selector. This has worked for me in the past. In my case it was OneUI, but the concept is the same. This assumes that the style is being applied, but is overwritten.
.bootstrapPager {
display: inline-block;
padding-left: 0;
border-radius: 4px;
margin-left: 10px;
margin-bottom: 2px !important;
margin-top: 2px !important;
line-height: 1.42857;
}
For more info, I wrote a blog post on this subject last year when I was having a similar problem: http://notesspeak.blogspot.com/2014/10/quick-tip-forcing-css-override.html
Note: I have never had much luck ever trying to us the "disable theme" feature.
I am new to CSS. I am observing a strange CSS behaviour where an element has the below CSS property
.container .header{
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
padding: 5px;
position: relative;
text-align: center;
top: 21%;
}
When the page loads on Mozilla and chrome, the top property is not applied but inspecting the firebug shows the property. When I edit in firebug just by 1px, the elements gets properly aligned and even if I set the top value to 21% after that, the position is correct. Only on load the CSS property is not applied. Can you please let me know where I am going wrong?
It's because you are calculating the top value in percentages and to make that happen, you need a declared height for it's parent i.e. container.
.container, body, html {
height:100%;
}
Add the rule above and see it working. FIDDLE HERE
NOTE - body and html also need their height declared(either in percentages or pixels) too as container's parent is body and like so.
I know exactly what it is now. Its your style class names themselves. After much testing I have discovered:
.container, .header {
color:#ffffff;
font-size:2em;
font-weight:bold;
padding:5px;
position:absolute;
text-align:center;
top:21%;
}
Notice what's after the .container? A COMMA. You need a Comma after every class name that inherits those same attributes! Hope this helped!
I have this simple fiddle
Here's a screenshot from Chrome Canary:
What am trying to do is adding the following code
.player .controls button.play {
width: 40px !important;
height: 40px !important;
border-radius: 100% !important;
background-color: rgba(23,35,34,.75) !important;
}
but that doesn't work for, any help will be thankful.
Cheers
It has border-radius and background-color. but you can change it. here is the class:
.player .rounded-box {
background: rgba(23,35,34,.75);
border-radius: .5em;
}
note: this is in iframe so, you need to have the style sheet file.
Well after searching I've found the following:
No it can’t.
The iframe in Page A is just a container element which links to the page in iframe B. Thus iframe B will only adhere to the CSS included within its page. There is no way to override this, unless of course they share the same stylesheet.
If we could override the CSS then we’d notice more customized Adsense Ads floating about on the web.
So no luck, thanks for your time.