I want to have two datetime pickers and some buttons align in one row. I want the date time pickers on the row to be on the left and the buttons aligned on the right.
All of this I want in one row.
I have been messing around with this for some days now and cannot get them to be in one single row, they are all over the place.
The code:
<div class="container">
<div class="row">
<div class="col-sm-6" style="height: 75px;">
<div class="col-md-5">
<div class="form-control">
<div class='input-group date' id='datetimepickerFrom' style="cursor: pointer; width: 200px;">
<input type="text" id="DateFrom" runat="server" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepickerTo' style="cursor: pointer; width: 200px;">
<input type="text" id="DateTo" runat="server" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<asp:Button ID="btnYesterday" runat="server" Text="Yesterday" class="btn btn-primary"
OnClick="btnYesterday_Click" Style="margin-top: 50px; width: 100px;" />
<asp:Button ID="btnWeek" runat="server" Text="Week" class="btn btn-primary"
OnClick="btnWeek_Click" Style="margin-top: 50px; margin-left: 20px; width: 100px;" />
<asp:Button ID="btnMonth" runat="server" Text="Month" class="btn btn-primary"
OnClick="btnMonth_Click" Style="margin-top: 50px; margin-left: 20px; width: 100px;" />
</div>
</div>
</div>
</div>
</div>
As usual, thanks in advance.
Normally in bootstrap you would just put the class form-inline on your form element (or whatever container that contains your form elements). Your other inline styles may be hosing some of that up. See this example:
See the fiddle here https://jsbin.com/juqereyazu/edit?html,output
Related
I created a caurosal of 8 products when i apply a border than border are joint to each other. i did not create class because all are created dynamically. if i decrease the width the another product that are hide on another caurosal are shown. how i fix it
<div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(0%);">
<a href="/collections/activities-storybooks-kids/products/personalised-goodnight-storybook-girl">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/GOODNIGHT_books-01.jpg?v=1520416066">
<h4>Personalised Goodnight Storybook - Girl</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="81743151117" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 1,350</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" value="Add to Cart">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(100%);">
<a href="/collections/activities-storybooks-kids/products/personalised-goodnight-storybook-boy">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/GOODNIGHT_books-04.jpg?v=1520416051">
<h4>Personalised Goodnight Storybook - Boy</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="81757011981" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 1,350</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" value="Add to Cart">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(200%);">
<a href="/collections/activities-storybooks-kids/products/stories-for-1-year-olds">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/stories_for_1_yr_old_6e9cdfeb-6ba4-4b57-893d-f0165014e016.jpg?v=1495545024">
<h4>Stories for 1 year olds</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="1824342913" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 250</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" disabled="" value="Sold Out">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(300%);">
<a href="/collections/activities-storybooks-kids/products/my-learning-library-first-words">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/Learning_Library_-_Words.jpg?v=1537694862">
<h4>My Learning Library - First Words</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="695380246574" id="add-to-cart-form">
<div class="prices">
<span class="compare-price">Rs. 799</span>
<span class="price on-sale" itemprop="price">Rs. 599</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" disabled="" value="Sold Out">
</form>
</a>
</div>
I tried width property. Select first child and nth of type but that product are hide are shown and first product left side of boundary are hide.
you can use this code by adding CSS
.main_div{
display: flex;
column-gap: 10px;
}
/* or */
.card{
margin: 0 10px;
}
I have layout like this
<div class="form-group">
<div class="col-md-12">
<div class='col-md-6'>
<div class="form-group">
Date of ship:
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<input type="submit" value="Guardar" class="btn btn-xs" style="background-color:#3399FF;color:#FFFFFF" />
</div>
</div>
</div>
Demo
That I want to do is fix label "Date of ship" just a side of input instead above of it. How can I achieve it? Regards
It's a simple matter of positioning it to the left side of the input field. You might have to decrease the size of the input box, or moving the input field to the left. To do this, you need CSS.
First of all, they're in a col-md-6. Which is half the width of a full row.
This isn't much space, but it should work, CSS:
label { float: left; }
input.form-control { float: left; }
I've got this piece of code:
<h2>Workout Selector</h1>
<div class="form-group">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
<input type="text" class="form-control" id="workout-keywords">
</div>
Which produces this:
But I want to add a button in the place of this red box:
(What do I need to do?)
Edit: It should not be the submit button
try this code and style color it as you want.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
ref : https://v4-alpha.getbootstrap.com/components/input-group/#button-addons
i guess you can work with cols, sth like:
<div class="form-group">
<div class="col-md-12">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" id="workout-keywords">
</div>
<div class="col-md 4">
<span class="btn btn-default">Button</span>
</div>
</div>
You can use position absolute to position the button above the input and then use padding right for the input to prevent the text to get hidden by the absolute positioned button. Try something like this:
<h1>Workout Selector</h1>
<div class="form-group">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
<input type="text" class="form-control" id="workout-keywords">
<button type="submit">Submit</button>
</div>
.form-group {
position: relative;
padding: 0;
input {
padding-right: 60px;
height: 25px;
line-height: 25px;
width: 100%;
}
button {
position: absolute;
right: 0;
top: 0;
width: 60px;
line-height: 25px;
text-align: center;
z-index: 300;
}
}
I think you can achieve what you want to with display flex, input-group and a trick on input-group-addon class/element. Take a look.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline" style="width:300px;margin:10px;">
<div class="form-group">
<label class="sr-only" for="test">input here something</label>
<div class="input-group" style="display:flex;">
<input type="text" class="form-control" id="test" placeholder="input here something">
<button type="button" class="input-group-addon btn btn-primary" style="width:50px;">go</button>
</div>
</div>
</form>
Hope this helps.
I have some form with glyphicon question mark for field inline tooltip on right:
<div class="form-group required">
<label for="username" class="col-sm-2 control-label">User Name:</label>
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username"/>
<div class="row tooltip-block"><a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip.">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
</div>
In full screen it looks as I need:
But on mobile devices or small screens it works only with hovering some very small area within my glyphicon mark and the tooltip overlays it:
Also when I inspect the corresponding a element in Chrome's developer tools, it points to some area outside the span element:
Here is the fiddle: https://jsfiddle.net/r2cm9c9u/
How is it possible to make the whole span with glyphicon as a hyperlink for tooltip?
I would move the positioning to the actual link and make the link and glyphicon a block element:
I have added a class to the link below
<div class="form-group required">
<label for="username" class="col-sm-2 control-label">User Name:</label>
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username" />
<div class="row tooltip-block">
<a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip." class="glyphicon-holder">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
</div>
And changed your classes:
.tooltip-box .glyphicon-holder {
position: absolute;
top: 8px;
right: 22px;
font-size: 1.25em;
display: block;
}
.tooltip-box .glyphicon-holder:hover {
text-decoration: none;
}
.glyphicon.glyphicon-question-sign {
color: gray;
display: block;
}
Updated fiddle
You can do it with pure css.
If you have:
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username"/>
<div class="row tooltip-block"><a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip.">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
You don't need 'a' first of all. What you can do with CSS is:
.tooltip-block span {
display: none;
}
.tooltip-block:hover + span {
display: block;
}
Whats gonna happen is, when you hover over .tooltip-block following span element will display block. Definitely don't need javascript for a thing like this.
Then if you want that tooltip to be clickable you can use javascript for that.
<div class="col-sm-3 tooltip-box">
<input id="username" type="text" class="form-control" placeholder="username"/>
<div class="row tooltip-block" onclick="doSomething()"><a href="#" data-toggle="popover" data-trigger="hover" data-placement="auto right" data-content="Test tooltip.">
<span class="glyphicon glyphicon-question-sign"></span></a>
</div>
</div>
I have two inputs, one button and one drop down menu, how do i align it so that its next to each other. I have created div for each element but things dont look right. this is what i have done:
<div class="class1">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1" >
<input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="class1" >
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1">
<input type="text" value="" class="form-control" id="deatPicker2">
</div>
<div class="button" style="display: inline-block;">
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"> </i></button>
</div>
My Css: during this process i have noticed the above example works fine but only if i create another web-page if i use my current web page then things dont stay the way i want
.class1{
display: inline-block;
width: 15px;
}
.input1{
display: inline-block;
width: 200px;
padding-left: 20px;
}
It looks like you're using bootstrap.
So you can align it all using rows and cols.
like so :
<div class="row class1">
<div class="col-md-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
<input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="col-md-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
<input type="text" value="" class="form-control" id="deatPicker2">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>Search</button>
</div>
</div>
a row gives you a maximum of 12 cols.. so depending on how many aligned items you want, you can do :
<div class="col-md-3"></div> x 4 to get a 4 col layout
http://jsfiddle.net/mT6VV/7/
Try this Code :-
<div class="class1">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1" >
<input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="class1" >
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1">
<input type="text" value="" class="form-control" id="deatPicker2">
</div>
use this Css :
.class1 {
display: inline-block;
}
.input1 {
display: inline-block;
width: 200px;
padding-left: 20px;
}
button {
width:90px;
height:20px;
}
you don't have need to put extradiv tag in your design source.
Demo For Alignment
it is working.