css - Bootstrap 4 card-deck with wrapper element -


i'm working angular (v4.3.1) , bootstrap (v4.0.0-alpha.6). template contains 2 subcomponents so:

<div class="card-deck">     <comp1></comp1>     <comp2></comp2> </div>

both subcomponent's templates have root element's class .card bootstrap class.

<div class="card">     ... </div>

this, once compiled results in following html

<div class="card-deck">     <comp1 _nghost-c3="">         <div _ngcontent-c3="" class="card">             ...         </div>     </comp1>     <comp2 _nghost-c4="">         <div _ngcontent-c4="" class="card">             ...         </div>     </comp2> </div>

the problem .card-deck styling doesn't applyed if there element wrapping .card elements.

a bootstrap example, problem strictly related bootstrap css , not angular obviously.

<!doctype html>  <html>    <head>    <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />    <script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>    <link rel="stylesheet" href="style.css" />    <script src="script.js"></script>  </head>    <body>    <!--  displayed  -->    <div id="deck-without-wrapper" class="card-deck">      <div class="card">        <div class="card-block">          <p>card1</p>        </div>      </div>      <div class="card">        <div class="card-block">          <p>card2</p>        </div>      </div>    </div>    <br>      <!--  not displayed  -->    <div id="deck-with-wrapper" class="card-deck">      <div id="wrapper1">        <div class="card">          <div class="card-block">            <p>card1</p>          </div>        </div>      </div>      <div id="wrapper2">        <div class="card">          <div class="card-block">            <p>card2</p>          </div>        </div>      </div>    </div>  </body>    </html>

someone knows way both components structure , styling working?

thanks in advance

the wrappers causing trouble because div doesn't have flex css properties, while .card classes using flex:1 0 0;

option 1 (not sane): pretend wrappers cards, , style them card styled. advice against this. can cause number of troubles in long run. 

.card-deck > div {    display: flex;    flex: 1 0 0;    flex-direction:column;      }    .card-deck > div:not(:last-child){   margin-right:15px;   }       .card-deck > div:not(:first-child)  {  margin-left:15px;  }
<!doctype html>  <html>    <head>    <link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />    <script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>    <link rel="stylesheet" href="style.css" />    <script src="script.js"></script>  </head>    <body>    <!--  displayed  -->    <div id="deck-without-wrapper" class="card-deck">      <div class="card">        <div class="card-block">          <p>card1</p>        </div>      </div>      <div class="card">        <div class="card-block">          <p>card2</p>        </div>      </div>    </div>    <br>      <!--  not displayed  -->    <div id="deck-with-wrapper" class="card-deck">      <div id="wrapper1">        <div class="card">          <div class="card-block">            <p>card1</p>          </div>        </div>      </div>      <div id="wrapper2">        <div class="card">          <div class="card-block">            <p>card2</p>          </div>        </div>      </div>    </div>  </body>    </html>

option 2 (preferred): apply .card class angular host element wrapper thing. i've not used angular, going these docs set class on host element. using @component.host. or define rules using angulars renderer thingy. can't advice on best approach, lack knowledge on angular.

in end want end <comp1 _nghost-c3="" class="card">


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more