Is there any way in which i could style the default dots in the <md-slider md-discrete>?
E.g. - If I would want to increase the size of the dots to make them visible more distinctly.
Any help would be appreciated. Thanks.
I increased the height of the dots using the following CSS
/*Slider Thick marks*/
md-slider .md-track-ticks canvas {
height: 6px;
}
.mat-slider-horizontal .mat-slider-ticks-container {
height: 8px !important;
top: -3px !important;
}
.mat-slider-horizontal .mat-slider-ticks {
height: 8px !important;
}
Related
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 am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.
Please see below image.
How can i fix the search textbox width to react-select width?
Just set
autosize={false}
on the component.
I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works
<Select
value={this.state.passwordExpire}
onChange={this.updatepasswordExpire.bind(this)}
options={optionsDays}
style={{width: '82%'}}
/>
const customStyles={
// control represent the select component
control: (provided)=>({
...provided,
width:'100px'
})
}
<Select
options={options}
styles={customStyles}
></Select>
This method is stated in react-select documentation. You can adjust select width as per your wish.
You can try with this css.
.Select-input {
position: absolute !important;
width: calc(~'100% - 0px');
}
.Select-value-label {
display: none !important;
}
.Select-value {
position: relative !important;
}
.Select-menu-outer {
width: auto;
min-width: 100%;
text-align: left;
}
.Select-option {
white-space: nowrap;
}
.Select-control {
min-width: 100%;
width: auto;
text-align: left;
}
.Select-control {
table-layout: fixed;
}
.Select-input {
overflow: hidden;
max-width: 100%;
}
Here is the Solution..
.Select-input > input {
width: 100% !important;
}
.Select--multi .Select-input {
display: block !important;
}
.Select--multi .Select-multi-value-wrapper {
display: block !important;
}
This is the proper solution in this case. It's working fine.
I am trying to make a border/frame around a full screen background picture.
I could make it using border but I could not create a space between the edge and the frame. https://s3.amazonaws.com/uploads.hipchat.com/44798/299518/TieMyM2f0EXsUsK/frame.png
Also the second thing is to create a hole on the bottom side of the pic.
If you guys have any advises, I would really appreciate.
Thanks for you help,
Richard
I cannot help you about the hole but you can set padding and magrin with css to your image to create the space between the end of image and the border and the screen.
I'm not sure if thats what you mean, but maybe try something like this (tested on chrome)
<div id="cont">
<div id="break"></div>
</div>
#cont {
border: 1px solid red;
width: 90%;
height: 300px;
}
#break {
position: relative;
margin: 0 auto;
top: 100%;
bottom: 1px;
width: 100px;
height: 1px;
background-color: white;
}
http://jsfiddle.net/2bph38qh/
I am trying to figure out how to make vertical and horizontal images at the same height. The height I need by vertical image. any ideas..
I was thinking to make the same height, but when I resize it shows like above...
css: max-height: 375px!important;
Update:
http://jsfiddle.net/LG2B8/
use min-height for horizontal image
min-height: height of vertical image;
as mention above, just give
css: height: 375px!important;
or
css: height: 4%0!important; //give in percent which is good for responsive ui
Some basic rule is
Height - apply when you need / know proper height
Max-height - apply when you want to restrict image height when exceed, this is good to used for images, you can also use for all other content too.
Min -height - apply when you want to minimum height should be, this is used for div/table/tr/td for responsive ui
I rectify and only change in css. just remove everything and add this. I added width for understand.
img
{
display: inline-block;
height: 300px;
width:200px;
}
img is html tag and all images will work as per "img" css attributes
Here is my solution:
Html:
<div class="w">
<div class="img"><img src="http://i.imgur.com/4OAz0Cf.jpg"/></div>
<div class="img o"><img src="http://i.imgur.com/EJsmCmT.jpg"/></div>
</div>
Css:
.w {
display: table-row;
}
.img{
width: 50%;
display: table-cell;
}
.img img{
min-height: 500px;
max-height: 500px;
}
.img.o img {
width: 100%;
}
Example
Can you tell me how can I invert the direction of the scroll?
For instance, having the mobiscroll in clickpick mode, clicking the bottom arrow should advance in the day/month/year.
For example, the date is 17 10 2012 (dd mm yy). Clicking the arrow below the month, should set it to 11, not 9. Clicking above, would do the opposite: set it to 9.
Is it possible? How?
Thanks. :)
This is a problem with the android-ics skin, as it uses arrow symbols instead of +/- symbols.
The following css should fix the problem:
.android-ics .dwwbp {
top: auto;
bottom: 0;
}
.android-ics .dwwbm {
top: 0;
bottom: auto;
}
.android-ics .dwwbm:after {
border-color: transparent transparent #7e7e7e transparent;
}
.android-ics .dwwbp:after {
border-color: #7e7e7e transparent transparent transparent;
}
.android-ics .dwwbm.dwb-a:after {
border-color: transparent transparent #319abd transparent;
}
.android-ics .dwwbp.dwb-a:after {
border-color: #319abd transparent transparent transparent;
}