I need to show an image next to a textarea using Bootstrap 4. But I have a display problem:
What I want is that image and textarea it looks like:
always look like the previous image both on the pc and in the responsive mode.
This is the code of my actual angular HTML component:
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4">
<img
data-src="holder.js/200x200"
class="rounded float-left"
alt="100x100"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164e3f66702%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164e3f66702%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
style="width: 150px; height: 150px; margin:5px;">
</div>
<div class="col-lg-8">
<label for="modifications">Modificaciones al diseño</label>
<textarea
class="form-control"
id="modifications"
rows="4"
required
[(ngModel)]="mModifications"
name="modifications"
#modifications="ngModel"
[ngClass]="{'is-valid': modifications.valid && modifications.touched, 'is-invalid': modifications.invalid && modifications.touched}">
</textarea>
<small *ngIf="modifications.untouched || modifications.valid && modifications.touched" class="form-text text-muted">Se conciso en la descripción, esto ayuda a nuestros expertos a estar preparados el día de la visita.</small>
<small *ngIf="modifications.invalid && modifications.touched" class="form-text text-muted-error">Debes describir el trabajo a realizar</small>
</div>
</div>
</div>
</div>
I have tried several ways to change the css to get this, but I could not.
Thank you very much!
<div class="container">
<div class="row">
<div class="col-lg-4">
<img
data-src="holder.js/200x200"
class="rounded float-left"
alt="100x100"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164e3f66702%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164e3f66702%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true">
</div>
<div class="col-lg-8">
<label for="modifications">Modificaciones al diseño</label>
<textarea
class="form-control"
id="modifications"
rows="4"
required
[(ngModel)]="mModifications"
name="modifications"
#modifications="ngModel"
[ngClass]="{'is-valid': modifications.valid && modifications.touched, 'is-invalid': modifications.invalid && modifications.touched}">
</textarea>
<small *ngIf="modifications.untouched || modifications.valid && modifications.touched" class="form-text text-muted">Se conciso en la descripción, esto ayuda a nuestros expertos a estar preparados el día de la visita.</small>
<small *ngIf="modifications.invalid && modifications.touched" class="form-text text-muted-error">Debes describir el trabajo a realizar</small>
</div>
</div>
</div>
Just remove the col-lg-12 div altogether.
https://codepen.io/anon/pen/jpYQQK
in your html
<div class="col-md-12" id="dvImageTextBox">
<input id="cc-cvc" placeholder="CVC" formControlName="cvc" type="text" autocomplete="off" ccCvc>
<img src="assets/citybook/images/CVV.png" height="45px" width="75px" />
</div>
css
#dvImageTextBox
{
position: relative;
}
#dvImageTextBox input
{
display: block;
width: 100%;
}
#dvImageTextBox img
{
position: absolute;
top: 5px;
right: 5px;
}
Related
I have div as a container and inside an input and other div with other elements.What i want is to center the input which is above the div where error messages should be displayed.
Right now they are starting as expected at the same point from left.
.con {
display:flex;
justify-content: space-between;
}
<div class="con">
<!-- <span class="match-result__score">{{ match.home_team_final_points }} : {{ match.away_team_final_points }}</span> -->
<div>
<input placeholder="Home team score" class="home-team-input" type="number"
[(ngModel)]="predictionService.predictionFormModel.home_team_predicted_points"
name="homeTeamPrediction" id="home-team" #homeTeamPredictionVal="ngModel" min="0" max="1000" required
pattern="^[1-1]?[0-9]$" />
<div class="pr"
*ngIf="homeTeamPredictionVal.invalid && (homeTeamPredictionVal.dirty || homeTeamPredictionVal.touched)"
class="alert alert-danger absolute-home-team">
<div *ngIf="homeTeamPredictionVal.errors.required">This field is required.</div>
<div *ngIf="homeTeamPredictionVal.errors.pattern">The score prediction should be between 0-1000.</div>
</div>
</div>
<div>
<input placeholder="Away team score" class="away-team-input" type="number"
[(ngModel)]="predictionService.predictionFormModel.away_team_predicted_points"
name="awayTeamPrediction" id="away-team" #awayTeamPredictionVal="ngModel" min="0" max="1000" required
pattern="^[1-1]?[0-9]$" />
<div
*ngIf="awayTeamPredictionVal.invalid && (awayTeamPredictionVal.dirty || awayTeamPredictionVal.touched)"
class="alert alert-danger absolute-away-team">
<div *ngIf="awayTeamPredictionVal.errors.required">This field is required.</div>
<div *ngIf="awayTeamPredictionVal.errors.pattern">The score prediction should be from 0 until 1000.
</div>
</div>
</div>
</div>
you can simply add : text-align: center; , and if you want to make your input take all the space : add width: 100%, here is the fix of your problem: https://stackblitz.com/edit/angular-ct3fzx
CSS :
.input-container{
text-align: center; // to center the input in the div
}
.home-team-input{
width: 100%; // to make the input's width 100%
margin-top:5px; //to add some space
}
.away-team-input{
width: 100% // to make the input's width 100%
margin-top:5px; //to add some space
}
HTML :
<div class="con">
<!-- <span class="match-result__score">{{ match.home_team_final_points }} : {{ match.away_team_final_points }}</span> -->
<div class="input-container">
<input placeholder="Home team score" class="home-team-input" type="number"
[(ngModel)]="predictionService.predictionFormModel.home_team_predicted_points"
name="homeTeamPrediction" id="home-team" #homeTeamPredictionVal="ngModel" min="0" max="1000" required
pattern="^[1-1]?[0-9]$" />
<div class="pr"
*ngIf="homeTeamPredictionVal.invalid && (homeTeamPredictionVal.dirty || homeTeamPredictionVal.touched)"
class="alert alert-danger absolute-home-team">
<div *ngIf="homeTeamPredictionVal.errors.required">This field is required.</div>
<div *ngIf="homeTeamPredictionVal.errors.pattern">The score prediction should be between 0-1000.</div>
</div>
</div >
<div class="input-container">
<input placeholder="Away team score" class="away-team-input" type="number"
[(ngModel)]="predictionService.predictionFormModel.away_team_predicted_points"
name="awayTeamPrediction" id="away-team" #awayTeamPredictionVal="ngModel" min="0" max="1000" required
pattern="^[1-1]?[0-9]$" />
<div
*ngIf="awayTeamPredictionVal.invalid && (awayTeamPredictionVal.dirty || awayTeamPredictionVal.touched)"
class="alert alert-danger absolute-away-team">
<div *ngIf="awayTeamPredictionVal.errors.required">This field is required.</div>
<div *ngIf="awayTeamPredictionVal.errors.pattern">The score prediction should be from 0 until 1000.
</div>
</div>
</div>
</div>
How can I use inline css to change the button and hover colors in the embedded Mailchimp form on my site Homeschool With Love? I would like the background color to be #0A99AA and the hover color to be #d40000. It is a Wordpress.org site. Can you please show what code I should insert and where I should insert it? Thanks. Here's the code I have right now:
<div style="border-style: solid; border-width: 2px; border-color: #0A99AA;">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//homeschoolwithlove.us13.list-manage.com/subscribe/post?u=74d56fdb848e8be499cc4df0e&id=a119f30caa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div style="text-align: center; color: #d40000; font-size: 120%; padding-right: 10px; padding-left: 10 px;">
<h3>Sign up for the Homeschool With Love Newsletter and get the Angel Learning Resource Pack FREE</h3>
</div>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none">
</div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_74d56fdb848e8be499cc4df0e_a119f30caa" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
add these two lines immediately after the #mc_embed_signup line:
#mc-embedded-subscribe { background-color: #0a99a !important; }
#mc-embedded-subscribe:hover { background-color: #d40000 !important; }
I'm a little bit desesparate, i have tried multiple things and nothing is working. So my issue is the following :
Everytime i click on a input field, the background resize by himself, i have a blank space on the bottom and on the top.
I have added :
cordova.plugins.Keyboard.disableScroll(true);
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.disableScroll(true);
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
login.html
<ion-view view-title="Login" align-title="left">
<ion-content class="background">
<div class="hero no-header flat">
<div class="content" style="bottom: 0px;">
<div class="app-icon"></div>
<h1 style="text-transform: uppercase;">App</h1>
</div>
</div>
<div class="list padding" style="margin-top: 25px;">
<label style="margin-bottom: 20px; display: block;">
<input type="text" placeholder="Adresse e-mail" ng-model="data.email" class="customInput">
</label>
<label style="margin-bottom: 20px; display: block;">
<input type="password" placeholder="Mot de passe" ng-model="data.password" class="customInput">
</label>
</div>
<div class="button-bar padding">
<button class="button button-small button-border icon-left ion-social-google button-assertive-900" ng-click="login(data)">Connexion</button>
<button class="button button-small button-border icon-left ion-social-facebook button-positive-900">Facebook</button>
</div>
<div class="padding">
<button class="button button-full button-register ink" ui-sref="app.register">Créer votre compte</button>
</div>
</ion-content>
.background.scroll-content {
background: url('../img/login.jpg') no-repeat;
background-size: cover;
background-position: center;
margin: auto;
z-index: 2;
}
The issue is that when the keyboard is shown the background resizes or the keyboard pushes the background image up.
Hmm, please explain better. I've tried your code here: http://play.ionic.io/app/e9abbb2a5670 but I dont se anything wrong.
My page is divided in 3 parts and i have used flex box model for the layout. First part is top-panel.jsp which i have included explicitly in every page of my website. second part is left body and third is right body which i divided using the concept of "div" and flex but now i want to bring the left-body div and right-body div into a single div but it is not working on my page.
The code is:
<%# include file="top-panel.jsp" %>
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin" />
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer" />
<input type="hidden" name="refNum" value="${next.key}"> ${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/>
<br/>
<br/>
<br/>
<br/>
<h3>Application under review</h3>
<hr id="hr-thin" />
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer" /> ${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p>
<h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p>
<h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p>
<h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p>
<h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
When i add the whole code of left body and right body in a single div, The layout completely goes away. If someonecan help me resolve it. it would be great.
The css of left body and right body is:
.left_body {
position: relative;
width: 69%;
margin-top: 1px;
}
.right_body {
position: relative;
/* display:block; */
width: 29%;
/* margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px; */
}
.right-box {
margin-top: 48px;
border: thin solid #BDBDBD;
border-radius: 5px;
}
You needs to use float and clearfix class. please see the demo.
.left_body {
position: relative;
width: 69%;
margin-top: 1px;
float: left;
}
.right_body {
position: relative;
display: block;
width: 29%;
float: left;
}
.clearfix:after{
content: " ";
display: table;
}
.clearfix:before{
content: " ";
display: table;
}
.clearfix{
clear: both;
}
<div class="main clearfix">
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
<input type="hidden" name="refNum" value="${next.key}">
${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/><br/><br/><br/><br/>
<h3>Application under review</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
<div>
Try this in place of your stylesheet.
.left_body{
position:relative;
width:69%;
margin-top:1px;
margin-right: 0px;
margin-left: 0px;
float: left;
height: 100%;
}
.right_body{
position:relative;
/* display:block; */
width:29%;
/* margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px; */
margin-right: 0px;
margin-left: 0px;
float: left;
height: 100%;
}
.right-box{
margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px;
}
.main_body{
width: 100%;
height: 100%;
}
and your code should be like this :-
<body>
<div class="main_body">
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
<input type="hidden" name="refNum" value="${next.key}">
${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/><br/><br/><br/><br/>
<h3>Application under review</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
</div>
</body>
If you completely want to remove the left_body and right_body tags from your page just remove them and try this :-
.right-box{
margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px;
width: 29%;
}
.form_area{
width: 69%;
}
This is my first post here and I'm French, I beg your pardon for the language ...
I created a system columns in css, combining the display rule: table-cell and percentages with .columns class.
I would like a .columns child element may be equivalent in width to two or more default items if necessary. So I created classes (.C2, .C3, .C4 ...) to be affixed to the relevant child elements (.C2 class for 2 off items, etc).
This solution works very well in a form (exactly in the form element) but I can not reproduce this behaviour within a single div. So I tried to get all the features of the form element css to affix them to the div... without result.
Here is an example :
#import url(http://scriptura.github.io/Styles/Public/Main.css);
<html>
<body itemscope="itemscope" itemtype="https://schema.org/WebPage" class="onepage-color">
<section class="section">
<div class="wrap grid12">
<h2 class="highlight">Test Columns</h2>
<div class="columns">
<div>
<h2 class="h5 highlight">Test n°1</h2>
<p><code>form .columns</code></p>
<form>
<div class="columns-smallspace">
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c2">
<input type="text" value=".c2"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c3">
<input type="text" value=".c3"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
</form>
<p class="message-success">Ici, on voit que la colonne comportant l'input .c2, prend bien la place de deux colonnes quand elle est placée dans un <code>form</code>. Idem pour .c3 qui prend la place de trois colonnes.</p>
</div>
<div>
<h2 class="h5 highlight">Test n°2</h2>
<p><code>div .columns</code></p>
<div style="display:table;" class="elleEstIci">
<div class="columns-smallspace">
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c2">
<input type="text" value=".c2"/>
</div>
<div class="input">
<input type="text"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
<div class="columns-smallspace">
<div class="input c3">
<input type="text" value=".c3"/>
</div>
<div class="input">
<input type="text"/>
</div>
</div>
</div>
<p class="message-error">La même classe .c2 placée dans le même contexte, à l'exception notable d'une <code>div</code> à la place du <code>form</code>, donne lieu à une anarchie totale sur la deuxième ligne (idem pour .c3)...</p>
</div>
</div>
<h2 class="h5 highlight">Quid ?</h2>
<p class="message">Comment configurer la div parente du deuxième test (div.elleEstIci) de manière à arriver au même résultat que le premier exemple ?<br/>J'ai l'impression d'avoir tout essayé (display:table, etc)...</p>
<p class="message-info">Vous trouverez la feuille de style complète à cette addresse (cf. lignes 437+) : Scriptura sur Github.</p>
</div>
</section>
</body>
</html>
If you have a solution, and I'm interested, in advance, thank you.
All right, I found: it was necessary to declare a width: 100% on [class ^ = "columns"]> *.
So the child elements, and not the parent element as I thought at first. Sounds simple ... but afterwards I have brainstormed.
Subject resolved.