I am using extjs grouping feature on a grid, is there a way that I can remove the collapse/expand ([+]/[-]) icon without diabling collapsible functionality.
override css
.customGrid .x-grid-group-hd-collapsible .x-grid-group-title {
background-repeat: no-repeat;
background-position: left center;
background-image: none !important; //Changed
padding: 0 0 0 0px //Changed
}
then add cls: 'customGrid', to your grid
Related
This problem is costing my sanity.
I want to use the React Fluent UI Carousel component with thumbnails and place it in the middle of my container, everything works fine till I add more than 8 slides. The carousel moves to the left side of the screen and eventually disappears from the viewport.
I am using the default code snippet from Fluent UI IS AVAILABLE HEREFluent ui thumbnail carousel
enter image description here
I have solved the problem, just overwrite the following properties:
.ln {
width: 600px;
}
.ui-carousel__navigation {
margin-top: -55px !important;
position: absolute;
display: flex;
flex-flow: wrap;
justify-content: space-between;
width: 1000px;
margin-left: -200px;
}
.nb {
transform:none !important;
}
.ol {
transform: none !important;
}
.nc {
transform: none !important;
}
Following link is affected: https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=2753787&tc_deviceCategory=undefined&template_layout_id=5699672553&updated=1523614982274
We are experiencing problems with a form and its parent div. We tried to bring in a frosted glas style to the parent div landingboxForm, but if we are working with pseudoelements, nothing happens.
The tutorial is from here https://medium.com/#AmJustSam/how-to-do-css-only-frosted-glass-effect-e2666bafab91 and is working well for others. I just do not succeed in port it for our landing page.
Does anybody know why the :before div tag is just grey in the Chrome inspector and why it does not appear?
CSS:
.lp-sorba {
background-size: cover;
position: absolute;
width: 100%;
top: 0;
left: 0;
bottom: 0;
height: 900px !important;
}
.lp-sorba .landingpageHeader {
height: 80px;
background: #1d89d2;
}
.lp-sorba #hs-link-logo > img {
margin-top: 22px;
}
.lp-sorba .landingboxForm:before {
content:" ";
background: inherit;
left: 0;
right: 0;
top: 0;
height: 100%;
width: 100%;
bottom: 0;
box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
filter: blur(10px) !important;
}
.lp-sorba .landingboxForm {
background: inherit;
width: 100%;
height: 100%;
position: relative;
border-radius: 5px;
box-shadow: 0 23px 40px rgba(0,0,0,0.2);
padding: 20px;
border: 0.5px solid #edebeb;
}
As for your question
why the :before div tag is just grey in the Chrome inspector and why it does not appear?
Your pseudo element is collapsing right know. Add position: absolute; to the .lp-sorba .landingboxForm:before rule.
But that won't solve your underlying problem / won't create the frosted glass effect.
The way how filters work is: they get applied to the element itself only, not the ones lying behind it.
In the example from Medium/Codepen, the form element inherits the background from the main element. By that it's pseudo element may apply a filter to it.
In your setup, the form is positioned absolute, while the image tag is also positioned absolute. The forms filter won't bleed into that image tag.
Revisit the example:
apply a background image to a parent container
inherit that in the form
pseudo filter on the form will blur the forms inherited background
I moved some gradient button styles into a mixin and now the hover styling is incorrect. The hover state should apply a background offset with the gradient over the top but when used as a mixin it is being applied in the reverse order i.e., the offset is applied on top of the gradient, making the button look like it is two different solid colors. What's the correct way to apply these styles using a mixin?
Styles
.btn-primary {
background-color: hsl(98, 35%, 73%) !important;
color: #333 !important;
.btn-gradient(#ebf3e6, #b3d2a2);
}
Mixin
.btn-gradient(#startColor, #endColor) {
border-color: #endColor #endColor hsl(98, 35%, 68%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#startColor, endColorstr=#endColor);
background-image: -khtml-gradient(linear, left top, left bottom, from(#startColor), to(#endColor));
background-image: -moz-linear-gradient(top, #startColor, #endColor);
background-image: -ms-linear-gradient(top, #startColor, #endColor);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #startColor), color-stop(100%, #endColor));
background-image: -webkit-linear-gradient(top, #startColor, #endColor);
background-image: -o-linear-gradient(top, #startColor, #endColor);
background-image: linear-gradient(#startColor, #endColor);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33);
-webkit-font-smoothing: antialiased;
&:hover {
background-position: 0 -15px;
}
}
Mixin hover
No mixin hover
Turns out I was missing background-repeat: repeat-x; from the mixin.
I have developed a website(www.damabbs.com) using Bootstrap. The problem is the webpage is draggable horizontally when user wants to scroll down using iPhone safari. It is very annoying.
I have checked with bootstrap website. It works fine. It can only be draggable vertically.
Change that code in base.css line 34
#media ( max-width : 766px) {
body {
padding-top: 0;
padding-left: 5px !important;
padding-right: 5px !important;
}
to
#media ( max-width : 766px) {
body {
padding-top: 0;
padding-left: 10px !important;
padding-right: 10px !important;
}
this is driving me crazy...might be something very simple and I just need another set of eyes to look at it...
I have this in my CSS:
#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
padding: 11px 0;
font-size: 0.875em;
}
and call it here in my HTML:
<div id="recipient">
<h3>Meet the 2010 Recipient!</h3>
<img src="images/2010_headshot.jpg" alt="foo" />
</div>
Pretty simple, right? In Firefox it renders about 20px longer in height than IE7 (I can tell by where the bottom of this div hits next to other elements on the page). I am running in standards mode, and have looked at the Firefox version in Firebug and the IE version with Firebug Light and the IE Dev Toolbar -- don't see anything weird in either... the top of the div starts in the right spot, so it doesn't look like the margin collapsing...
If I manually add padding/height to the CSS, I can get IE7 to line it up at the right height, but then the div in Firefox is too long! It's not a critical part of the design, but it's bugging the sh!t out of me!!
Thanks in advance...
It's IE and the different way it's handling the default h3 margins inside a floated element
usually this can be fixed by giving the offending element (any element which has default margins!) explicit margins, but in this case it's not working because of the top padding of the container ?
The best fix I can come up with is to remove the top padding from the #recipient div and explicit;y make the top/bottom margins on the h3 11px, this makes for nice even spaces through the effect (btw this extra bit only happens if the div is taller than the min height) - here's some working code - I also put a background color on the h3 which if you do in your code will show the 15px or so extra gap..
CSS:
#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
margin: 0;
font-size: 0.875em;
padding-bottom: 11px; /* bottom padding only */
}
h3 {
margin: 11px 0; /* explicitly set these */
background: #fcf;
}
HTML: (with placeholder image for testing)
<div id="recipient">
<h3>Meet the 2010 Recipient!</h3>
<img src="http://placekitten.com/350/200/" alt="foo" />
</div>