html - Segmented Progress Bar in Bootstrap 3 -

-

i have webpage user needs enter data. once enter 10 items, can continue.

i'm trying create progress bar visually represent how many items have entered/have left enter.

here image of i'm trying create

segmented progress bar

so far, closest i've gotten using bootstrap's stacked progress bars. however, stacked bars, the unfilled section single unbroken region - doesn't show how many segments left. here's fiddle showing mean.

here's markup fiddle:

<div class="container">     <div class="progress progress-bar-segmented">         <div class="progress-bar" style="width: 10%"></div>         <div class="progress-bar" style="width: 10%"></div>         <div class="progress-bar" style="width: 10%"></div>     </div> </div>

i've searched similar examples adapted meet needs, haven't had luck. i'm not sure should searching or call this. maybe considered step-wise progress bar?

any coming solution appreciated.

in case, don't want area inside items filled percentually, recommend creating ten empty divs side side, , add classes fill them color items filled.

just click run code snippet below , see mean.

.container {      width: 100%;  }    .item {      width: 10%;      border: 1px solid grey;      background-color: lightgray;      border-radius: 3px;      margin-right: 2px;      float: left;      display: block;      height: 20px;  }    .filled {      background-color: blue !important;  }
<div class="container">      <div class="item filled"></div>      <div class="item filled"></div>      <div class="item"></div>      <div class="item"></div>      <div class="item"></div>      <div class="item"></div>      <div class="item"></div>      <div class="item"></div>      <div class="item"></div>  </div>

use bootstrap component if need fill divs in percentual parts. styles, can import styles bootstrap.

but, if want hard use bootstrap component, have ugly workaround here.


Comments

Post a Comment

Popular posts from this blog

python - How to create jsonb index using GIN on SQLAlchemy? -

-
here's current code creating index jsonb. index("mytable_data_idx_id_key", mytable.data['id'].astext, postgresql_using='gin') but got error. sqlalchemy.exc.programmingerror: (psycopg2.programmingerror) data type text has no default operator class access method "gin" hint: must specify operator class index or define default operator class data type. [sql: "create index event_data_idx_id_key on event using gin ((data ->> 'id'))"] is there way create index on sqlalchemy? the postgresql specific sqlalchemy docs @ http://docs.sqlalchemy.org/en/latest/dialects/postgresql.html#operator-classes mention postgresql_ops dictionary provide "operator class" used postgresql, , provide example illustrating use: index('my_index', my_table.c.id, my_table.c.data, postgresql_ops={ 'data': 'text_pattern_ops', ...
Read more

PHP DOM loadHTML() method unusual warning -

-
i had following code works fine on localhost: $document = new domdocument(); $document->loadhtml($p_result); $form = $document->getelementsbytagname('form')->item(0); // code continues using $form variable after same code updated on outside server, loadhtml() failed , issued warning. warning: domdocument::loadhtml() expects parameter 1 valid path, string given in path/name/to/script.php returned null instead of object code pretty gets fatal error. note contents of $p_result absolutely same on outside server , on localhost. but why displays kind of warning , why not work? doesn't loadhtml() expects argument 1 string in first place? why method expects parameter 1 valid path ? just make clear i'm not calling loadhtmlfile() , i'm calling loadhtml() . thanks. you're affected one of php bugs . issue present in php 5.6.8 , 5.6.9. have affected php version on server, , bug-free version on localhost. the bug forbids null ...
Read more

c# - TransactionScope not rolling back although no complete() is called -

-
i'm using transactionscope rollback transaction fail bool errorreported = false; action<importerrorlog> newerrorcallback = e => { errorreported = true; errorcallback(e); }; using (var transaction = new transactionscope()) { foreach (importtaskdefinition task in taskdefinition) { loader.load(streamfile, newerrorcallback, task.destinationtable, processingtaskid); } if (!errorreported) transaction.complete(); } i'm sure there no transactionscope started ahead or after code. i'm using entity framework insert in db. regardless state of errorreported transaction never rolled in case of error. what missing ? transactionscope sets transaction.current . that's does. wants transacted must @ property. i believe ef each time connection opened reason. probably, connection open when scope installed. open connection inside of scope or enlist manually. ef has nasty "design decision": default opens ...
Read more