I'm trying to set the toggle buttons to the right. float, right : 0, align-self is not working for me.
What am I doing wrong ?
The picture is at the end.
HTML:
<div if:true={showCards} class='main-container'>
<div class="main-container-top">
<p class="currs-available"> {trainingPlans.length} {headerLabel} </p>
<lightning-input
class="search slds-p-vertical_small"
type="search"
onchange={handleSearch}
variant="label-hidden"
placeholder="Search" >
</lightning-input>
<c-toggle-button
class="toggle"
buttons={toggleData}
ontoggleswitch={handleToggleSwitch}
default=1>
</c-toggle-button>
</div>
.............
......
.....
and relevant CSS:
.main-container{
background: #f5f5f5;
}
.main-container-top{
display: flex;
}
.currs-available{
width: 33%;
font-size: 20px;
font-weight: 700;
padding: 9px 0 0 20px;
}
.toggle{
width: 33%;
}
Image of element
You can use position: absolute; if you're using right: 0;
Although, the display: flex; will be ignored
Related
I am trying to create Google's Advanced Search page copy. I am new to programming and I'm having 2 problems. First is that link titled "google search" should be inside the gray bar positioned at the start of the page. Second, I am trying to write css code to reverse positions of texts and their correlated input fields, because I noticed in Google's html that it is also coded in reverse and then corrected from initial position.
Help would be greatly appreciated!
.label {
color: rgb(218, 32, 32);
margin-left: 15px;
padding: 15px;
margin-bottom: 15px;
} */
html, body {
padding: 0;
margin: 0;
font-size: 16px;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color:black;
text-decoration: none;
}
.navbar a:hover{
text-decoration: underline;
}
.content {
margin-top:100px;
text-align:center;
}
#textbox {
font-size: large;
height: 30px;
width: 500px;
border-radius: 25px;
}
.graybar{
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial,sans-serif;
height: 60px;
width: 100%;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
.margin {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
body {
font-family: arial,sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Search</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
<a href="index.html">
Google Search
</a>
</div>
</div>
<div class="label">Advanced Search</div>
<h3 style="font-weight:normal">Find pages with...</h3>
<form action="https://google.com/search">
<input class="margin" value autofocus="autofocus" id="xX4UFf" name="as_q" type="text">
<label for="xX4UFf" class="float">all these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="CwYCWc" name="as_epq" type="text">
<label for="CwYCWc" class="float">this exact word or phrase:</label>
<br>
<input class="margin" value autofocus="autofocus" id="mSoczb" name="as_oq" type="text">
<label for="mSoczb" class=float>any of these words:</label>
<br>
<input class="margin" value autofocus="autofocus" id="t2dX1c" name="as_eq" type="text">
<label for="t2dX1c" class="float">none of these words:</label>
<br>
<input type="submit">
</form>
</body>
</htmL>
Here is how website looks
Assuming that you can change your HTML, flexbox is the solution to both of your issues.
Let's start with your header. You need your image and your text to be both in the grey box, with the image on the left side and the text on the right side.
If you set your header to use display: flex, then you can specify justify-content: space-between to tell the browser to render the child elements with as much space as is possible between them. For two children, that will result in the first child being on the left, and the second child being on the right. If there were more children, they'd be spaced evenly between (eg left, middle, right for three children etc.)
In your case, this would simply require adding the appropriate styling to the .graybar class which is serving as your header:
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graybar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-size: 75% 50%;
background: #f1f1f1;
font: 13px/27px Arial, sans-serif;
height: 60px;
width: 100%;
}
.navbar {
padding: 20px;
text-align: right;
size: default;
}
.navbar a {
margin: 0 10px;
color: black;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}
#image {
height: 33px;
width: 92px;
margin: 15px;
}
body {
font-family: arial, sans-serif;
}
<div class="graybar">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id=image>
<div class=navbar>
Google Search
</div>
</div>
I've left the other styling as you had in your original.
CSS's flexbox is extremely powerful; you can use it for your other issue with the labels/inputs as well, if you can modify your HTML. Looking at the actual Google advanced search page here, your HTML doesn't actually look anything like the original, so I'm assuming you're not restricted to keeping the same HTML as you have in your original post.
Let's instead structure our HTML like this:
<div class="row">
<input type="text" id="allwords" >
<label for="allwords">All these words</label>
</div>
We can now apply display: flex to each row and leverage the flex-direction property to reverse the order of the children so that the label is displayed prior to the input.
.row {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
label {
display: block;
margin-right: 8px;
}
<div class="row">
<input type="text" id="allwords">
<label for="allwords">All these words:</label>
</div>
Generally I wouldn't recommend doing it like this, but I'm equally unsure why you're trying to force inputs before labels in your HTML. :)
For more information about CSS's flexbox, I highly recommend this guide from CSS-Tricks.
I have an element (a button) and I want to position it below the bottom right corner of a textarea (there is also some more stuff on the right of the textarea. Since the width of that textarea is dependent upon the display size, I want to somehow set the left margin of that button in dependence of the width of the text area. Is that even a possible solution? I'm also using Angular 9.
I hope someone can help me.
This is the html:
<div class="user-container">
<div class="editor">
<h3>Berichte oder schreibe etwas über deinen Tag</h3>
<ckeditor
[editor]="Editor"
[(ngModel)]="editorData"
(ready)="onReady($event)"></ckeditor>
</div>
<div class="date-picker">
<h3>Wähle das Datum</h3>
<mat-form-field>
<mat-label>Wähle das Datum</mat-label>
<input matInput (dateInput)="onDateChange($event.value)" [matDatepicker]="picker" [ngModel]="date" (click)="picker.open()">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<app-emoji-rating-scale (emojiSelected)="onEmojiSelected($event)"></app-
emoji-rating-scale>
</div>
<button (click)="onSaveEntry(editorData)" mat-raised-button>Eintrag speichern</button>
<button class="calendar-button" routerLink="/calendar" mat-raised-button>Einträge anzeigen</button>
And this the css (if it helps):
h3 {
font-weight: 500;
}
.user-container {
position: relative;
height:75vh;
max-height: 300px;
}
.editor {
display: inline-block;
width: 75%;
height:70%;
}
.editor h3 {
margin-right: 20px;
vertical-align: top;
}
.date-picker {
display: inline-block;
position:absolute;
top:0px;
width: 20%;
margin-left: 10px;
}
:host ::ng-deep .ck-editor__editable_inline {
display: block;
height:100%;
border: 1px solid var(--ck-color-toolbar-border);
}
app-emoji-rating-scale {
position: absolute;
margin: 100px 0 0 10px;
}
Kind regards
Fonzane
I am trying create a login page for my app. But style does not work as I wish, here is the photo from problem
1
Here is the login.html codes
<ion-content class="app-content padding main-bg text-center">
<div class="logo animated pulse infinite">
<img src="../../assets/imgs/logo1.png" />
</div>
<form class="app-form">
<div class="list list-inset">
<label class="item item-input sec-main-text">
<input type="text" class="text-center" placeholder="username">
</label>
<label class="item item-input sec-main-text">
<input type="password" class="text-center" placeholder="Password">
</label>
</div>
<button class="button button-block button-clear main-btn main-bg-color" ng-click="goto('/app/home')">Login</button>
Register
<p class="forget" ng-click="forget_password()">Forget Password?</p>
</form>
</ion-content>
Here is the login.scss codes
.app-form .list-inset {
margin-left: 0;
margin-right: 0;
background: none;
}
.app-form {
.item-input {
margin-bottom: 20px;
background: none;
border: 1px solid;
border-radius: 30px;
padding: 5px 10px;
}
.list-inset .item {
border-radius: 30px;
height: 46px;
&.item-input input {
padding: 0;
color: white;
}
}
input {
&::-webkit-input-placeholder, &:-moz-placeholder {
color: white;
text-transform: capitalize;
}
}
}
.app-form .item-select {
select {
width: 100%;
max-width: 100%;
background: none;
text-align-last: center;
padding: 0;
text-align: -moz-center;
text-align: -webkit-center;
text-align-last: -moz-center;
text-align-last: -webkit-center;
direction: ltr;
}
&:after {
top: 60%;
right: 55px;
}
}
And here is the what I want from original login.html :)
2
And from original html's browser screenshot
3
And from my app's browser screenshot
4
Thanks for your helping :)
EDIT
After change html tags with ion tags
Ionic introduces and uses their own tags, for example, which has default styles added to it. It seems that you are using standard tags in your app such as and . Change your input to something like
<ion-item>
<ion-label>Username</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
and things shall work smoother.
Ionic is fun to learn because it is easy. Have a visit the Official Doc to see how you can make things easier. With the proper syntax, you will not less styling rules.
I have a 'row' div that contains, essentially, a label, then a text input, then a hyperlink. My problem here is I wish the width of the input to always fill the available width between the label and the hyperlink. I have tried numerous approaches, but with only varied forms of failure. I suspect maybe I can use some sort of margin voodoo to make the a tag not absolute, and always have the input neatly bounded by the lable and the a, but I am now at a complete loss as to what to try next.
Here is my HTML:
<fieldset id="ctl00_cph_previousContacts" class="previousContactsArea">
<legend>Previous Contacts</legend>
<div class="email-row">
<label for="ctl00_cph_addressTo">To</label>
<input name="ctl00$cph$addressTo" type="text" id="ctl00_cph_addressTo" class="email-address text" />
Add...
<span id="ctl00_cph_addressToValidator" dynamic="True" style="display:none;"></span>
</div>
</fieldset>
And here is the CSS:
.manualNotification #recipientsTab .email-row {
margin-top: 5px;
margin-bottom: 5px;
}
.manualNotification #recipientsTab .email-row label {
display: inline-block;
width: 50px;
text-align: center;
}
.manualNotification #recipientsTab .email-row a {
position: absolute;
width: 50px;
right: 10px;
margin-left: 10px;
}
Flexbox can do that
.email-row {
margin-top: 5px;
margin-bottom: 5px;
display: flex;
}
.email-row label {
flex: 0 0 50px;
text-align: center;
}
.email-row input {
flex: 1;
}
.email-row a {
flex: 0 0 50px;
margin-left: 10px;
}
<fieldset id="ctl00_cph_previousContacts" class="previousContactsArea">
<legend>Previous Contacts</legend>
<div class="email-row">
<label for="ctl00_cph_addressTo">To</label>
<input name="ctl00$cph$addressTo" type="text" id="ctl00_cph_addressTo" class="email-address text" />
Add...
<span id="ctl00_cph_addressToValidator" dynamic="True" style="display:none;"></span>
</div>
</fieldset>
JSfiddle Demo
please add flowing css end of your css:
div.email-row{max-width: 30%; float:left;margin-right:20px}
see the following links for more details:
http://www.cssdesk.com/gDzpd
I have created 4 column grid in my html form. i want to have last label and textbox field to be align right side of the page.
I have tried using float:right property but it doesn't seem to work
In fiddle example it is not in single line.
.row {
margin: 10px;
}
.elements {
padding: 10px;
margin-left: 50px;
margin-top: 10px;
border-bottom: ridge;
border-bottom-color: #1f6a9a;
padding-left: 0;
}
.field {
font-size: 15px;
color: #b6d6ed;
}
label {
display: inline-block;
}
input {
background-color: transparent;
border: 0px solid;
height: 25px;
width: 60px;
color: #b6d6ed;
text-align: center;
}
/* I Tried Below Line to Right Align */
.row > .elements:nth-child(2) {
float:right;
}
<div class="row">
<span class="elements">
<label class="field" for="Title">Title</label>
<input id="Title" name="Title" type="text">
</span>
<span class="elements">
<label class="field" for="DateOfBirth">Date of Birth</label>
<input id="DateOfBirth" name="DateOfBirth" type="text" value="" class="hasDatepicker">
</span>
</div>
jsfiddle
Float the first span to the left:
.row > .elements:first-child {
float: left;
}
See it here: http://jsfiddle.net/3DtqB/2/
You have to put the elements class into a <div class=".."></div> and add an CSS command
.elements {
float: right;
margin-top: -[x]px
}
Also you should use two id's instead of a class elements like left_box and right_box and add the commands to the right box.
Simple fix, just add white-space:nowrap; to the .elements class.