I’ve create a very simple client banner: 1 row of 6 images and an orange background. I'm not sure what my best options are for removing the seemingly doubled amount of padding that is automatically created between each image. Here’s where you can view the current banner: http://dalaigroup.com/maryland-seo/
What I'm trying to keep in mind, is how the images redistribute for a mobile device. The excess padding and margin space is much more noticeable here. Creating zero or negative margin space doesn't work in my favor, because of how the images reformat for mobile.
I'm not sure if I should be creating containers around every 2 images, working in a responsive table, or writing separate code for a mobile version. Is it necessary to write separate code for a client banner like this? How can I write this so that I have more control over the margin and padding? When I try to set specific sizes for these elements, the logo sizes are easily compromised.
Any tips you have will really help. Thank you for your time.
Above each of your divs that is holding the image is an empty <p> tag. This is causing the extra space on top of each of your images. Removing those, as seen in my edit below, should equalize the spacing.
A few other recommendations on the images:
Be careful setting exact width on the images in bootstrap, it could cause spacing issues when viewed on a smaller screen.
Bootstrap has these two classes which you could add to the image that will keep them centered and scale their size proportionately according to user screen size: <img class="img-responsive center-block" src="foo" />
On the snippet below, vertical margin is missing because it isn't pulling the WordPress CSS from your stylesheet
Edit: Added the class with margin definitions from the URL you provided
.aligncenter {
margin-top: 25px;
margin-bottom: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="background: #fe8101;">
<div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16855" title="McCormick" src="http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square.png" alt="McCormick-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square.png 250w, http://dalaigroup.com/wp-content/uploads/2017/05/McCormick-Logo-Small-Square-150x150.png 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div>
<div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16272" title="Adidas" src="http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square.jpg" alt="Adidas-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Adidas-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div>
<div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16271" title="Abercrombie & Fitch" src="http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square.jpg" alt="Abercrombie-and-Fitch-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Abercrombie-and-Fitch-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div>
<div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16274" title="Citibank" src="http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square.jpg" alt="Citibank-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Citibank-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div>
<div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16288" title="Sheraton Hotels" src="http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square.jpg" alt="Sheraton-Hotels-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Sheraton-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div>
<div class="col-md-2 col-xs-6"><img class="aligncenter size-full wp-image-16278" title="Gap" src="http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square.jpg" alt="Gap-Logo" srcset="http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square.jpg 250w, http://dalaigroup.com/wp-content/uploads/2017/04/Gap-Logo-Small-Square-150x150.jpg 150w" sizes="(max-width: 250px) 100vw, 250px" height="250" width="250"></div>
</div>
Related
I have a MaterializeCSS form with selects which have more text than the default width can show.
Currently, the text is a single line that is simply cut off at the widget edge.
The expanded dropdown of options line breaks the text correctly, but the collapsed dropdown does not.
I want to resize the collapsed select dropdown so that all text is shown.
My form is generated by django-material in a Django app, but I believe my fundamental problem is with MaterializeCSS's select widget.
An example element looks like this:
<div class="select-field col s12 required" id="id_formset-organisation_answers-1-question_container">
<label for="id_formset-organisation_answers-1-question">Question</label>
<div class="select-wrapper">
<input class="select-dropdown dropdown-trigger" type="text" readonly="true"
data-target="select-options-f739ead4-0165-a758-650e-74ba61fac041">
<ul id="select-options-f739ead4-0165-a758-650e-74ba61fac041"
class="dropdown-content select-dropdown"
tabindex="0">
<li id="select-options-f739ead4-0165-a758-650e-74ba61fac0410" tabindex="0">
<span>---------</span>
</li>
<li id="select-options-f739ead4-0165-a758-650e-74ba61fac0411" tabindex="0">
<span>VERY LONG TEXT 1</span>
</li>
<li id="select-options-f739ead4-0165-a758-650e-74ba61fac0412" tabindex="0"
class="selected">
<span>VERY LONG TEXT 2</span>
</li>
<li id="select-options-f739ead4-0165-a758-650e-74ba61fac0413" tabindex="0">
<span>VERY LONG TEXT 3</span>
</li>
</ul>
<svg class="caret" height="24" viewBox="0 0 24 24" width="24"
xmlns="http://www.w3.org/2000/svg">
<path d="M7 10l5 5 5-5z"></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
<select id="id_formset-organisation_answers-1-question"
name="formset-organisation_answers-1-question" tabindex="-1">
<option value="">---------</option>
<option value="1">VERY LONG TEXT 1</option>
<option value="2" selected="selected">VERY LONG TEXT 2</option>
<option value="3">VERY LONG TEXT 3</option>
</select>
</div>
<div class="help-block">The question.</div>
</div>
The element <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="..."> does not contain any inner HTML, but by some JS magig shows the selected option. That option, a very long text, is shown as a single line. That line is what I want to line break.
I have searched the MaterializeCSS docs, SO, and the web to figure out a way to force the text to linebreak. The obvious answer seems to be to apply CSS styles for display, overflow and the like.
Style via CSS
I can access the selected text from CSS:
input.select-dropdown {
/* This works: */
color:green;
min-height: 20rem;
/* This does not do anything: */
display: inline-block;
min-height: -moz-fit-content;
min-height: fit-content;
overflow-wrap: break-word;
z-index:10;
}
The above CSS makes the text in each select green and increases the box height, but still comes as a single line with invisible overflow.
I have experimented with different CSS selectors to make sure that we're targeting the correct element here.
No permutation of any CSS class here could get that line to wrap.
Style via JS
MaterializeCSS initialises the widgets through a lot of JS events on page load.
I can also override the styles using JS after page load by inserting:
/**
* Resize select dropdowns to fit text
* #see https://materializecss.com/select.html
*/
window.addEventListener('load', function() {
document.querySelectorAll('select').forEach((el) => {
console.log("Styling element " + el.id);
el.M_FormSelect.input.style.cssText="color:red;";
console.log(el.M_FormSelect.input.style);
});
So I can now take the text that was green as per my CSS and make it red. Again, no style related to text flow (overflow, display, etc) is able to break the text here either.
Here is image...[![ https://i.stack.imgur.com/651dH.png
In above Image 2 widgets are there.
1. which gives MG, MP, Assigned etc(left-hand panel)
2. Right panel(16.9%, 13.1% etc).And these all values gives tooltip.
Step 1:
I have to click one of the option from left-hand-side, in a screenshot its showing MG, MP, Assigned etc. All these options can be differentiate only with style attributes(top and left) and that are into range such as top:235-247px, left:65-72px(for first option)
The code is as below:
<div class="tab-tooltip tab-widget tab-tooltipBR" style="user-select: none; -webkit-tap-highlight-color: transparent; top: 247px; left: 71px;">
<div class="tab-tooltipContainer">
<div class="tab-tooltipContent" wairole="alert" style=""><div class="tab-ubertip tab-widget" style="min-width: 142px;">
<div class="tab-ubertipCommandArea">
<div class="tab-ubertipCommands hide"></div>
<div class="tab-clear"></div><div class="tab-ubertipSelected hide"></div>
</div><div class="tab-ubertipContent">
<div class="tab-ubertipTooltip"><span style="white-space:pre-wrap;tab-size:10;-moz-tab-size:10"><div style="text-align:left;"><span style="font-family:'Arial';font-size:13px;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;">Health Group</span></div></span></div>
<div class="tab-ubertipActions hide"></div>
</div>
</div></div>
</div>
<div class="tab-tooltipConnector"></div>
</div>
Step 2:
Once one of the option clicked it will show only one row with its related value. Say for example , clicked on MG will display MG 16.9% 13.1% 81.6% (full row)and so on and when mousehover it on these values(16.9%, 13.1% etc.) one after another it gives tooltip and that tooltip value I have to fetch. And code for this as below:
<div class = “ tab-tooltip tab-widget tab-tooltipAR” style=”user-select: none; -webkit-tap-highlight-color: transparent; top: 1px; left:119px;”>… </div>
<div class=”tab-tooltipContainer”>
<div class =”tab-tooltipContent” wairole=”alert” style>
<div class=”tab-ubertip tab-widget” style=”min-width: 368px;”>.
<div class =”tab-ubertipContent”>
<div class=”tab-ubertipTooltip”>
<span style =”white-space:pre-wrap;tab-size:10;-moz-tab-size:10”>
<div style=”text-align:left;”>
<span style=””> Castle health Group </span>
</div>
<table style=”vertical-align:top;padding:0px” cellspacing=”0”>
<tbody>
<tr>
<td style =”white-space:pre”>
<span style=”font-family”>**97**</span>
</td>
<td >
<span style=”font-” >**Minimum**</span>
</td>
I am able to fetch the tooltip values(97, Minimum) but how do i mouse hover on each values(16.9%, 13.1% etc) which are just different which each other with 'left' and 'top' attributes.
Please anyone have idea how do i mousehover on each value on the basis of style attribute.
Any help will be appreciated.
Thanks.
A work's client has reported an issue in our application when working with IE11.
On an specific form, sometimes, when opening it, if you type, the typed text won't show. If I open developer tools, it suddenly shows.
This is the rendered html belonging to that form:
<div class="col-sm-6 ">
<div class="form-group" data-ng-show="myform.txtPropietario.visible">
<label class="col-md-4 control-label my-show-hide-animation">Propietario:</label>
<div class="col-md-8">
<div class=" ">
<input name="txtPropietario" class="form-control text-left ng-pristine ng-valid" input-alpha-numeric="ES" onblur="this.value=this.value.toUpperCase();" data-ng-model="myform.values.txtPropietario" data-ng-disabled="myform.txtPropietario.disabled" type="text" step="0.01" maxlength="50" placeholder=" "></div>
<ul class="errores my-show-hide-animation ng-hide" data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$invalid && myform.procesado"><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.required" class="ng-hide"><span>Campo obligatorio</span></li><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.pattern" class="ng-hide"><span>El formato del dato ingresado no es válido.</span></li>
</ul>
</div>
</div>
</div>
The app work's over AngularJs and html is built over Bootstrap 3.
Any idea why is this happening?
It's hard to tell without seeing the CSS, however i encountered this issue a while back and fixed it by setting the height of the input box.
My theory is that IE didn't think there was enough height to show the text in the font size I had specified.
For example
<input type="text" id="example" style="height: 40px" />
I hope this helps.
I want to create a new style for forms in my Twitter Bootstrap site and I want to keep with the SMACKS / OOCSS conventions.
This is the default form:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<!-- More coontent in form here -->
If I want to override the input style it would seem to me to keep with conventions to add a class of form-control-newstyle:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<!-- More coontent in form here -->
However I also want to style the label. Should I add a new style to the label or to the div.form-group?
.form-group wraps around form groups label and an input, it acts like a .row in a .form-horizontal and otherwise, when the form stacks on smaller viewports there's some vertical space so it all doesn't squish together.
The default label style that goes on all labels is:
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
To do
.form-group label {}
Would affect all labels if you've properly formatted your forms.
If you just want to isolate it to a specific label you can make a class for that label and assign a class to just that label. If you want to affect all labels you can just modify the label element.
You can also make a new parent class for anything wrapping around that form and address the label styling like that.
I want to show different images in different devices (not background image). Is it possible to do using bootstrap 3.x like the following?
For large screen
<img src="large-image.jpg" />
for medium device
<img src="medium-image.jpg" />
for small device
<img src="small-image.jpg" />
and so on.
Thanks in advance.
N.B. Finally I have found a good solution by myself. See the accepted answer below.
Try this:
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
<img class="img-responsive" src="layouts/layouts.PNG" /> <!--Mobile-->
</div>
<div class="hidden-xs col-sm-12 hidden-md hidden-lg">
<img class="img-responsive" src="layouts/05.png" /> <!--Tab-->
</div>
<div class="hidden-xs hidden-sm col-md-12 hidden-lg">
<img class="img-responsive" src="layouts/06.png" /> <!--Desktop-->
</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-12">
<img class="img-responsive" src="layouts/Layout_100.png" /> <!--Large-->
</div>
</div>
Use the <img> tag and provide other images in the srcset attribute
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
It is described in detail here:
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
After #EIChapo's comment on this 2 years back question, I have search and read a lot of articles for this solution. As all modern browser except IE supports <picture> tag when I'm posting this answer. There is a bulletproof solution based on Dave Newton's article.
What we need to do is as following:
<picture alt="fancy pants">
<!-- loaded by browsers that support picture and that support one of the sources -->
<source srcset="big.jpg 1x, big-2x.jpg 2x, big-3x.jpg" type="image/jpeg" media="(min-width: 40em)" />
<source srcset="med.jpg 1x, med-2x.jpg 2x, big-3x.jpg" type="image/jpeg" />
<!-- loaded by IE 8+, non-IE browsers that don’t support picture, and browsers that support picture but cannot find an appropriate source -->
<![if gte IE 8]>
<object data="fallback.jpg" type="image/jpeg"></object>
<span class="fake-alt">fancy pants</span>
<![endif]>
<!-- loaded by IE 6 and 7 -->
<!--[if lt IE 8]>
<img src="fallback.jpg" alt="fancy pants" />
<![endif]-->
</picture>
.fake-alt {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
If you want to load only the image relevant to the screen-size, I think the best way is with javascript. Create versions of your photos, and in this case the script looks for an img with "600x400" in the filename, and replaces it with "1200x800" when the screensize is bigger than 767px.
DEMO: http://www.bootply.com/Y8XECJpGjS#
Javascript
if ($(window).width() > 767) {
$("img[src$='600x400']").each(function() {
var new_src = $(this).attr("src").replace('600x400', '1200x800');
$(this).attr("src", new_src);
});
}
HTML
<div class="thumbnail">
<img src="//placehold.it/600x400">
</div>
NOTE: this example uses placehold.it images, but obviously you will create your own image versions, include something to identify them in the filename (i.e. 600px, small, v1, etc), and then use that unique string as the find/replace strings in the script. i.e. If your filenames are photo-small.jpg, photo-mediumd.jpg, photo-large.jpg, then the script looks for "small" and replaces with "medium" or "large" where appropriate.
NOTE: once the image loads, that's it - it does not dynamically change image out as you change the screensize. There is surely a solution that does that, but overkill if not needed.
Bootstrap 5.XX version have the new approach.
please try the code bellow if you are using bootstrap version greater than 5.
<!--Visible only on mobile -->
<div class="d-block d-sm-none d-lg-none">
<img src="small-image.jpg" />
</div>
<!-- Hidden only on mobile-->
<div class="d-none d-sm-block">
<img src="large-image.jpg" />
</div>
Refrence https://getbootstrap.com/docs/5.0/utilities/display/