last day (14 days later) » 

3:48 PM
1
A: Circular step indicator step name position

dippasJust add to your .progress .circle .title a white-space:pre and to have space between words increase width here .progress .bar from 80px to 100px or whatever you prefer. See snippet below var i = 1; $('.progress .circle').removeClass().addClass('circle'); $('.progress .bar').removeClass()...

 
Is it possible to center text below circles? right now they are aligned left.
 
They were already aligned left in your snippet so I guess my answer is correct right? I tried to align my snippet center but I couldn't manage to do it.
 
One more thing: Can text be splitted into separate lines? Your solution is nice, but as I asked in question (last sentence) ideally I would like to have one word per line
 
Sorry I misread your last line. But from my tests the Issue is caused by having 2 lines as you mentioned. and you probably have to change a few more things including HTML markup to make this work as you intended.
 
I don't mind changing markup :) I know I can align every title separately, but I'll use progress in multiple places, so I'd like it to align itself.
 
3:48 PM
let me know if this works for you: jsfiddle.net/38530dsg
 
Now lines in top and bottom progressbar are not aligned. Progress bar with 5 steps has line moved to top and second progress bar (with 3 steps) has line moved to bottom.
 
See updated answer
 
Nice work :) i just edited my question with more details. I think that image will be better than my poor English. I'd like text to move to second line if it won't fit in box, so "Order informations" would be in two lines, "step 2" in one and "Something really looong" in 3. Is this possible?
Fiddle with current code: jsfiddle.net/Misiu/40udkfov/9
 
answer updated, please take a look
 
I added width to title and changed margin left a bit, so now it aligns better, see here: jsfiddle.net/Misiu/40udkfov/11 If You have other ideas how to improve it please write. Thanks for help :)
Sorry for all the comments but I want this to look as good as possible
 
3:49 PM
hey
 
and first of all thanks for help! :)
 
I guess I solve your main issue right?
 
Yes, of course!
I just started playing with html and css and any other tips from pro are welcome :)
I want to have my code as good as possible
 
So I guess you caould mark my answer as accepted right?
I'm no pro, I just know a few things
 
I just marked is as answer :)
 
3:51 PM
I'm wondering if you have more things to solve here?
 
I'm wondering how to make it responsible
 
responsive..
 
right now I'll use in on bootstrap 3 webpage
so propably on phone it won't look as good as on desktop
 
My opinion is that you should get that code I gave you (or the fiddle you have ) and ask another question here mentioniong that you are using a framework called Bootstrap 3
 
I'll do that :)
one more thing
 
3:54 PM
otherwise it will get confusing in this question
say.. If I can help
 
do You think markup is fine?
 
Ya it is
 
or should I use ol>li?
 
I always look at the markup
no , no need for
 
I searched on web for other progressbars and I found many using ol's
 
3:55 PM
this is not a item list
this is a step bar so it can use div/span
 
I found this
and I'm wondering which one to use
 
It all depends.. what I'm saying is that not wrong to use
and you have your markup well writen...
 
I won't take Your time anymore :) Thanks for help, I really appreciate it.
 
don't worry about it
 
have a greate day :)
 
4:00 PM
always here to help :)
you too
 

last day (14 days later) »