I have a textarea in the following HTML code with Bootstrap3, which is too small. I gave its parent div class="col-xs-6", and expect it to take about half of the page width. But on a 1300x768 screen in a maximized browser window, the text area is only about 1/8 of the screen width.
Can some help explain what's the cause of the small size and how to fix it?
Thanks
Code is below (and js fiddle):
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<div class = "row">
<textarea id="dataquery" name="data"></textarea>
</div>
<div class = "row">
<button id="datasubmit" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<div class = "row">
Status: <br/>
<span id="dataresult"> </span>
</div>
</div>
<div class="col-xs-6 col-md-6">
Results:
<div class="table-responsive">
<table id="datatable" class="table table-striped table-bordered">
</table>
</div>
</div>
</div>
</div>
You can use bootstrap class form-control to textarea like
<textarea id="dataquery" name="data" class="form-control"></textarea>
This class takes 100% width of the parent
Related
I'm using Bootstrap to make two buttons so that when the screen width decreases, they divide the screen not horizontally, but vertically, something like in the picture
I tried this
index.php:
<div class="container-fluid">
<div class="row">
<div class="col-md mw-100 bg-danger"></div>
<div class="col-md mw-100 bg-success"></div>
</div>
</div>
css:
[class*='col'] {
min-height: 600px;
}
But it overflows at the bottom when the width is less than 768px and I don't know how to fill the empty space below the buttons when the width is greater than 768px
(sorry for the english, I'm using a translator)
You can use col-xs-12 and col-md-6 to get this behaviour.
See results in full page and try to reduce screen size.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-fluid'>
<div class='row'>
<div class='col-xs-12 col-md-6'>
<button class='btn btn-primary'>Button 1</button>
</div>
<div class='col-xs-12 col-md-6'>
<button class='btn btn-danger'>Button 2</button>
</div>
</div>
</div>
I think you are missing your col divs. try this:
<div class="container-fluid">
<div class="row">
<div class="col-md">
<button class="btn btn-danger"></button>
</div>
<div class="col-md">
<button class="btn btn-success"></button>
</div>
</div>
</div>
I am using Bootstrap 4. I am facing an odd issue. I am adding the html using the jquery. The div has call .col-md-9 d-flex. When the other div's are appened to main div (under parent col-md-9) one it overflows and takes whole page (width) and over ride the other div (col-md-3). The code is given as
<div class="container-fluid">
<div class="row">
<div class="col-md-9 filters-div d-flex"><!-- the dynamic code will append to this div-->
<div class="col-md-2 col-xs-6">
<div class="form-group">
<label>Date and time range:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="far fa-clock"></i></span>
</div>
<input type="text" id="reservationdate" class="form-control float-right datetimepicker-input" data-toggle="datetimepicker" data-target="#reservationdate">
</div>
<!-- /.input group -->
</div>
<!-- /.form group -->
</div>
</div>
<div class="col-md-3 d-flex">
<div class="my-div">
<a href="javascript:void(0)" data-toggle="modal" data-target="#modal-default">
<i class="fas fa-filter"></i>Add Filters
</a>
Cancel
Submit
</div>
</div>
</div>
</div>
The jquery which produces the dom element is as follows
$(document).delegate(".add-filter","click",function(){
$val=$("#filter-add").val();
$text=$('#filter-add option:selected').text();
$new_text=$text.replace(/ /g, "-");
$html="<div class='col-md-2 col-xs-6 delete-all' id='"+$new_text+"'><div class='form-group'>";
$html+="<label>"+$text+":</label>";
$html+="<div class='input-group'>";
$html+="<input type='text' class='form-control float-right'><div class='input-group-prepend'><span class='input-group-text delete-filter' data-text='"+$text+"' data-value='"+$val+"'><i class='fas fa-trash'></i></span> </div></div>";
$html+="</div></div>";
$(".filters-div").append($html);
$("#filter-add option:selected").remove();
$('#filter-add').prop('selectedIndex',0);
});
Do let me know whats the issue. The example is here
UPDATE:
The screenshot is attached as follows
You can use flex-wrap to your div:
<div class="col-md-9 filters-div d-flex flex-wrap"><!-- the dynamic code will append to this div-->
Instead, if you don't want to wrap you can reduce the max-width of col-md-2:
.col-md-2 {
max-width: 12% !important;
}
Your issue is up to col-md-2: when you have much of them you get the problem.
I am trying to implement a single page application where I want divs to display one below the other. But on resizing the viewport to various screen sizes, the positioning is getting overlapped and leaving extra spaces in between. I have codepen example to explain the problem in a better way.
https://codepen.io/SaloniDesai/pen/zPBZJr
How to make the divs appear same for every screen size ?Do i need to shuffle the way I have created the layout of the page ?
<div id="headliner" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="row">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}" title="{{g.title}}">
</div>
</div>
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="row">
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}" height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
First, your bootstrap structure isn't good, there isn't container, neither rows or col.
Try this one:
<div class="container-fluid">
<div class="row">
<div id="headliner col-md-12" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
</div>
<div class="row">
<div id="search">
<div class="col-md-12">
<form class="form-inline text-center col-md-6 col-md-offset-3">
<div class="form-group">
<input class="form-control" type="search" ng-model="vm.search.gif" value=""
placeholder="type what you're looking for"/>
</div>
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}"
title="{{g.title}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}"
height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
</div>
Second, you add a lot of absolute class with % height and width. You don't have to do that if you're using bootstrap, all the responsive stuff is handled by the bootstrap grid with col classes. Take a quick look at the grid bootstrap documentation : https://getbootstrap.com/docs/3.3/css/#grid
Here's the codepen working responsively with some modification : https://codepen.io/anon/pen/MOemgw ;)
I am usually able to do this. But for some reason everything I've tried just isn't working.
I've tried
<div class="row">
<div class="col-md-8">
<button>Toronto</button>
<button>Markham</button>
<button>Petawawa</button>
</div>
<div class="col-md-4">
<p>date</p>
<p>date</p>
<p>date</p>
</div>
</div>
And similar variations, but I can't seem to get the date and the event location to line up.
The code where the issue is occuring:
<div id="Location">
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12 aboutCopyContainer">
<p class="copyHeader" style="font-family: testFont;">Locations</p>
<p class="faqContent">Fall for the FEAST at an event near you!</p>
<div class="row">
<div class="col-md-6">
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Toronto.html'">Toronto</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">14</p>
<hr style="margin:0px;" />
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Petawawa.html'">Petawawa</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">7</p>
<hr style="margin:0px;"/>
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
<div class="btnLocationCont">
<button class="btn btn-primary btn-lg locationBtn locationButtonText" style="font-family: AvenirNextLTPro-Condensed;" onclick="window.location.href='http://convio.cancer.ca/site/PageNavigator/UFE_ON_Oktoberfeast_Markham.html'">Markham</button>
<div class="locationDateCont">
<p class="locatDay eventTimeBut">22</p>
<hr style="margin:0px;"/>
<p class="locatMonth eventTimeBut">Oct</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the JS Fiddle of what's happening:
JSFiddle
and this is the website (under Locations section) to give you a better idea of what I'm trying to do (css styling etc applied).
Oktoberfeast Locations
Any suggestions are greatly appreciated! thank you for your time
You added fixed width inside bootstrap column child. And that width together with other element width exeeded bootsrap column width, so the class locationDateCont appeared underneath:
So, in your CSS file, remove that width from that class, and add this:
.btnLocationCont {
width: auto;
}
Hope this helps!
You probably don't want to do this that way. Reason being is on mobile devices they won't match up.
To keep them together and display on desktop and mobile you could do something like this:
<div class="row">
<div class="col-md-4">
<button>Toronto</button>
<p>date</p>
</div>
<div class="col-md-4">
<button>Markham</button>
<p>date</p>
</div>
<div class="col-md-4">
<button>Petawawa</button>
<p>date</p>
</div>
</div>
Fiddle:
https://jsfiddle.net/8t5mjhf8/4/
EDIT: To make sure the p's stay next to the buttons you need the following CSS. You will want to assign a class to the p's as to no interfere with other paragraphs.
p {
display: inline;
}
So I have a major style change whereas when all my views were originally setup I had used Bootstrap and relied on the container class to adjust for media queries at breakpoints of 1200px, 992px, and 768px. All my form input and other content work their padding and all off of the container for paddings, margins, etc... Now, it is requested that the width be 100%, but all the content to stay where it is so that the background colors styling fills the width of display.
I was trying to think of how I can add another container class to make this work over all of the views. What are some recommendations on this with keeping the constraints of content to the 1200px and so on (for media queries and such), but make the other areas spread to that 100%?
Here is an image capture of it now. It is just the tan and dark gray area with the topo image that would expand 100% while all else stays within constraints of container class.
And my code is structured as so you can see where my delima is with over-riding bootstraps container class:
<div class="container">
<form role="form">
<div class="naviaHead col-md-12">
<div class="naviaHeader">
<div class="inner">
<div class="col-md-6 loginArea">
<h1 class="col-md-8">Login</h1>
<div class="form-group">
<div class="form-group col-md-8 naviaInp">
<input type="text" name="userName" class="form-control" placeholder="username" data-ng-model="loginData.userName"autofocus>
</div>
<div class="form-group col-md-8 naviaInp">
<input type="password" name="passWord" class="form-control" placeholder="password" data-ng-model="loginData.password">
</div>
<div style="clear: both;">
<input type="button" class="naviaBtn naviaBlue" data-ng-click="login()" value="login">
<div data-ng-hide="message == ''" class="alert alert-danger">
{{message}}
</div>
</div>
<div class="loginForget">
<span><a class="naviaLink" href="#/logreg/forgotUser">forgot username</a> or <a class="naviaLink" href="#/logreg/forgotPass">forgot password</a></span>
</div>
<div class="sowLogin">
<img class="col-md-3" src="ppt/assets/images/login/sowIcon.svg">
<p class="col-md-9"><a class="naviaLink" href="https://pebb.flex-plan.com/part/PortalRegistration.aspx">PEBB eligible State of Washington employees please click here to access the portal</a></p>
</div>
</div>
</div>
<div class="col-md-6">
<img style="padding-left: 25%;" src="ppt/assets/images/login/naviaLogo.png">
</div>
</div>
</div>
</div>
</form>
<div class="loginLearn">
<div id="area1" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage1-full.png">
<div class="learnText">
<h3 class="teaserTitle">Online Account Access</h3>
<p class="teaserText">24/7 Access to balances, claim submissions and all things Navia!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
<div id="area2" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage2-full.png">
<div class="learnText">
<h3 style="margin-top: 0;" class="teaserTitle">Navia Benefits Card</h3>
<p class="teaserText">Don't wait for reimbursement!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
<div id="area3" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage3-full.png">
<div class="learnText">
<h3 style="margin-top: 0;" class="teaserTitle">FlexConnect</h3>
<p class="teaserText">Link your FSA to your insurnace and file claims instantly!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
</div>
<div style="background-color: #ede8e2; height: 150px; clear: both;">
<!-- intentionally blank -->
</div>
</div>
This will solve your purpose
<div class="container-fluid" style="background-color:red;">//This will be 100% width
<div class="container">//Inside this put your content as it was to make it indent as previous
//Your page HTML here
</div>
</div>