Jump to content


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About ben03

  • Rank

Contact Methods

  • Website URL
  • ICQ

Profile Information

  • Interests
    Digital design
  1. ben03

    What control can you have over html scrollbars?

    Thanks for the pointers, much appreciated
  2. I was wondering whether it was possible to set a horizontal scrollbar to automatically scroll the furthest right upon opening, or whether this is something that has to be manipulated by jquery?
  3. ben03

    Height Transition of a List

    This is helpful and makes sense, thanks also for sharing the link!
  4. ben03

    Height Transition of a List

    li{height: 48px; overflow: hidden; -webkit-transition: 0.3s; transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s;} li.tree-is-expanded{height: 100%;} This would essentially hide the nested ul until the class '.tree-is-expanded' is added. But the transition jumps as opposed to shows the transition. I have also tried targeting the nested ul but this doesn't work either: li ul{height: 48px; overflow: hidden; -webkit-transition: 0.3s; transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s;} li.tree-is-expanded ul{height: 100%;} Thanks
  5. ben03

    Height Transition of a List

    Hi there, I am working on a tree structure using lists. When you click on a button in a list item, it opens a sublist up. When a sub-list is opened, the tree below moves down, and up if closed. It does this with a jolt, and am I hoping there is a way to animate this smoothly? The problem I am having is that all tutorials I have found use a hard-coded max-height to animate from and to. I cannot do this as the list has to be able to be any size. Also the structure is dynamically generated which also makes it quite hard to append classes to certain points. Is there a way to do achieve a smooth height transition in this scenario? Thanks
  6. ben03

    Em 7 Rem Confusion

    and setting that in px would allow the tools to manipulate the base font size?
  7. ben03

    Em 7 Rem Confusion

    That would explain why that wasn't working then.
  8. ben03

    Em 7 Rem Confusion

    Ok Ingolme, I think I understand. What I had been doing was the following, in the hope that by increasing the body font size would lead to all the values increasing proportionately (that is the point of rem and em, right?). But it wasn''t working... body{font-size: 16px;} button{font-size: 0.825rem; padding: 1em 1.2em;} What would I need to do to achieve this? Thanks
  9. ben03

    Em 7 Rem Confusion

    Hi there, I just need something clearing up: I thought giving a font a rem made it relative to the font size set on the body. Then, giving that text's container an em would make it resize based on the contained text's size. However the text only appears to resize when the body font size is adjusted when set with an em. Am I doing this the wrong way round, or worse missing the point of em's and rem's altogether? Help appreciated here :)
  10. Thanks for your help with this dsoneuk. At this point in time it is the only option. It makes sense what you are saying, and can see how this is a less-than ideal scenario. I will continue to explore options...
  11. Hi there, I have a scenario where I have no option but to absolute position some elements within a div. So I set the parent to position relative, the children absolute, job done. But if I float the parent container to the right, it jumps outside its wrapper. Is there a way to stop this happening? .wrapper{} .parent{position: relative; float: right;} .child{position:absolute;} <div class="wrapper"> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </div> Thanks
  12. ben03

    Can Input field fill remaining width?

    Thank you, this is well considered! help is much appreciated
  13. Hi, I am attempting to create a form control with an input field in the centre, and plus/minus buttons either side. The buttons have an absolute position set so they remain at either edge of the parent container, with the input (ideally) adjusting in with to make up the remaining width. Only in practice it doesn't. I can't really set a width to the input as it needs to adjust the width to for different screen widths. The code: .responsive-container{position: relative; width: 100%;} .minus-button{position: absolute; left: 0; width: 40px;} input{position: absolute; left: 40px; right: 40px; width: auto;} .plus-button{position: absolute; right: 0; width: 40px;} <div class="responsive-container"> <a class="minus-button">-</a> <input> <a class="plus-button">+</a> </div> Hopefully you can see what I am trying to achieve here. If I set the input to 100% width, it goes beyond the container because it has been budged by 40px. Setting it's width to auto doesn't seem to fill the space correctly. Any pointers here appreciated!
  14. ben03

    Fixed sidebar issue

    Ah good shout, Thanks for your help on this.
  15. ben03

    Fixed sidebar issue

    Hi there, I am trying to build an expanding sidebar menu that is absolute positioned to the left of the screen and spans top to bottom. I don't want to be using fixed position, as the sidebar would have elements that would be hidden beneath the fold on mobile landscape that wouldn't be accessible. So it needs to scroll with the page content. However when using absolute positioning, the container finishes wherever the bottom of the browser is, and is simply cut off there, which looks bad if the rest of the screen content requires scrolling. What I am using: .expanded-menu, .collapsed-menu { position: absolute; overflow: hidden; background-color:$dark-blue; top: 0px; left: 0px; bottom: 0px; z-index: 5; @include transition (all 0.5s ease-in-out); } .collapsed-menu { width: 50px; } .expanded-menu { width: 170px; } Am not sure if this is asking the impossible, or whether the answer is staring me in the face and I've looked too long at it. Help appreciated here Thanks