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.
Related
My block of code
<div class="form-row">
<div class="col">
<div class="search-contributor-box">
<p>
<input type="text" class="form-control search-contributor"
placeholder="Contributor" name="contributor" id="contributor"
value="Add contributor" autocomplete="off">
</p>
<div class="sub-search-contributor sub-panel" style="display: none;">
<p class="lead" style="text-align:center;color:#a9a9a9;">
<i class="fa fa-search"></i>
Looking for someone
</p>
</div>
</div>
</div>
<div class="col">
<p>
<select class="form-control form-control-sm" id="role" name="role">
<option value="developer" selected>Developer</option>
<option value="leader">Leader</option>
</select>
</p>
</div>
<div class="col">
<p>
<input type="text" class="form-control" placeholder="Salary" id="salary"
name="salary" value="">
</p>
</div>
</div>
It produce me like this:
how to style ,to get display result Looking for someone over other other div
If i dont misunderstanding, try to set
style={position: 'absolute'}
in the div u want to over
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;
}
I made this with Bootstrap 4 and I want to move button and checkbox to right but I really don't know how to do, can someone help me?
HTML Code:
<div class="col-8">
<div class="form-group" style="text-align:right">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Lascia anche tu una dedica sul profilo di #xdekus">
</textarea>
<div class="form-row align-items-center" style="margin-top:1%;text-align:right">
<div class="col-auto">
<button type="submit" class="btn" style="background-color: #5EBD63; color:white; cursor:pointer; margin-top:1%;">Invia</button>
</div>
<div class="col-auto">
<label class="custom-control custom-checkbox" style="margin-bottom: 0px;">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Lascia la dedica in forma anonima.</span>
</label>
</div>
</div>
</div>
Try the below code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-8">
<div class="form-group" style="text-align:right">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Lascia anche tu una dedica sul profilo di #xdekus"></textarea>
<div class="form-row align-items-center" style="margin-top:1%;text-align:right">
<div class="col-auto">
<button type="submit" class="btn" style="background-color: #5EBD63; color:white; cursor:pointer; margin-top:1%;">Invia</button>
<label class="custom-control custom-checkbox" style="margin-bottom: 0px;">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-description">Lascia la dedica in forma anonima.</span>
</label>
</div>
</div>
</div>
</div>
</body>
</html>
>
<div class="col-8">
> <div class="form-group" style="text-align:right">
> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Lascia anche tu
> una dedica sul profilo di #xdekus">
> </textarea>
> <div class="form-row align-items-center" style="margin-top:1%;text-align:right">
> <div class="col-auto">
> <label class="custom-control custom-checkbox" style="margin-bottom: 0px;">
> Lascia la dedica in forma anonima. -
> <input type="checkbox" class="custom-control-input">
> </label>
> </div>
> <div class="col-auto">
> <button type="submit" class="btn" style="background-color: #5EBD63; color:white; cursor:pointer;
> margin-top:1%;">Invia</button>
> </div>
> </div>
> </div>
</div>
i am trying to make css for input box in html. i have little knowledge of css can any one please solve my small query. i want different-different style and size for all input box. want no change in html code.
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]" class="vp-input input-large" value="" type="text">
</div>
</div>
No need to change the html.
You can use a wildcard in an attribute selector
According to MDN
[attr*=value] Represents an element with an attribute name of attr the
value of which contains at least one occurrence of string "value" as
substring.
Since your inputs have distinct name properties we can target those.
The names of your inputs are
post_rehub_offers[rehub_multioffer_group][0][multioffer_url]
post_rehub_offers[rehub_multioffer_group][0][multioffer_name]
post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]
So we can target
input[name*="url"]
input[name*="name"]
input[name*="desc"]
And apply whatever styles you want to them like so:
input[name*="url"] {background:red}
input[name*="name"] {background:green}
input[name*="desc"] {background:blue}
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large" value="" type="text">
</div>
</div>
<div class="field">
<div class="input">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_desc]" class="vp-input input-large" value="" type="text">
</div>
</div>
Write a CSS referring the below example.
<html>
<head>
<style>
input {
width: 100%;
box-sizing: border-box; }
</style>
</head>
</html>
Put this script in the head tag of html.
.input-element-1{
width:300px;
}
.input-element-2{
width:200px;
}
<div class="field">
<div class="input1">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_url]" class="vp-input input-large input-element-1" value="" type="text">
</div>
</div>
<div class="field1">
<div class="input2">
<input name="post_rehub_offers[rehub_multioffer_group][0][multioffer_name]" class="vp-input input-large input-element-2" value="" type="text">
</div>
</div>
Searched this place and tried the options suggested on different answeres, such as "display: block", float:left etc, but I cant manage to get them on the same line.
Here is the code the plugin have:
<div class="gift-certificate sc_info_box">
<h3>Mottagare av presentkort</h3>
<div class="gift-certificate-show-form">
<p>Vem vill du skicka ditt presentkort till?</p>
<ul class="show_hide_list" style="list-style-type: none;">
<li><input type="radio" id="hide_form" name="is_gift" value="no" checked="checked"> <label for="hide_form">Till mig!</label></li>
<li>
<input type="radio" id="show_form" name="is_gift" value="yes"> <label for="show_form">Till någon annan!</label>
<ul class="single_multi_list" style="list-style-type: none;">
<li><input type="radio" id="send_to_one" name="sc_send_to" value="one" checked="checked"> <label for="send_to_one">Send to one person</label>
<input type="radio" id="send_to_many" name="sc_send_to" value="many"> <label for="send_to_many">Send to different people</label></li>
</ul>
</li>
</ul>
</div>
<div class="gift-certificate-receiver-detail-form">
<div class="clear"></div>
<div id="gift-certificate-receiver-form-multi">
<div class="form_table">
<div class="email_amount">
<div class="amount"><p class="coupon_amount_label"><span class="amount">1,500 kr</span></p></div>
<div class="email"><input class="gift_receiver_email" type="text" placeholder="Email address..." name="gift_receiver_email[9216][]" value=""></div>
</div>
<div class="message_row">
<div class="sc_message"><textarea placeholder="Message..." class="gift_receiver_message" name="gift_receiver_message[9216][]" cols="50" rows="5"></textarea></div>
</div>
</div>
</div>
<div id="gift-certificate-receiver-form-single">
<div class="form_table">
<div class="email_amount">
<div class="amount"><p class="coupon_amount_label"><span class="amount">1,500 kr</span></p></div>
<div class="email"><input class="gift_receiver_email" type="text" placeholder="Mottagarens E-mail..." name="gift_receiver_email[0][0]" value=""></div>
</div>
<div class="message_row">
<div class="message"><textarea placeholder="Ditt meddelande..." class="gift_receiver_message" name="gift_receiver_message[0][0]" cols="50" rows="5"></textarea></div>
</div>
</div>
</div>
</div></div>
This displays:
So question is: How would I go about to get the text next to its button on the 2 rows? I need to work on mobiles aswell if possible.
Make your CSS:
li input[type="radio"], li label {
display: inline-block;
}
Their default layout is display: block which puts them on their own line regardless that you have placed them within one tag.