Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-slider width increases when slide to right #1343

Closed
sunny9240 opened this issue Jan 30, 2015 · 8 comments
Closed

md-slider width increases when slide to right #1343

sunny9240 opened this issue Jan 30, 2015 · 8 comments
Assignees
@robertmesserle
Labels
type: bug
Milestone
0.8.3

Comments

@sunny9240
Copy link

md-slider width increases when sliding

and this problem is started from the version 0.7.1-rc1

check problem - http://plnkr.co/edit/hDPPg1UQZk7veyvPvNbJ?p=preview

Same behavior is seen on angular material slider demo page.
@DBGTTECHJAM
Copy link

+1

@ThomasBurleson
Copy link
Contributor

wrap the md-slide in a container.
e.g.

<body>
    <div style="width:400px;padding:40px;">
      <md-slider name="slider" aria-label="slider" min="0" max="100" step="1"></md-slider>
    </div>     
</body>

@sunny9240
Copy link
Author

Nope, that does not fix the issue. For screen size smaller than width will still have that issue.

@ThomasBurleson
Copy link
Contributor

@sunnyshah01 - you did not give that particular, important detail in your original issue report.
It appears that:

md-slider {
overflow: hidden;
}

should resolve this issue. Thx for finding this good bug.

@ThomasBurleson ThomasBurleson reopened this Feb 4, 2015
@sunny9240
Copy link
Author

Slider thumb is cut off now.
http://plnkr.co/edit/hDPPg1UQZk7veyvPvNbJ?p=preview

@ThomasBurleson ThomasBurleson added this to the 0.8.0-rc1 milestone Feb 4, 2015
@ThomasBurleson
Copy link
Contributor

@robertmesserle - the hack below seems to work. Let's review the best approach.

<div style="overflow:hidden;padding:20px">
      <md-slider style="" name="slider" aria-label="slider" min="0" max="100" step="1"></md-slider>
</div>

@robertmesserle
Copy link
Contributor

@ThomasBurleson That makes sense, but we should probably include the padding on our end by default.

robertmesserle pushed a commit that referenced this issue Feb 4, 2015
fix(slider): adds padding inside of slider to fit the thumb
24b9ef5 
Closes #1343
@robertmesserle robertmesserle mentioned this issue Feb 4, 2015
Closed
@ajoslin ajoslin added the in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs label Feb 4, 2015
@robertmesserle robertmesserle added resolution: fixed and removed in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs labels Feb 4, 2015
@sunny9240
Copy link
Author

@robertmesserle This is not the right fix. size of slider became smaller because of padding.

robertmesserle pushed a commit that referenced this issue Feb 6, 2015
fix(slider): adds padding inside of slider to fit the thumb
2662c04 
Closes #1343
robertmesserle pushed a commit that referenced this issue Feb 6, 2015
fix(slider): adds padding inside of slider to fit the thumb
223dec7 
Closes #1343
robertmesserle pushed a commit that referenced this issue Feb 6, 2015
fix(slider): adds padding inside of slider to fit the thumb
a22e6aa 
Closes #1343
robertmesserle pushed a commit that referenced this issue Feb 6, 2015
fix(slider): adds padding inside of slider to fit the thumb
8093c30 
Closes #1343
@ThomasBurleson ThomasBurleson mentioned this issue Feb 9, 2015
Closed
robertmesserle pushed a commit that referenced this issue Feb 9, 2015
fix(slider): updates positioning method to prevent overflow issues
5dbcaa6 
Closes #1343
robertmesserle pushed a commit that referenced this issue Feb 9, 2015
fix(slider): updates positioning method to prevent overflow issues
4da082a 
Closes #1343
robertmesserle pushed a commit that referenced this issue Feb 9, 2015
fix(slider): updates positioning method to prevent overflow issues
d7a7e48 
Closes #1343
Closes #1431
robertmesserle pushed a commit that referenced this issue Feb 10, 2015
fix(slider): updates positioning method to prevent overflow issues
d817edb 
Closes #1343
Closes #1431
robertmesserle pushed a commit that referenced this issue Feb 10, 2015
fix(slider): updates positioning method to prevent overflow issues
18d47c4 
Closes #1343
Closes #1431
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@robertmesserle robertmesserle

Labels
type: bug
Projects
None yet
Milestone
0.8.3
Development

Successfully merging a pull request may close this issue.

fix(slider): adds padding inside of slider to fit the thumb angular/material
5 participants
@ThomasBurleson @robertmesserle @ajoslin @DBGTTECHJAM @sunny9240