How to prevent bootstrap from "drop" at mobile screen size? - twitter-bootstrap-3

For example, I have this
.form-group select {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="col-xs-12">
<div class="form-group form-inline">
<input class="form-control" type="number" name="currency_from_amount" id="currency_from_amount">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
When the screen become smaller, the dropdownlist "drop" into another row which is not what I want. How do I maintain to make it inline (two columns in one row) even it is mobile size?
Expected output is:
But current output is

Here is the solution for your expected output. You need to wrap the input and select box in a row by specifying the col size as per your requirement.
.container {
padding: 10px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="form-group col-xs-6">
<input class="form-control " type="number" name="currency_from_amount" id="currency_from_amount">
</div>
<div class="form-group col-xs-2 nopadding">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<input class="form-control " type="number" name="currency_from_amount" id="currency_from_amount">
</div>
<div class="form-group col-xs-2 nopadding">
<select class="form-control" name="currency_from_code" id="currency_from_code"></select>
</div>
</div>
</div>

Related

Add Vertical Lines inside Cards

I want to make such a card with a bootstrap meaning I want to divide it into three parts regardless of what the card contains of data and icons
But I was not able to divide it into three parts, how can I do that?
And I was able to display the card in this way:
How can i solve this problem?
Card.vue:
<template>
<div>
<div class="card bg-light mb-3 mr-50" style="max-width: 25rem; height: 10rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make</p>
</div>
</div>
</div>
</template>
<script>
</script>
<style>
</style>
Is this what your looking for ? You can use bootstrap grid for this, Checkout the docs
.row{
background-color: #efefef;
}
.col{
background-color: white;
margin: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<div class="container-fluid">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
</div>

How to vertically align text field with it's label and button

I'm basically trying to have this kind of layout:
Label TextField Button
So e.g:
Number of copies [5 ] [Add]
Thought that would be really simple to do. But I've struggled for a few hours now, and this is the closest I've come, which is absolutely terrible:
Here's my code:
<div class="row col-md-12">
<form class="form-inline pull-right">
<div class="form-group">
<label for="numberOfCopies">Number of copies</label>
<input size="1" type="text" class="form-control" id="numberOfCopies">
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
At first some Bootstrap-Basics:
your 'row-div' should be wrapped by a 'container-div'
row and col-xx-x classes need to be on their own div-tags
as you can see at the example below, you could easily get this done using css.
With display: flex; we get all elements of the form-group side by side.
With white-space: nowrap we 'tell' the label to be shown as one-line only.
Using the margin-tags we will get the elements to the right position.
To learn more take a look at the documentations of display, white-space and margin.
I think the usage of input-groups could be interesting, too. Feel free to ask per comment, if anything is unclear.
.form-group.flex {
display: flex;
}
.form-group.flex label {
white-space: nowrap;
margin-top: 7px;
}
.form-group.flex input {
margin: 0 7px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-inline pull-right">
<div class="form-group flex">
<label for="numberOfCopies">Number of copies</label>
<input size="1" type="text" class="form-control" id="numberOfCopies">
<button type="submit" class="btn btn-primary">Add</button>
</div>
</form>
</div>
</div>
</div>

Main list and child list in Vue

I just started vue.js and I try to create a todo like application. The only difference is that for each element of the list, I have a child list. The main list works fine but the child list does not work. I try several hours to find what is wrong with my code but I can not solve the problem. Can someone tell me what I do wrong?
var app = new Vue({
el: "#app",
data: {
groups: []
},
methods: {
deleteGroup(group) {
const groupIndex = this.groups.indexOf(group);
this.groups.splice(groupIndex, 1);
},
createGroup() {
this.groups.push({
title: "",
listMode: 0,
properties: []
});
},
deleteProperty(group, property) {
const propertyIndex = properties.indexOf(group.properties, property);
group.properties.splice(propertyIndex, 1);
},
createProperty(group) {
group.properties.push({
name: "",
type: 0
});
}
}
});
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="app" style="margin: auto; width: 600px;">
<div
v-for="(group, index) in groups"
style=" border: 2px solid gray; margin-bottom: 20px;"
>
<div class="form-group">
<label class="control-label">Group Name :</label>
<input class="form-control" v-model="group.title" />
<span class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">List Mode :</label>
<select class="form-control" v-model="group.listMode">
<option value="0">Fields</option>
<option value="1">List of Fields</option>
</select>
<span class="text-danger"></span>
</div>
<div style="padding-left: 50px;">
<div
v-for="(property, Index2) in group.properties"
style=" border: 2px solid gray; margin-bottom: 20px;"
>
<div class="form-group">
<label class="control-label">Property Name :</label>
<input class="form-control" v-model="property.name" />
<span class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Type :</label>
<select class="form-control" v-model="peroprty.type">
<option value="0">Fields</option>
<option value="1">List of Fields</option>
</select>
<span class="text-danger"></span>
</div>
<!--
<button class='btn btn-success' v-on:click="deleteProperty(group, property)"><i class='trash icon'></i> Delete</button>
-->
</div>
<button class="btn btn-success" v-on:click="createProperty(group)">
Create Group
</button>
</div>
<button class="btn btn-success" v-on:click="deleteGroup(group)">
<i class="trash icon"></i> Delete
</button>
</div>
<button class="btn btn-success" v-on:click="createGroup()">
Create Group
</button>
</div>
</body>
You have a syntax error in your v-model currently with name: "peroprty"
<select class="form-control" v-model="peroprty.type">
Try update to "property"
Obs: You always can look on console/debug of chrome to see what kind error can be.
Especially when trying to do some event with: v-for, v-if, #click, and among others attrs of vue

I want to select xpath of the following dropdown list of Airports

Here if I type in something then the list of airports matching that text are shown up!! So is there a general way by which I can select the xpath for it? Here is the screenshot.enter image description here
and here is the HTML:
<document>
<html lang="en">
<head>
<body>
<!-- Keeping body block so that it can be used by public site as well. -->
<nav class="navbar navbar-default navbar-static-top">
<div id="timezone-change-dialog" class="col-md-12 content content-confirmation hidden">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 wizard-steps-container">
<div class="col-md-12 content">
<div class="row">
<div class="col-md-12">
<form id="id_create-shipment-step-2" class="form-horizontal has-validation-callback fv-form fv-form-bootstrap" role="form" method="post" enctype="multipart/form-data" novalidate="novalidate">
<button class="fv-hidden-submit" type="submit" style="display: none; width: 0px; height: 0px;"/>
<input name="csrfmiddlewaretoken" value="gk0wq70Am8U0sKat5IJ6f8nKquxYlZaz" autocomplete="off" type="hidden"/>
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div id="pickup_airport" class="form-group" style="display: block;">
<label class="col-sm-4 control-label" for="">
<div class="col-sm-6 has-success">
<div class="typeahead-container result hint">
<div class="typeahead-field">
<div class="typeahead-result">
<ul class="typeahead-list">
<li class="typeahead-item">
<a href="javascript:;" data-group="airports" data-index="0">
<span>
(
<strong>AIR</strong>
) Aripuana
<strong>Air</strong>
port, Aripuana, MT, BR
</span>
</a>
</li>
<li class="typeahead-item">
<li class="typeahead-item active">
If the span contains text and it is under li tag then you can do that like this.
//span[contains(text(),'airports')]/parent::li

Overlay bootstrap div row

I'm using Bootstrap, I have a registration form. When register button is clicked, I call ajax to send the form. While remote page is executing, I'd like to overlay the form with a div with a message like "Please wait" How can I overlay the row with exact size.
This is my form:
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form id="forminscr" method="post">
<h2>Registration <small></small></h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control input-lg" placeholder="Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="surname" id="surname" class="form-control input-lg" placeholder="Surname" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="company" id="company" class="form-control input-lg" placeholder="Company" tabindex="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Adresse email" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp" id="mdp" class="form-control input-lg" placeholder="Mot de passe" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp2" id="mdp2" class="form-control input-lg" placeholder="Confirmer" tabindex="6">
</div>
</div>
</div>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>
<div class="col-xs-12 col-md-6">Login</div>
</div>
</form>
</div>
http://jsfiddle.net/stjyjgmb/
you set "please-wait" class in your ajax.
CSS Code
.please-wait{
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
display:none;
}
.please-wait-text{
border: 1px solid #ffffff;
border-radius: 4px;
color: #ffffff;
float: left;
font-size: 22px;
left: 38%;
padding: 20px;
position: absolute;
top: 40%;
width: auto;
}
Js Code
$( document ).ready(function() {
setTimeout(function(){
$('.please-wait').show();
}, 3000);
});
[
// A $( document ).ready() block.
$( document ).ready(function() {
setTimeout(function(){
$('.please-wait').hide();
}, 3000);
});
.please-wait{
background-color: rgba(0, 0, 0, 0.8);
bottom: 0;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
.please-wait-text{
border: 1px solid #ffffff;
border-radius: 4px;
color: #ffffff;
float: left;
font-size: 22px;
left: 38%;
padding: 20px;
position: absolute;
top: 40%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form id="forminscr" method="post">
<h2>Registration <small></small></h2>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="name" id="name" class="form-control input-lg" placeholder="Name" tabindex="1">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="surname" id="surname" class="form-control input-lg" placeholder="Surname" tabindex="2">
</div>
</div>
</div>
<div class="form-group">
<input type="text" name="company" id="company" class="form-control input-lg" placeholder="Company" tabindex="3">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email" tabindex="4">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp" id="mdp" class="form-control input-lg" placeholder="Password" tabindex="5">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="mdp2" id="mdp2" class="form-control input-lg" placeholder="Confirm" tabindex="6">
</div>
</div>
</div>
<hr class="colorgraph">
<div class="row">
<div class="col-xs-12 col-md-6"><input type="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="7"></div>
<div class="col-xs-12 col-md-6">Login</div>
</div>
<div class="please-wait"><div class="please-wait-text">
Please Wait...
</div></div>
</form>
</div>
</div>
Demo