I have a div with few elements , my label and textbox inside a div are not well aligned , You can see the screenshot ..
Any idea to align these legal name and business name and textbox , so all the textboxes should start from the same point
thanks
Set width for your labels and inputs:
.the-label {
width: 160px;
}
.the-input {
width: 220px;
}
Here's one way you can do it:
http://jsfiddle.net/FmKfP/
You could align them using an invisible table.
<table border="0">
<tr><td>Legal Name:</td><td><input type="text"></td></tr>
<tr><td>Business Name:</td><td><input type="text"></td></tr>
</table>
You'll have to ask yourself which is worse: using a table or using enough mark-up that it looks like a table but with spans/divs instead of trs/tds. I think tables are fine in this instance (if you've worked with relational databases, it's not uncommon to have lots of tables with only 2 columns), others will assure you that it is evil.
You can use a width on your label elements as already suggested or you can use slightly less evil CSS tables.
div.pseudo-row { display: table-row }
/* input might need to go in a container and have the container set to table-cell instead */
div.pseudo-row label, div.pseudo-row input { display: table-cell }
<div class="pseudo-row">
<label for="first-item">First item</label>
<input type="text" id="first-item" />
</div>
<div class="pseudo-row">
<label for="second-item">Second item</label>
<input type="text" id="second-item" />
</div>
http://www.vanseodesign.com/css/tables/
For the record, I would just use tables in this instance and save the CSS table display properties for another day.
Related
I am having a problem with the spacing of expansionpanels inside a flex row
I have multiple Mat-Expansion-Panel inside an ngFor inside there are multiple items, and every panel has different item length.
Now when I expand one panel, the one beside it will also expand to the same height but without showing the item (since its not really expanded)
I have created a stackblitz: https://stackblitz.com/edit/mat-expansion-panel-x8qz9z
Since my panellist is a seperate component and is used multiple times with different layout, do I really need to make 2 seperate columns inside the *ngFor to make this work?
Edit1: I have tried height:max-content on the mat-expansion-panel but the problem is panel 3 should move up under panel one.
The same problem exists for align-items:baseline; on the container
Kind regards
It can only be done with 2 separate columns. You can split your array into two columns, or however many you may need like this:
columns = [
this.panels.slice(0, Math.ceil(this.panels.length / 2)),
this.panels.slice(Math.ceil(this.panels.length / 2))
];
You can use this array in your template:
<div class="panel-container">
<div class="panel-column" *ngFor="let columnPanels of columns">
<mat-expansion-panel class="panel" *ngFor="let panel of columnPanels">
<mat-expansion-panel-header>
{{panel.name}}
</mat-expansion-panel-header>
<div *ngFor="let item of panel.items">{{item}}</div>
</mat-expansion-panel>
</div>
</div>
And update your css:
.panel-container {
display:flex;
flex-direction:row;
}
.panel-column {
flex: 1;
}
.panel {
margin: 10px;
height: max-content;
}
stack
I have the following style set for labels of a particular form:
#incidentForm label {
font-weight:bold;
width:40%;
vertical-align:top;
}
Which is exactly what I want for my full page form. But for the modal that allows one to update a single field from a report where someone would view the data results, I would like the label for the TEXTAREA ONLY to NOT be limited to the "width:40%". All other input types should keep the "width:40%".
I've been trying to wrap my brain around how to either do a :NOT exception to the existing label style, or somehow set a separate style based on the class of the modal. I.E.:
.updateModal label(that somehow identifies only textareas) {
width:100%;
}
Here is an example of the structure of the update modal itself:
<div id="Return" class="updateModal">
<div id="incidentForm">
<div class="[name of this incident form type]">
<form class="AjaxForm" action="https://blahblahblah" method="post">
<fieldset id="fs1">
<legend>Edit report field</legend>
<div class="field">
<label for="31">This is the label for this text area field:</label>
<textarea id="31" name="31"></textarea>
</div>
</fieldset>
<input value="Update record" type="submit">
</form>
</div>
</div>
</div>
Please note that the id for the textarea and, thus the label for it, are generated dynamically based on the id field of the database the form information is pulled from. All of the field information is stored in a db so I would not be able to generate a specific style definition based on the id of the specific textarea itself. Or at least not that I can think of.
Does anyone have any suggestions?
Thank you very much!
The selector should be like
label[for=xxx]
{
/* ...definitions here... */
}
For multiple, you can make your selector simpler and generalize for modern browsers:
label[for^="3"] {
color: red; //It will apply to all label that starts with "3"
}
Or Simply you can write:
label[for="31"],label[for="32"],label[for="and so on.."] {
color: red;
}
Or For General Label Simply write
label {
color: red; //It will affect to all the label in the page
}
With CSS, the subject of the selector is the last compound selector of the entire selector (https://www.w3.org/TR/selectors4/#subject). In CSS4, there is a new subject selector that will allow this. It looks like: label! + textarea. The ! means that the label selector is the subject of this selector.
Unfortunately, this is not yet implemented in any browsers (http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/). Given that, we only have the ability to look for descendants, children, and younger siblings.
If you have some ability to control your HTML, this gives us a possibility: if we flip the DOM order of the form element and label, then the label becomes the younger sibling of the textarea. This gives us the option of using the adjacent + selector. The visual ordering can be altered by using a reverse-column flexbox. Consider:
<div class="field">
<textarea id="f1">My textarea</textarea>
<label for="f1">My Label</label>
</div>
<div class="field">
<input type="text">
<label for="f1">My Label</label>
</div>
.field {
display: flex;
flex-direction: column-reverse;
margin: 1em;
}
textarea + label {
background: #faa;
}
Demo: https://codepen.io/honzie/pen/weMRam
To summarize: (1) Is it possible in CSS2.1/3? Not with the current HTML. (2) Is it possible with CSS4 (assuming browsers implement it and the spec doesn't change)? Yes, in the future.
Although I don't have any code to work with, if provide some I'll try to include it, it seems to me you should be able to add a CSS class to any label that is being used for a textarea. If backend code is using database info to decide on the element to use for a form field then you can use that logic to add the class, otherwise add it yourself when you write the HTML.
You can use the following to select and attribute of an element:
input[type="text"] {
background-color: yellow;
}
In this example when the user want to edit the row or to add a new one, you can see the width of text-area(Description column) don't follow the width of the td, so I added some CSS, but no changes. So how can I make the width take the 100% of the td using CSS ?
This is the code :
<span style="width:100%" editable-textarea="user.status" e-name="" e-form="rowform" e-ng-options="s.value as s.text for s in statuses">
{{ showStatus(user) }}
</span>
This is the EXAMPLE.
The span that you are adding width: 100% to actually gets hidden. What you need to do is update the CSS for the class of the span that appears that wraps the inputs. Seems to be .editable-wrap
http://jsfiddle.net/NfPcH/660/
I wonder how ExtJS makes columns hidden without any visible CSS changes!
The problem that I had - I can't set the CSS rule to hide children icon in that hidden column. F.e. if the hidden td had class 'hidden', I can use something like that:
td.hidden img {display:none;}
But in this case I can do it only in renderer with manipulating grid.columns[col].isHidden().
renderer: function(value,td,record,row,col,store,view) {
return grid.columns[col].isHidden() ? '' : someFunctionToRenderColumn();
},
It's ok, but then if I show hidden column it will not refresh grid and shows empty column. Of course I can add one more event for show/hide that column, but it is so difficult! Has it any simple way?
It gives them a width of 0px:
<colgroup>
<col class="x-grid-cell-gridcolumn-1023" style="width: 0px;">
</colgroup>
... and that should hide your img too. Except if you've given them an absolute positionning or something. You should try to position your img using float, margin and padding. Or you will have to toggle the 'hidden' class yourself using the hide and show event of the column.
You can hide columns by targeting the corresponding col element. No need to put classes on each of the individual tds.
Here's a fiddle I made earlier: http://jsfiddle.net/MrLister/MupLH/
which has
<table>
<col><col class="invisible"><col>
...
and the CSS:
.invisible {visibility:collapse}
But you don't even need a class; you can also use col:nth-child(2) if you know the column number.
I'm trying to create a css-only select thingy.
I've got a container with three radiobuttons. The active radiobutton must be placed in the middle (vertically) of the container. The radiobuttons have to move as a whole, meaning that if the top radiobutton is selected the other two have to be spaced just beneath it; and if the middle radiobutton is selected, the other radiobuttons have to be spaced just above and just below the selected radiobutton.
It's hard to explain, but hear is what I've got so far.
http://jsfiddle.net/PaulvdDool/ZwdUL/1/
In this example the blue button is in the middle of the container. When I select the green button, all three buttons must move down 125px (the height of one button). But I can't make it work.
I can't seem to affect the other radiobuttons when one radio button is checked. I've tried to put an extra container around the buttons and change the margin-top, but I could not affect the container.
<div id="extracontainer">
<form>
<radiobutton 1 + label>
<radiobutton 2 + label>
<radiobutton 3 + label>
</form>
</div>
I've also tried to put an extra div above the buttons and change the height, but I couldn't affect this div too.
<div id="spacer"></div>
<form radiobuttons>
I'm guessing I'm using the wrong selector, doing something else wrong or am trying to do something impossible with just css.
Any CSS solutions?
What you really need here is jQuery or some other JavaScript library (or if you're a native-js freak, a pure JavaScript). You need to capture events, and then to change the CSS properties of corresponding elements you want to update.
It is simply not possible to do this via CSS at this point.
I hope this helps.
This can be done. It is all a matter of specificity as well as document structure.
I had to add a class to each label: cPantsx where x is the same number as the pants radio.
Then I then had to rearrange the html as follows:
<div id="pantscontainer">
<input type="radio" name="pants" id="pants1" value="pants1" />
<input type="radio" name="pants" id="pants2" value="pants1" />
<input type="radio" name="pants" id="pants3" value="pants1" />
<label for="pants1" class='cPants1'><span></span></label>
<label for="pants2" class='cPants2'><span></span></label>
<label for="pants3" class='cPants3'><span></span></label>
</div>
everything had to become position:relative; so that I could adjust the placement within the container.
After that the magic really happens here:
#pantscontainer > input[id="pants1"]:checked ~ .cPants1 span{
top:125px;
}
#pantscontainer > input[id="pants1"]:checked ~ .cPants2 span{
top:-125px;
}
#pantscontainer > input[id="pants2"]:checked ~ .cPants2 span{
top:0px;
}
#pantscontainer > input[id="pants2"]:checked ~ .cPants1 span{
top:0px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants3 span{
top:-125px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants1 span{
top:0px;
}
#pantscontainer > input[id="pants3"]:checked ~ .cPants2 span{
top:125px;
}
Basically by adjusting the placement of the elements on the page, I was able to very specifically target the elements in question and make sure that they always moved out of each others way.
Here is a fork of your fiddle
I should mention that this is by no means an easy solution. It is more like a house of cards. If you had to add more elements you would need to re-write the whole thing. It will scale, but it would take a lot of effort to do so.