Using AdminLTE template for creating dashboard layout with ANGULAR 5 + bootstrap 3.4,
In one of the components I have to align image, title and a dropdown in a row which when resized causes the dropdown to overlap the text content of title.
full-page view :
resized or minimized browser:
HTML snippet:
<div class="col-md-4"> //---> entire layout split between 3 boxes
<span class="info-box-icon-sm"> //---> adds float:left property for the icon
<i class="fa fa-search" id="escalatedIcon"></i>
</span>
<h4 >Search Requests</h4>
<div class="box-select pull-right">
<select class="ng-untouched">
<option class="select-bg-white" value="country">
country
</option>
</select>
</div>
</div>
I've tried adding individual div's to each element & then add boostrap "col" sizing but the drop down always seems to be overlapping the title, could I be simple as missing something since I'm a beginner to responsive designing?
Appreciate your response
What are you trying to achieve? How should the layout be?
The problem is in css of your h4, it's not formatted. h4 is inline, so it will treated like common text.
<div class="col-md-4"> //---> entire layout split between 3 boxes
<span class="info-box-icon-sm"> //---> adds float:left property for the icon
<i class="fa fa-search" id="escalatedIcon"></i>
</span>
<div style="white-space: normal;"> <-- give css
<h4 >Search Requests</h4>
</div>
<div class="box-select pull-right">
<select class="ng-untouched">
<option class="select-bg-white" value="country">
country
</option>
</select>
</div>
</div>
is it set to nowrap? and check the overflow of the text. Better to wrap h4 in a div so you can set the overflow and wrap text
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit
Related
I want to display a optional text suffix within a vertically centered flexbox/bootstrap column. It should only be displayed on small screens. The following code works, but only if I use the "display:contents" on the span-element, which doesn't have a perfect browser support. If I remove the "display:contents", the text suffix is displayed as another column. How can I make the text suffix flow with the previous text, without using display:contents?
<div class="row">
<div class="col-2">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="100" height="300">
</div>
<div class="col d-flex align-items-center">
Title text Title Text
<span class="d-lg-none" style="display:contents">
(Optional column is here on small devices)
</span>
</div>
<div class="col-2 d-none d-lg-flex align-items-center">
Optional column
</div>
</div>
https://jsfiddle.net/9z81tvsx/
d-flex is display:flex;
The element lays out its contents using flow layout (block-and-inline layout).
If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it
generates an inline box. Otherwise it generates a block container box.
https://developer.mozilla.org
You are using .d-flex on its parent. Therefore, the span.d-lg-none has display:block in small size screen. And hence, it behaves like a column.
You can fix the issue by wrapping the text in a Paragraph element.
<p>Title text Title Text <span class="d-lg-none" >(Optional column is here on small devices)</span></p>
How can i add text over image ? I always get text bellow image? Is there any style so that title and descripton goes over image and not below?
<div class="row">
#foreach (var banner in Model.SportBanners)
{
<a href="#banner.LinkTo">
<img id="resize" src="#banner.BannerPath" alt="" />
<div class="#banner.ClassTag">
</div>
</a>
<div class="image" style="">
<h1>
#MvcHtmlString.Create(Html.Encode(banner.Title).Replace("-", "<br />"))
</h1>
<br>
<p> #MvcHtmlString.Create(Html.Encode(banner.Description).Replace("-", "<br />"))</p>
<br>
<br>
</div>
}
</div>
You can use positioning.
Set the position: relative of the containing element.
Set the position: absolute of any internal element that you want to take control over beyond the default behaviour. Then top, right, bottom and left will allow you to position this element wherever you want in the containing div.
This will help you position things based on your HTML where img tags are used (allowing CMS driven alts etc.), rather than setting them as background images, which will require verbose classes or inline style tags.
Please see http://jsfiddle.net/5nryk3L6/2/ for a simplified version (removes the CMS backend stuff) of your code that achieves this. I've added a margin-left on the container to demonstrate how position absolute values are relative to the next element up the DOM tree with position relative set, as this can be quite confusing
I am having trouble with aligning DIV tags. I am making a very basic page with Lightbox. In the old days, I would just make a table, align every cell vertically to the bottom, and move on. But trying to use DIV tags, having some trouble. When I do the code below, its pretty jumbled. 2 shorter DIV containers may align on one "row". Can someone point to me the best way to achieve this?
HTML CODE
<div id='wrapper' style='width:924px;>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
<div style='float:left;width:308px;background-color:green'>
<a href='' title='title' rel='lightbox[10]' title=''>
<img src='' width='250px'>
</a>
<br/>
TITLE
</div>
...
</div>
Thanks!
See this fiddle. use a class instead of inline styles. I'm using inline-block here instead of float. the result is the divs are aligned at the bottom instead of the top. but be aware of whitespace in the code. see how I smashed your divs together. If there is whitespace a width of 33% is too much and will knock the third div down a line.The width of 33% is one third of the container so they each take up the same width.
I have a list of calendar events. The html looks like this:
<li data-id="1">
<a href="#calendar-item/1">
<div class="calendar" style="">
<div class="calendar-header"></div>
<div class="calendar-month">Dec</div>
<div class="calendar-day">11</div>
</div>
<p>Parents Association Non-Uniform Day</p>
<span class="chevron"></span>
</a>
</li>
I have given the list item padding, but it is ignoring the content of the div tag, see the image:
Here is the jsfiddle.
works in firefox for me but you defenitely need to clear your float. The easiest way to do that is using overflow: hidden on the list item so it takes the space of the floating icon and wraps its padding around that instead of just the text next to it
Try this my be slow your problem
CSS
give flot:left in below class
li p:nth-of-type(1) {float:left;}
And give flot:left in below class
li{float:left;}
Here is what I have.
I played with DIV tags but still cannot figure out how to use them to design this page?
one of the problems I am having is that I cannot correctly align the "Alias" label with its TextBox that is under it...and also putting these controls on the same line - for example Reference Sequence and Ancestry is another problem I could not fix yet.
Tables shouldn't be considered unless it's truly tabular data. I'd recommend the blue and green spaces be div elements with set widths, floated left. The grey div should be cleared. The green and blue sections seem to be separated for layout convenience and are not related content, so I wouldn't recommend fieldset over div elements.
If you give label and input/select elements set widths and use display: block, the label display shouldn't be problematic. The Not Found link and checkbox seem to be the only unique parts to the form.
Float the top 2 divs (blue and green), set a width for each of them and toss a margin-right on the blue one (or a margin-left on the green one) to get the red space you want.Then have the bottom div clear so it skips onto the next line.
As for the "Alias" label and alignment issue, I'd suggest using an unordered list with list-style:none. Each label would go on its own li, as would each input. This should automatically line them up left justified, as is the case with your current form. Plus it has the benefit of not having to hard-set the width (if that's something that can be said to be an issue in this case).
example markup
<li><label>Alias</label></li>
<li><input type='text'></li>
Try this. It is likely that it will work.
You may have to tweak few style values for your needs.
<div style="clear:both">
<div id="topLeft" style="float:left;width:400px;padding:7px">
<div style="clear:both;margin:5px 0">
Gene Symbol
</div>
<div style="clear:both;margin:5px 0">
//drop 'Gene Symbol Search Box' here
</div>
//repeat Gene Symbol like divs for other elements
</div>
<div id="topSeparator" style="float:left;width:10px">
</div>
<div id="topRight" style="float:left;width:400px;padding:7px">
<div style="clear:both;margin:5px 0">
Alias
</div>
<div style="clear:both;margin:5px 0">
//drop 'Alias Box' here
</div>
//repeat Alias like divs for other elements
</div>
</div>
<div style="clear:both;margin:10px 0 0 0;padding:7px">
<div style="clear:both;margin:5px 0">
//drop checkbox here
</div>
<div style="clear:both;margin:5px 0">
//drop buttons here
</div>
</div>