I use Multiselect from AngularJS ui-select.
My multiselect looks like this
http://plnkr.co/edit/zJRUW8STsGlrJ38iVwhI?p=preview
Spans can be arranged in multiple lines if there are many. I want to do nice vertical aligment for this.
I managed to do it for one line:
(source: cs630525.vk.me)
But it fails on multiple lines:
(source: cs630525.vk.me)
(source: cs630525.vk.me)
"nice vertical aligment" - paddings with same colors must be equal
(source: cs630525.vk.me)
HTML
<ui-select multiple class="ui-select-container ui-select-multiple ui-select-bootstrap form-control dropdown"
ng-model="multipleDemo.colors" ng-disabled="disabled">
<ui-select-match class="ui-select-match" placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
{{color}}
</ui-select-choices>
</ui-select>
CSS
.ui-select-multiple.ui-select-bootstrap {
padding: 0 3px;
min-height: 34px;
height: auto;
width: 300px;
}
.ui-select-match {
display: inline;
vertical-align: baseline;
}
.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
min-height: 32px;
margin: 0;
}
.ui-select-multiple.ui-select-bootstrap > div {
min-height: 32px;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
How can I do this?
Add below code to your css
.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
display:block;
}
Related
We are trying to create a chatbot application. The input where user enters the text and 'send' button are inside a div. The div width is 100%. This is working good in the laptop and on all the mobiles except Iphone14 where the send button is getting cutoff. Below is the code.
.chat-container {
background: #fff;
height: 100%;
overflow: hidden;
padding: 0;
border-right: 1px solid #d8dada;
border-left: 1px solid #d8dada;
}
.chat-container>div:last-of-type {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
padding-right: 10px;
}
body>div>div>div:nth-child(2)>span {
background: #dadada;
padding: 10px;
font-size: 21px;
border-radius: 50%;
}
body>div>div>div.message-data-right.macro {
margin: auto;
margin-left: 1%;
}
.chat-header {
background-color: #ffffff;
height: 3.5rem;
line-height: 3.5rem;
color: #000000;
border-bottom: 1px solid #000000;
position: relative;
}
.chat-header-content {
align-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
.header-img {
height: 24px;
width: 106px;
transform: scale(0.85);
vertical-align: middle;
content: url('./../images/vz_logo.svg');
}
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
}
.chat-ul {
width: 100%;
list-style-type: none;
padding: 18px 18px 3px 18px;
position: absolute;
bottom: 62px;
display: flex;
flex-direction: column;
top: 3.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #909296 #dee0e2;
background-color: #f6f6f6;
margin-bottom: 0%;
border-bottom: 1px solid #c1c1c1;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
width: 100%;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.text>p:first-of-type {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p:last-of-type {
width: 100%;
text-align: right;
margin-bottom: -2px;
margin-top: auto;
}
.text-right {
float: right;
font-family: Arial;
position: relative;
}
.send-message {
width: 100%;
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<header class="chat-header">
<img class="header-img" />
<button type="button" class="icon-close" onClick="closeChatWindow()"></button>
</header>
<ul class="chat-ul"></ul>
<div>
<div class="send-message">
<div class="text text-right">
<input class="entered-text" />
</div>
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
Our testing team raised a bug saying that send button gets cutoff on IPhone14. I am not sure how to reproduce the issue as I don't have Iphone14. I have Android phone on which code is working fine. On Pc also, I tested on different browsers all are working fine. I used toggle device toolbar under developer tools to check how it looks like for different devices and used responsive to change width and height. I am not able to reproduce the issue. Below is the image where it got reproduced on Iphone14.
At the end of the image 'Send' grey color button is cutoff. Can any one please let me know how to resolve the issue.
You don't need an iPhone to see this. It's apparent in Chrome for me. Use the emulator in the dev tools if you like.
Remove the float (.text-right) from the layout
Take the 100% width off the input and .send-message
Move the flex class up a level to contain both the input and the button
I've also added some left margin to the button.
I've fixed a great many such situations in my career, and more often than not the solution involves removing unnecessary styling to simplify. You might work though your entire layout and do so.
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
margin-left: 10px;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.send-message {
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<div class="send-message">
<div class="text">
<input class="entered-text" />
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
The most straightforward way to solve this is to is use the CSS calc() function to give input.entered-text a flexible width which will always accommodate the width of the <button>:
e.g. If you give button#send a fixed width (width: 100px), then you can give input.entered-text a width that can accommodate that fixed width (width: calc(100% - 100px))
Example:
#send {
display: inline-block;
width: 100px;
margin-left: 12px;
box-sizing: border-box;
}
.entered-text {
display: inline-block;
width: calc(100% - 12px - 100px);
box-sizing: border-box;
}
Im no expert but should you put a <br> in the div
edit:
line breaks are usually unnecessary so I would say only use this temporary until you find the solution
I would like to push the text down to be centered in the green part, but I cannot seem to figure it out. I've been messing around with it for some time, but I'm still a novice. Any help would be appreciated. I've added the HTML and CSS below.
.beerimgcontainer {
width: 300px;
height: 400px;
margin-bottom: 20px;
margin-right: 20px;
display: inline-block;
position: relative;
text-align: center;
margin-right: 10px;
overflow: hidden;
max-height: 400px;
}
.beerimgcontainer a {
text-decoration: none;
}
.beerimgcontainer span {
text-decoration: none;
font-size: 23px;
font-family: champagne;
color: black;
}
.beerimgcontainer:hover {
background: #165a11;
color: white;
box-shadow: 0px 0px 0px 2px #3c8837;
box-sizing: border-box;
}
.beerimgcontainer:hover span {
color: white;
}
<div class="beerimgcontainer">
<a href="mug.html">
<img src="images/text2.png" class="positionimg" alt="Mug">
<span>Mug</span>
</a>
</div>
img and span are inline elements. They are initially next to each other. Since your image covers the whole width (that's available; 300px on parent div), it pushes the span down. Margin on the span wouldn't work.
What you should do is to set display: block on the span and then set a margin:
.beerimgcontainer span {
display: block;
margin-top: 15px;
}
JSFiddle
I've this list of buttons
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
}
.special {
font-size: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
Now what I've done is that the special button has a bigger font-size. The weird thing is that increasing the font-size moves this button up. I guess this is all very logic but cannot find the explanation (which should help me to fix this of course!)
The explanation is that buttons are inline-element, and the text in the button determines the vertical alignment.
The default vertical alignment for inline elements is to place the bottom of characters on the base line of the text. If you look at the buttons in your example, you see that the bottom of the characters line up exactly.
If you add some text around the buttons, you see that the text of the buttons aligns with the text outside the buttons: http://jsfiddle.net/Guffa/q640e8sc/4/
If you specify a different verical alignment for the buttons, they will line up differently. If you for example use vertical-align: middle;, the buttons will line up at the center of the characters, so the edges of the buttons will line up: http://jsfiddle.net/Guffa/q640e8sc/5/
Another way to avoid that alignment is to make the buttons block elements, for example using float: left;. That makes the buttons line up, but it of course make the buttons react differently to surrounding elements: http://jsfiddle.net/Guffa/q640e8sc/6/
Use vertical-align:
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
And to align the text in the middle, you may use line-height.
button {
background-color: grey;
color: #fff;
border: none;
border-radius: 2px;
box-shadow: 1px 1px 0 0.8px #C0CBD1;
height: 30px;
margin: 0;
padding: 0;
position: relative;
width: 30px;
font: 500 16px/36px sans-serif;
display: inline-block;
vertical-align: top;
line-height: 16px;
}
.special {
font-size: 30px;
display: inline-block;
vertical-align: middle;
line-height: 30px;
}
<button>A</button>
<button>B</button>
<button class="special">C</button>
<button>D</button>
<button>E</button>
I have a problem that I believe might be pretty stupid, but I can't figure out.
I have a form, where I want to align the elements in both sides, problem is I can't align it to the right (where the red line is), here is a picture to show it:
and here is my SASS (sorry if is not very tidy I been working for a while in it and might be messy):
.contact {
margin: 100px auto 0;
max-width: $half-width;
form {
letter-spacing: 2px;
color: $color4;
input, textarea {
border: 3px solid $color5;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px;
background: $color6;
&:focus {
outline: none !important;
border-color: $color3 !important;
}
textarea {
height: 10em;
width: 100%;
overflow: inherit;
}
}
.info-group {
margin-top: 10px;
label {
display: inline-block;
width: 45%;
float: left;
&:nth-child(2) {
float: right !important;
margin: 0 auto;
}
}
}
.tell-group {
width: 100%;
label {
display: inline-block;
margin-top: 10px;
}
textarea {
height: 10em;
width: 100%;
float: left;
}
}
.submit-wrap {
margin-top: 10px;
float: right;
input {
width: 100px;
font-size: 18px;
text-transform: uppercase;
color: $color6;
background-color: $color5;
border: none;
&:hover {
color: $color1;
}
}
}
}
}
Thanks!
padding: 10px; is going to add 20px to the width, this extra width is likely what is causing the problem. You can change the width attribute to width: calc(100% - 20px); to account for the 10px padding on each side of the element.
Here is a list of where calc is supported: http://caniuse.com/#feat=calc
You can also try adding these css rules to the problem elements to move them over:
position: relative;
left: -20px;
You might also have to add position: relative; to the parent element
Here is a fiddle showing the left -20px method: http://jsfiddle.net/0f153w8e/
Side note: you might have to adjust the left amount a little bit to make it exact if your text areas have borders (which they probably do)
I have this div wedged between two bars(other divs), though when I add text into the equation, the div gets repositioned down. It works as intended without the p element and its children. Here's a fiddle to demonstrate the issue: http://jsfiddle.net/57uSQ/
this is the HTML that is causing the problem:
<p>
<span class="name">DOLCE & GABBANA</span>
</br>
<span class="title">THE ONE</span>
</p>
And the correlating CSS:
.videoDesc {
display: inline-block;
border: 1px solid #000000;
border-right: 0px;
height: 200px;
width: 500px;
}
.videoDesc p {
display: inline-block;
margin: 0;
padding: 0;
}
.videoDesc .name {
display: inline-block;
padding: 0px;
}
.videoDesc .title {
display: inline-block;
padding: 0px;
}
.title {
font-family: Lekton;
font-size: 1.25em;
}
.name {
font-family: Oswald;
font-weight: lighter;
font-size: 2.5em;
letter-spacing: 10px;
padding-left: 5px;
}
You need to add vertical-align:top to .videoDesc:
.videoDesc {
display: inline-block;
border: 1px solid #000000;
border-right: 0px;
height: 200px;
width: 500px;
vertical-align:top;
}
jsFiddle example
The default vertical alignment is baseline, which is causing the behavior you see.