I'm using bootstrap 4 input-group and appending or pretending my inputs with add-ons as labels.
For the inputs its looking good. Now I need a multi-line add-on or label for text area.
I'm looking for best possible solution in Bootstrap or CSS.
Here is the code I'm trying.
<style>
.h-unset {
height: unset !important;
}
.multiline-label {
display: inline-block;
word-wrap: break-word;
word-break: break-word;
width: 100%;
}
</style>
<div class="input-group input-group-sm mb-3 row mx-0">
<div class="input-group-prepend col-md-3 px-0">
<label for="naastVastgoedbeleg-ging"
class="input-group-text w-100 rounded-0 multiline-label h-unset"
id="label-naastVastgoedbeleg-ging">
<strong>Werkzaamheden naast vastgoedbeleg-ging (bijv. loondienst of onderneming)</strong>
</label>
</div>
<textarea id="naastVastgoedbeleg-ging"
class="form-control rounded-0 col-md-9 h-unset"
aria-label="naastVastgoedbeleg-ging"
aria-describedby="label-naastVastgoedbeleg-ging">
</textarea>
</div>
Thankx for helping Happy Coding!
It worked by using this css
.multiline-label strong {
white-space: pre-wrap;
}
Related
From what I've learned about <amp-carousel> it has only 2 types of carousel interface: carousel and slides, which you can see on the AMP example website. I need to create something like this, multiple columned carousel. Is AMP carousel able to achieve this?
You can't customize amp-carousel the way you want, you need to check out amp-base-carousel which allows you to set visible-count, advance-count and other useful properties.
The documentation.
Example :
<amp-base-carousel
loop="true"
height="450"
layout="fixed-height"
visible-count="(min-width: 1150px) 3, (min-width: 700px) 2, 1"
advance-count="(min-width: 1150px) 3, (min-width: 700px) 2, 1"
>
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<button slot="next-arrow" class="carousel-next" aria-label="Next">
<i class="fas fa-chevron-circle-right"></i>
</button>
<button slot="prev-arrow" class="carousel-prev" aria-label="Previous">
<i class="fas fa-chevron-circle-left"></i>
</button>
</amp-base-carousel>
With some style for the buttons :
.carousel-prev, .carousel-next {
filter: drop-shadow(0px 1px 2px #4a4a4a);
width: 40px;
height: 40px;
padding: 20px;
background-color: transparent;
border: none;
outline: none;
font-size: 24px;
opacity:0.7;
}
In a way, yes.
You can use the slide interface, in under each section, but 4 entries.
<amp-carousel height="300" layout="fixed-height" type="slides">
<div>
<div class="blue-box"> 1 </div>
<div class="red-box"> 2 </div>
<div class="green-box"> 3 </div>
<div class="yellow-box"> 4 </div>
</div>
<div>
<div class="blue-box"> 9 </div>
<div class="red-box"> 8 </div>
<div class="green-box"> 7 </div>
<div class="yellow-box"> 6 </div>
</div>
</amp-carousel>
I understand it won't be shifting with one entry at a time, but I suppose it would be near to what you want
I have a bootstrap tooltip which I have custom styled. There seems to be an issue with it. Whenever we hover over it, it opens and then immediately closes.
HTML -
<div class="container" style="padding-top:300px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span>
</div>
</div>
Here's an inline link to jsFiddle
UPDATED
I made a few changes. Try this: https://jsfiddle.net/2h7jbt9n/6/
HTML
<div class="container" style="padding-top:30px">
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span>
</div>
</div>
JS
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
container: '.info-circle'
});
});
The issue was with padding for the info-circle. I wrapped it in a container. It doesn't flicker now.
Hope it helps.
You are no longer using the tooltip-arrow as the visual arrow you are using the :before and :after after as the visual arrow. The problem is that you have made the arrow bigger and made your own triangles. When you make your css arrow you are using borders. You have set your top border colors to white and blue to make it seem like the arrow has a border as well. In doing this you have forgotten that your arrow still has a bottom transparent border and this transparent border is covering up the element that you are hovering over to deploy the tooltip. So set your :before and :after psuedo elements for your .tooltip-arrow to have a bottom border of none. Like so:
.tooltip.top .tooltip-arrow:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -17px;
top: -5px;
border-width: 12px;
border-top-color: #003f6e;
border-bottom:none;
}
.tooltip.top .tooltip-arrow:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
left: -15px;
top: -5px;
border-width: 10px 10px 0;
border-top-color: #fff;
border-bottom:none;
z-index: 1;
}
<input type="submit" class="form-control">
I want to add the form-control class only when the screensize is xs. Right now form-control gets added in all screensizes. How can I make it so that form-control class only gets added when screen size is xs?
You could use two different inputs like so:
<input type="submit" class="form-control hidden-lg hidden-md hidden-sm">
<input type="submit" class="hidden-xs">
This will hide the form-control when its anything but xs.
You can use #media
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
For example, to do hide sidebar id tagged div when size screen is less than 768:
#media (here is some true value...)
#media (max-width: 768px) {
#sidebar {
display: none;
}
}
jQuery is another way to do this by adding/removing the class based on the window width. See Docs.
*See working example at Full Screen, then re-size to view the change.
function checkWidth(init) {
if ($(window).width() < 480) {
$('input').addClass('form-control');
} else {
if (!init) {
$('input').removeClass('form-control');
}
}
}
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
});
body,
html {
padding-top: 40px;
padding-bottom: 40px;
}
#loginForm {
max-width: 500px;
padding: 15px;
margin: 0 auto;
background: #ddd;
}
#media (max-width: 480px) {
#loginForm {
background-color: red;
color: white;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="loginForm">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Email address" />
</div>
<div class="form-group">
<label for="pw">Password</label>
<input type="password" id="pw" name="pw" placeholder="Password" />
</div>
<div class="form-group">
<input type="submit">
</div>
</form>
</div>
<!-- /container -->
Responsive text alignment has been added in Bootstrap V4:
https://v4-alpha.getbootstrap.com/utilities/typography/#text-alignment
For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
Copied.
You should use both .xs and .form-control classes together as below:
.form-control.xs {/*Write your declerations.*/}
I'm a beginner for web front-end design, using bootstrap to make a project prototype.
I want to do a product like this website
The features I want is
* expand carousel to full screen when visiting the website and then can scroll down to another div element.
I found this similar solution, but unfortunately it uses Carousel as the whole background.
To get the effect I want, I check the javascript src code and edit it.
modify this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'fixed', 'width': '100%', 'height': '100%'});
into this line (Shown on JSFIDDLE line 13 )
$('.carousel .item').css({'position': 'relative', 'width': $(window).outerWidth(), 'height': $(window).outerHeight()});
Yep, finally get the effect I want!! However, when the photo transition, a unexpected flicker appear, seems the photo is not at right location at first, then go to its right place immediately.
It's annoying when I see the content inside div below, like 1info or 2info.
here is the jsfiddle demo example for the issue.
I tried to use the solution like set z-index, but fail...
Can someone help me to solve this annoying problem? Thanks a lot!!
Here's a flicker-free version without any plugins:
HTML:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div id="slide1" class="fill">
<div class=" carousel-caption">
<h1>1</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide2" class="fill">
<div class=" carousel-caption" >
<h1>2</h1>
</div>
</div>
</div>
<div class="item">
<div id="slide3" class="fill">
<div class=" carousel-caption" >
<h1>3</h1>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.carousel, .item, .active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
#slide1 {
background-image: url('http://stylonica.com/wp-content/uploads/2014/03/Cute-Dog-Wallpaper.jpg');
}
#slide2 {
background-image: url('http://hdwallimg.com/wp-content/uploads/2014/02/White-Dog-Running-Wallpaper-HD.jpg');
}
#slide3 {
background-image: url('http://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg');
}
No additional javascript required, just make sure that the jquery and bootstrap.js files are linked in your page.
How do achieve the following:
┌────────────────────parent────────────────────┐
│ label [text-box ] [button] │
│ paragraph │
└──────────────────────────────────────────────┘
label is aligned to the left
button is aligned to the right
text-box occupies all remaining width within parent
paragraph is aligned to the left, must be left-aligned with label too
Both label and button should obey font properties defined elsewhere as maximum as possible. parent is center-aligned within window, and, naturally, can have arbitrary width.
Please advise.
Updated [Oct 2016]: Flexbox version...
form {
display: flex;
}
form input[type="text"] {
flex: 1;
}
<form>
<label>Name</label>
<input type="text" />
<button>Submit</button>
</form>
<p>Lorem ipsum...</p>
Original answer [Apr 2011]: Table-less CSS version (of table behavior)...
<div id="parent">
<div id="inner">
<label>Name</label>
<span><input id="text" type="text" /></span>
<input id="submit" type="button" value="Submit" />
</div>
<p>some paragraph text</p>
</div>
CSS...
#inner {
display: table;
width: 100%;
}
label {
display: table-cell;
}
span {
display: table-cell;
width: 100%;
padding: 0px 10px;
}
#text {
width: 100%;
}
#submit {
display: table-cell;
}
Demo: http://jsfiddle.net/wdm954/626B2/4/
I don't like first answer with the "table-less" version that actually uses table-cell. Nor the second answer that uses actual tables. Nor third answer that uses hardcoded widths. Here is solution using flex. It is by far simplest:
#parent {
display: flex;
}
input {
flex: 1;
}
<div id="parent">
<label>Name</label>
<input type="text" />
<button>Button</button>
</div>
<div>paragraph</div>
Use tables. :D I know people tend to hate tables, but they will work in this situation...
<div id="parent">
<table style="width:100%">
<tr>
<td>label</td>
<td style="width:100%">
<input type="text" style="width:100%">
</td>
<td>
<button>clickme</button>
</td>
</tr>
</table>
</div>
The only way I know how to achieve this or similar, is to have the "text-box" as a block element that would automatically fill the entire width of the parent, then apply padding to the left and right equal to the total width of the containers on the left and right. Then make the "label" and "button" elements have their position set as relative and float them to where they need to be (float: left, float: right).
Something like,
HTML:
<div id="parent">
<div id="label">label</div>
<div id="button">button</div>
<div id="text-box">
text<br />
text<br />
text<br />
text<br />
text
</div>
</div>
CSS:
div#label
{
position: relative;
float: left;
width: 200px;
background: #F00;
}
div#button
{
position: relative;
float: right;
width: 120px;
background: #0F0;
}
div#text-box
{
padding-left: 200px;
padding-right: 120px;
background: #00F;
}
If the button and label elements don't need to have a set width, all elements could just have their width as a percentage value (all adding up to 100%).
Don't forget, you can use calc(). Let's assume total of width used by label and button is 100px (including margin), then the width is:
.text-box {
width: calc(100% - 100px);
}
If you think it doesn't support a lot of browser, well you are wrong indeed. It supports a lot now. Time has changed
It works without flex and tables if assign float: right and put the button (or several buttons in reverse order) before the input box.
Then place the label with float: left, give the input box 100% width and wrap it inside a span with display: block and overflow: hidden.
No magic involved:
<div style="width:100%">
<button style="float:right">clickme 2</button>
<button style="float:right">clickme 1</button>
<label style="float:left">label</label>
<span style="display:block;overflow:hidden">
<input type="text" style="width:100%"/>
</span>
</div>
The basic idea that all right side buttons are specified before the input box in the reverse order.