I'm working in an offline view for PWA, I need to design this view (or very similar)
I have tried with this
#extends('layouts.app_site')
#push('styles')
#endpush
#section('content')
<div class="row">
<div class="col-lg-12">
<div class="ibox product-detail">
<div class="ibox-content">
<div class="alert alert-dark" role="alert">
You are currently offline
</div>
<div class="form-group row">
<div class="col-lg-12 text-center">
<img src="{{asset('img/gp_no_image.png')}}">
<h1>
You are currently offline
</h1>
We couldn't load the next page on this connection. Please try again.
</div>
</div>
<div class="form-footer text-center">
<a href=""
class="btn btn-primary btn-sm">Retry Connection</a>
</div>
</div>
</div>
</div>
</div>
#endsection
#push('scripts')
#endpush
And this is my result (ignore the background image)
How can I change the upper alert style like the example image? (use all ibox-content and black color)
and how can I make the retry button bigger?
for alerts, I'm using bootstrap
for buttons, I'm using inspinia
styles
thanks
Related
I am currently working on a web application and I am trying to figure out how to center two bootstrap buttons side-by-side. It works on mobile, but when I try to inspect the page and view it on a mobile device, they go on separate lines and center (one on top of the other). How can I fix this so that on mobile, they appear side-by-side like on the computer? Here is the code:
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 col-lg-3 text-center">
Button 1
</div>
<div class="col-md-4 col-lg-3 text-center">
Button 2
</div>
</div>
</div>
How about this. Remove the breakpoints from your columns and make them occupy half the space no matter what screen size you are using:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row justify-content-center">
<div class="col-6 text-center">
Button 1
</div>
<div class="col-6 text-center">
Button 2
</div>
</div>
</div>
This might look more cleaner
<div class="col-xl-12" style="display:flex">
<div class="btns" style="margin:auto">
<a class="btn btn-primary" href="">Button1 </a>
<a class="btn btn-primary" href="">Button2 </a>
</div>
</div>
</div>
</div>
I coded this website as a side project. The front end works perfectly in every browser and device even safari laptop expect for iPhone safari.
Image of safari i phone display
The picture is there when you click the button it asks if you want to download but the whole thing is turned into the button
what seems to be the problem here?
<section class="hero-wrap js-fullheight" style="background-color: black;">
<div class="container">
<div class="row description js-fullheight align-items-center justify-content-center">
<div class="col-md-8 text-center">
<div class="text">
<h1 style="font-size:35px; font-family:monospace; text-align:center; padding-bottom:20px;">Have you watched mainstream anime (Naruto, Death Note etc) ?</h2></div>
<form action="recc3">
<div class="row">
<div class="col">
<button type="submit" name ="answer3" value=1>
<img src="{% static 'images/yes.png' %}" alt="yes" style="width:100%"></button></div>
<div class="col">
<button type="submit" name="answer3" value=0>
<img src="{% static 'images/no.png' %}" alt="no" style="width:100%"></button></div>
</div>
</form>
</div>
</div>
</div>
</section>
I am working an Angular 4 application ,In this I have a navigation bar with text and font awesome icons .
It's UI is fine in web view but when it comes to mobile view (minimized screen) it is not aligned how I expect .
I have tried my best but I can't fix it .
In Minimized view :
How I expect :(example)
Here I have attached the stackblitz file : https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-w1qhj4?file=app%2Fapp.component.html
xs applies to every screen size if nothing else is provided, sm doesn't apply to mobile screens.
<div class="col-md-3 col-xs-12"> <!-- Changes -->
<div class="container">
<div class="row">
<div class="col-xs-2"> <!-- Changes -->
<i class="fas fa-phone text-white" style="font-size:40px"></i>
</div>
<div class="col-xs-10"> <!-- Changes -->
<div class="container">
<div class="row">
<span class="text-white text-uppercase col-sm-12">Demo 1</span>
<span class="text-white col-sm12" style="margin-left: 14px">Text Text</span>
</div>
</div>
</div>
</div>
</div>
</div>
I have a website that displays many real-time graphs and gauges, all hidden within drawers initially. The graphs are made with the plotly.js library. The gauges are done with JustGage. The code for the containers is as such:
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-5 statistics">
<div class="centered-text">
<div class="container-fluid">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-heading">Statistics Panel</h3>
</div>
<ul class="list-group">
<!-- Base Station Panel -->
<li class="list-group-item">
<div class="row toggle" id="dropdown-detail-1" data-toggle="detail-1">
<div class="col-lg-10 text-left">
Base Station
</div>
<div class="col-lg-2"><i class="fa fa-chevron-down pull-right"></i></div>
</div>
<div id="detail-1">
<hr></hr>
<div class="container-fluid">
<div class="fluid-row">
<div class="col-lg-6">
<div id="happygraph1"></div>
<input id="happybutton1" type="button" value="View History"
onclick="happygraph1.changeMode();"/>
</div>
<div class="col-lg-6">
<div id="happygraph2"></div>
<input id="happybutton2" type="button" value="View History"
onclick="happygraph2.changeMode();"/>
</div>
</div>
<div class="fluid-row">
<div class="col-lg-6">
<div id="happygraph3"></div>
<input id="happybutton3" type="button"
value="View History" onclick="happygraph3.changeMode();"/>
</div>
</div>
<div class="container-fluid">
<div class="fluid-row">
<div class="col-sm-6">
<div id="happygauge1 style="height: 250px; width: 300px;"></div>
</div>
</div>
<div class="col-sm-6">
<div id="happygauge2" style="height: 250px; width: 300px;"></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The issue is that when the page loads, if the data begins appearing on the graphs before the hidden element is expanded, the graphs' containers extend out of the newly expanded element. However, if the element is expanded first, and then the data comes in, it acts exactly how it should. There is no issue with the gauges.
Here is a screenshot of when it's working:
graph containers stay within element
Here is a screenshot of when the element is expanded after the data has started being drawn: graph containers expand out of element
The drawers (and the layout in general) is done up by bootstrap. What is causing the containers to break? I have tried playing with the fluid row and container properties, however to no avail. Thanks in advance.
It seems the issue was not with Bootstrap at all but with some of the layout options set in Plotly. Plotly was sizing the graphs to be much larger than the container only when loaded hidden.
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;
}