I have a label and inputbox(form) and I use bootstrap for CSS but my problem is when my label become 2 lines/paragraph my layout is not fixed or equal. How can I make layout looks like primary information even if text is 2 lines/paragraph.
Check image below
and I use this code
<div class="col-md-12">
<div class="col-lg-2">
<label class="control-label"><?php echo $required_notice.$val_option['option']?><?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>
<div class="controls">
<?php
$cur_value = isset($estate['option'.$val_option['id'].'_'.$key])?$estate['option'.$val_option['id'].'_'.$key]:'';
echo form_input('option'.$val_option['id'].'_'.$key, set_value('option'.$val_option['id'].'_'.$key, $cur_value), 'class="form-control '.$val_option['type'].'" id="inputOption_'.$key.'_'.$val_option['id'].'" strlen="'.strlen($cur_value).'" placeholder="'.$val_option['option'].'" '.$required_text.' '.$max_length_text)?>
</div>
</div>
</div>
Note: I'm using foreach for my fields.
Thank you.
If you like to have an ellipsis like the word would be like "your word is l..." then you have to apply following line of code to your label.
.your-label {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
}
if you got any problems do let me know :)
You can use flex style from CSS. align-items: flex-end will align all input box from bottom not top. So it will looks better.
<div class="container">
<div class="row">
<form>
<div class="col-lg-2">
<label class="control-label"><?php echo $required_notice.$val_option['option']?><?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>
<div class="controls">
<?php
$cur_value = isset($estate['option'.$val_option['id'].'_'.$key])?$estate['option'.$val_option['id'].'_'.$key]:'';
echo form_input('option'.$val_option['id'].'_'.$key, set_value('option'.$val_option['id'].'_'.$key, $cur_value), 'class="form-control '.$val_option['type'].'" id="inputOption_'.$key.'_'.$val_option['id'].'" strlen="'.strlen($cur_value).'" placeholder="'.$val_option['option'].'" '.$required_text.' '.$max_length_text)?>
</div>
</div>
</form>
</div>
</div>
form {
display: flex;
flex-direction: row;
align-items: flex-end;
}
Related
Not a huge deal but posed an interesting question for me so curious how I can do it
I have a basic form here:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/7HAnU.png
As you can see my error messages's left side does not line up with the edge of the input labels.
How can I get a child element to align with it's parent's sibling using flexbox?
Here's a simplified version of the issue:
<div class="flex-container">
<div class="inputs">
<label> input1 </label>
<input />
<div>
<ul> <li> errors </i> </ul>
<div class="inputs">
<label> input1 </label>
<input />
<div>
<div>
where:
.flex-container {
display: flex;
flex-direction: column;
margin: auto;
}
.inputs {
margin: auto;
}
Now as you can see the ul actually does align BUT the internal items li do not align. I'm trying to do this without pixel pushing (manually moving using margin or padding).
But I also have no choice in how the errors come out meaning I have to use <ul> and <li> elements.
I am using Django templates and this is my code:
<style>
.errorlist {
list-style-type: none;
display: flex;
padding: 0;
justify-content: space-around;
}
</style>
<div style="padding:25px;text-align: center;">
<p>{% translate "Please enter your new password twice so we can verify you typed it in correctly." %}</p>
<form method="post">{% csrf_token %}
<fieldset class="module aligned" style="margin-bottom:15px;margin-left:auto;margin-right:auto">
<input style="display: none;" class="hidden" autocomplete="username" value="{{ form.user.get_username }}">
<div style="margin:auto;display:flex;flex-direction: column;">
<div class="form-row field-password1" style="display:block;">
<div style="text-align:left;color:red;list-style-type: none;">{{ form.new_password1.errors }}</div>
<div>
<label for="id_new_password1">{% translate 'New password:' %}</label>
{{ form.new_password1 }}
</div>
</div>
<div class="form-row field-password2" style="display:block;">
<div style="text-align:left;color:red;list-style-type: none;">{{ form.new_password2.errors }}</div>
<div>
<label for="id_new_password2">{% translate 'New password:' %}</label>
{{ form.new_password2 }}
</div>
</div>
<input style="display: block; width: 200px;margin-top:25px;margin:auto;color:white;" type="submit" value="{% translate 'Change my password' %}">
</div>
</fieldset>
</form>
Flexbox can only align flex items, which are defined as the direct children of a flexbox container:
The direct children of a Flex Container (elements with display: flex or display: inline-flex set on them) become flex items.
The spacing issue in this case is a product of ul styling, not flexbox. Since you have no control over the list, you can remove any offsets it introduces:
ul.errors {
padding: 0;
list-style-type: none;
}
where your error list would look something like this:
<ul class="errors>
<li> error1 </li>
<li> error2 </li>
</ul>
I created a angular dropdown component "app-ec-dropdown" using https://www.npmjs.com/package/#ng-select/ng-select
<div class="inline required">
*
</div>
<div class="input-container inline">
<ng-select
class="custom"
[items]="items"
bindLabel="Name"
bindValue="Id"
(focus)="focus()"
(close)="close()"
(clear)="clear()"
(blur)="blur()"
placeholder="Select"
[(ngModel)]="selectedId"
[required]="required"
>
</ng-select>
<div *ngIf="!validatationPassed()">
<div class="row alert alert-danger alert-div">
<span>
Required field
</span>
</div>
</div>
</div>
CSS for above component
.input-container {
width: 95%;
}
.inline {
display: inline;
}
.required {
vertical-align: top;
color: red;
width: 2%;
}
Now i am using above component in parent component
<div class="col-sm-4">
<app-ec-dropdown
name="RegionId"
[items]="regions"
(onChange)="onRegionChange($event)"
[selectedId]="state.RegionId"
[required]="regionDropDownValidator.required"
[ecDropDownValidator]="regionDropDownValidator"
[(ngModel)]="regionDropDownValidator.selectedId"
ngDefaultControl
> </app-ec-dropdown>
</div>
for Region Dropdown, I want red asterisk, to be placed as in "State Name" textbox and then dropdown and validation message in the adjacent div.
Screen grab:
After playing around with your code, I thought about the way that I would do it.
I noticed that the actual label isn't included in your example above, so I assume that it's being included within a column to the left of the <div class="col-sm-4"> element where you're consuming the <app-ec-dropdown> component which I assume that you have defined with the first code block.
My advice which will be the easiest and most correct (in my opinion), would be to add the label as an #Input property in your code for the <app-ec-dropdown> component.
Then you can place it closer to the asterisk character.
So add this to your EcDropdownComponent TypeScript:
#Input()
public label: string = '';
Then add the input attribute where you consume your component:
<app-ec-dropdown
name="RegionId"
[items]="regions"
label="State Name"
(onChange)="onRegionChange($event)"
[selectedId]="state.RegionId"
[required]="regionDropDownValidator.required"
[ecDropDownValidator]="regionDropDownValidator"
[(ngModel)]="regionDropDownValidator.selectedId"
ngDefaultControl>
</app-ec-dropdown>
Then you can use the CSS grid to define the layout within your component:
<div class="row">
<!-- Label -->
<div class="col-sm-4">
<div class="label">
{{label}}
<span class="inline required"> * </span>
</div>
</div>
<!-- Select Input -->
<div class="col-md-8">
<div class="input-container inline">
<ng-select
class="custom"
[items]="items"
bindLabel="Name"
bindValue="Id"
(focus)="focus.emit()"
(close)="close.emit()"
(clear)="clear.emit()"
(blur)="blur.emit()"
placeholder="Select"
[(ngModel)]="selectedId"
[required]="required">
</ng-select>
<div *ngIf="!validatationPassed()">
<div class="row alert alert-danger alert-div">
<span>
Required field
</span>
</div>
</div>
</div>
</div>
</div>
The nice thing about this approach is that you have a completely self-contained component which doesn't need to worry about anything outside of it's scope.
If you're concerned about variable widths using Bootstrap and the grid system.
You can also pass the grid column style in as an #Input property to the component so that you're providing more control to the consuming component.
I am having trouble trying to have a responsive grid of 3 boxes with some aligned content inside using the library Bulma. I would like to make it work still maintaining the level inside a box if possible.
Any help would be appreciated.
This is the result I expect:
But when decreasing the width, it breaks:
This is the code I am using:
<div className="columns sub">
{this.props.options.map(option => (
<div className="column is-one-third" key={option.id}>
<div
name={option.id}
className={
`box ` +
(this.props.optionToBeChosen === option.id
? "box-is-active"
: "")
}
onClick={() => this.props.onClick(option.id)}
>
<div className="level is-mobile">
<div className="level-item level-left">
<div>
<p className="box-text-title">{option.title}</p>
<p className="box-text-small">{option.description}</p>
<p className="box-text-small">{option.description2}</p>
</div>
</div>
<div className="level-item level-right has-text-right">
<div>
<p className="box-text-demo">{option.cta}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
The Bulma levels are explicitly told not to shrink
.level-left, .level-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
You'll have to override that to get the levels to not break out of the .box elements.
Rather than overriding ALL level items, I suggest you add a custom class to those levels that you want to be able to shrink.
Something like
<div class="level is-mobile level-is-shrinkable">
Level items here...
</div>
<style>
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
</style>
In my case, I had to add a third styling condition for centered level-item elements:
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-item,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
Many thanks to just-a-web-designer for his|her answer.
I want to style the font/text to bold to text inside the
col-md-6 label-wrapper
I tried some css styling but does not affect the current font of my webpage when printing
.col-md-6{
display: relative;
}
.col-md-6 label-wrapper{
font-weight: bold;
}
Also I want to display it horizontaly in print, something like
purchase order: 34567
name: abcd
street: ca
qty: ty
Currently, when I print the selected html content using Javascript print function, the output looks like this
purchase order:
34567
name:
abcd
qty:
67
My content
<div class="col-md-4 order-column prod-wrapper">
<h3 class="vo-title"> Order Details </h3>
<div class="prod-row vo-content">
<div class="col-md-6 label-wrapper"> Purchase Order #: </div>
<div class="col-md-6 "> <?php echo $order[0]['po_number']; ?></div>
</div>
</div>
HTML:
<div class="col-md-4 order-column prod-wrapper">
<h3 class="vo-title"> Order Details </h3>
<div class="prod-row vo-content">
<div class="col-md-6 label-wrapper"> Purchase Order #: </div>
<div class="col-md-6 result ">3567</div>
</div>
</div>
CSS :
.col-md-6{
display: relative;
}
.label-wrapper{
font-weight: bold !important;
}
.col-md-6 {
display: inline;
}
Demo Link
Try font-weight:bold !important; or font-weight:600;
If that doesn't work, font-weight: 600 !important;
!important overrides the previous statement.
OR, if that doesn't work, play around with the .bold() function, or place the output between <b></b> or <strong></strong> tags.
On you CSS you have:
.col-md-6 label-wrapper{
font-weight: bold;
}
You forgot to set .(dot) on labe-wrapper (it's a class)
.col-md-6 .label-wrapper{
font-weight: bold;
}
To display both lines in the same line use on col-md-6
display: inline;
I'll guess You need for the font problem to use
.label-wrapper
{
font-weight: 600+ (<900) (!important if the style sheet is override by bootstrap)
}
And to get your element in one line you can use white-space: nowrap
try this,
.my-data {
font-weight:bold !important;}
<div class"col-md-6 my-data">Purchase Order#:
<span><?php echo echo $order[0]['po_number']; ?></span>
</div>
I'm dynamically adding select dropdowns with jquery into a div. I would like to begin with the div centered and then as the new dropdowns are added to move out from the center outwards.
Here is the CSS for the divs:
#pageMiddle{
width:940px;
margin:0 auto;
text-align: left;
position:relative;
}
#searchBar{
background: red;
width:500px;
margin: 0 auto;
}
#searchwrapper{
width:850px;
background: blue;
}
#searchwrapper form {
display:inline ;
margin: 0 auto;
}
and the actual HTML:
<div id="pageMiddle">
<div id="holder">
<div id="searchBar">
<div id="searchwrapper">
<form name="search_input">
I am looking for a
<div id="sBar1" style="display:inline;">
<select id="search_level" class="selectSearchBar" name="search_level">
<?php echo "<option>Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}?>
</select>
</div>
<div id="sBar2" class="selectSearchBar"></div>
<div id="sBar3" class="selectSearchBar"></div>
tutor in
<input type=text class="searchbox" id="location" value="Location"/>
<input type=image src="images/search_icon.png " class="searchbox_submit" name="searchbox_submit" onclick="searchLocations()" value=""></form>
</div>
</div>
</div>
</div>
I assume you mean something like this?
Notice the blue section is centered in the red section. This was done with the table display, which allows something of indefinite size to be centered via automatic margins. Otherwise, it must be a block element and have a definite size.
#searchwrapper
{
display: table;
margin: 0 auto;
}
<?php echo "<option style="text-align:center;">Level</option>";
while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
echo "<option value=".$row['id'].">".$row['level']."</option>";
}?>
Let me know if this works please.