I have a repeating partial view in an ASP.NET MVC 5 application that is showing up incorrectly in certain circumstances in Chrome. It's not happening in any other browser, and I'm at a loss to figure out what's going on.
My razor code is pretty straightforward -- just a foreach loop that calls #Html.Partial(). I'm going to skip it for now in the interest of saving space, but the HTML it produces looks like this:
<div id="dataDisplay">
<div id="dataRow39" class="list">
Edit
<span class="normal">AAA Test 1</span>
<span class="large">Test Description 1</span>
X
</div>
<div id="dataRow1" class="list">
Edit
<span class="normal">AHBA</span>
<span class="large">Arkansas Home Builders Association</span>
X
</div>
. . .
</div>
And the page itself looks like this:
When users click the "Edit" link, I use an AJAX call to replace a single div with a different partial view that has input elements for data-entry. That div also has a cancel button that triggers another AJAX call back to the original partial view. That produces nearly identical HTML, but one element gets positioned wrong.
<div id="dataDisplay">
<div id="dataRow39" class="list">
Edit
<span class="normal" style="">AAA Test 1</span>
<span class="large" style="">Test Description 1</span>
X
</div>
<div id="dataRow1" class="list">
Edit
<span class="normal">AHBA</span>
<span class="large">Arkansas Home Builders Association</span>
X
</div>
. . .
</div>
The only difference I can see is those empty style tags. They don't appear in the console when I debug my AJAX, and they don't appear in other browsers. But if I manually go in and remove them, it doesn't seem to fix the layout problem.
I realize I've left out a lot of details. I'm trying to keep this from being really excessively long. I can provide any of the missing details if needed. Does anybody have any idea what could be going wrong?
UPDATE: As I'm playing around with this a bit, I have a feeling it has something to do with the float:right on the .delete-button class. Here's the CSS for that class:
.delete-button {
float: right;
font-size: .9em;
text-align: right;
padding: 0 3px;
margin: auto 0;
color: #888;
}
Related
I have this bit of code:
<div class="kt-portlet__head">
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="la la-user"></i>
</span>
<h3 class="kt-portlet__head-title">
Edit User
</h3>
</div>
</div>
</div>
The content changes across the project, ie, everything within the div with the class kt-portlet__head-label
I need to remove the duplicate wrapper div (i.e, you will see there are two div tags with class kt-portlet__head).
To my knowledge:
I cannot do a search and replace because searching for just the two open wrapper tags and replacing with one will leave two div close tags instead of one.
I cannot do a search and replace on the whole thing because the content changes as stipulated above
I can use 'code wrap/unwrap' on an open document - but this is manual and i might as well just delete the two lines individually.
Isn't there a way to do a kind of 'code unwrap' + search and replace to get this achieved?
Created a blog using Jekyll and git hub pages. I need to indent to align a list of expenses. I found a way how, but I would like to insert that into a function.
Example:
Sum of Contractor expenses - $6,800
Heating and Air - $5,100
Fridge and Stove - $1,100
Hardware store purchases - $5,000
Miscellaneous - $2,000
I would like all of the amounts to line up.
According to this SO question, I can use to create a space. However, I need to insert a lot of these to obtain what I want.
Another suggestion is Tab+Space but this doesn't seem to work in the middle of the text.
From the same post, I tried using Alt+0+1+6+0 and that seems to work.
The expected results would look like this.
Sum of Contractor expenses - TAB;$6,800
Heating and Air - TAB;(5)$5,100
As the answer to that SO question states:
There's no way to do that in markdown's native features. However markdown allows inline HTML...
There are a couple of ways you could do this. You could use a <table> element, where the HTML looks like this:
<table>
<tr><td>Sum of Contractor expenses</td><td>$6,800</td></tr>
<tr><td>Heating and Air</td><td>$5,100</td></tr>
<tr><td>Fridge and Stove</td><td>$1,100</td></tr>
<tr><td>Hardware store purchases</td><td>$5,000</td></tr>
<tr><td>Miscellaneous</td><td>$2,000</td></tr>
</table>
Or, you could use class names and CSS, where the HTML looks like this:
<div>
<span class="description">Sum of Contractor expenses</span>
<span class="cost">$6,800</span>
</div>
<div>
<span class="description">Heating and Air</span>
<span class="cost">$5,100</span>
</div>
<div>
<span class="description">Fridge and Stove</span>
<span class="cost">$1,100</span>
</div>
<div>
<span class="description">Hardware store purchases</span>
<span class="cost">$5,000</span>
</div>
<div>
<span class="description">Miscellaneous</span>
<span class="cost">$2,000</span>
</div>
And, the CSS looks like this:
.description { width: 100px }
.cost { width: 30px; text-align: right; }
Note 1: You'll need to play with the widths to get things aligned the way you want.
Note 2: You could also apply class names and CSS to the <td> tags in the <table>.
Context: I'm using bootstrap 4.1 in a vue.js app.
I have a table that shows the results of a user performed search.
The users are able to "see mode details" by clicking on any row of this results table. So far so good with the mouse.
How do I make the same table accessible with the keyboard?
Expected outcome:
users perform a search
the data is shown in the table
by pressing TAB they focus the <table>
(the "current row" gets highlighted)
by hitting ENTER they are able to "see more details" of the given highlighted row
Questions:
Is there a browser-native way to achieve this?
Is there a way to do it without javascript?
So far:
This is done by using a <table> element with tabindex="0" on each <tr> element.
I'm now adding some javascript magic to make the click/enter user interaction trigger to show more details in another div.
Thanks all for the help.
This is about as close as I think you can get without javascript.
You need to use css tables and not HTML tables and set the a tag as a table-row. Then set the "href" of the a tag to a hidden div with the more info. Use the :target psuedo class to make the hidden info visible.
You can now tab through the rows. However you need to press Return to activate the link (at least in Chrome)
.table {
display: table;
}
.table>.head,
.table>a {
display: table-row;
}
.table>.head>span,
.table>a>span {
display: table-cell;
padding: 5px;
}
.table>a:focus {
background-color: #CCC;
}
.moreInfo>div {
display: none;
}
.moreInfo>div:target {
display: block;
}
<div class="table">
<div class="head">
<span>Id</span>
<span>Name</span>
<span>Date</span>
</div>
<a href="#data1">
<span>1</span>
<span>Some Name</span>
<span>9 Jan 2019</span>
</a>
<a href="#data2">
<span>2</span>
<span>Another Name</span>
<span>10 Jan 2019</span>
</a>
</div>
<div class="moreInfo">
<div id="data1">Some more info on the first item</div>
<div id="data2">Some more info on the second item</div>
</div>
I'm pretty sure that the CSS solution won't be accessible.
In fact the CSS solution is even probably going to make the accessibility less good compared to if you have been used a <table> even without any JavaScript or ARIA.
If you really can't use JavaScript for whatever reason, I would still advice to keep the <table>
If the data presented is really tabular data, screen reader users won't understand anything if you don't use a true <table>.
Some screen readers try to present CSS tables like if they were true HTML tables, but often they fail in doing it really well, and many screen readers don't do anything special so the user see a serie of divs and spans.
Additionally, keyboard and screen reader users are used to:
- tab once to get into the table, tab once more to get out of it
- up/down arrow to move from row to row inside the table
- left/right arrow to move between columns if it's relevant in your case
IF you really want something accessible, that's what you need to do. And it's perfectly undoable without JavaScript.
Why don't you want use JavaScript ?
I can not imagine another way without using javascript! Here is the answer to your question!
You have to use tabindex = "0". But to focus you would have to use javascript
<div>
<a href="#" tabindex="0">
<p>hi</p>
</a>
<a href="#">
<p>hello</p>
</a>
<a href="#">
<p>woah</p>
</a>
<a href="#">
<p>oops</p>
</a>
<a href="#">
<p>Love</p>
</a>
</div>
You can use tabindex for the table, it works perfectly fine
<form>
First: <input tabindex="1" type="text">
Third: <input tabindex="3" type="text"> <br>
Second : <input tabindex="2" type="text">
Forth : <input tabindex="4" type="text"><br>
</form>
I am using bootstrap (Twitter-Bootstrap 3) in a quiz style application and I use bootstrap buttons for the answers of the quiz. My problem is that sometimes the answers are quite long, and instead of wrapping the text to the width of the col that the buttons are placed in, the text just keeps going in one line and goes over the col and the width. Is there an easy way to fix this (Note that I canot define set widths as the length of the answers change)? Showing the code is a bit difficult, as it uses javascript to populate the answer buttons, but I will show a screen shot and the resulted populated HTML (after the javascript has populated the question and answers):
Here is the resulting HTML:
<div class="row">
<div style="float: none; margin: 0 auto;" class="col-sm-7">
<div class="panel panel-default">
<div class="panel-heading">Quiz 4 - This is the quiz 4 description</div>
<div class="panel-body" id="question" style="display: block;"><font color="#AAAAAA"><strong>Code: </strong>80559</font><br><br><font color="#888888"><strong>Instruction: </strong>Based on the provided correct answer, select the answer choice that correctly gives the required evidence from the text. Once the timer runs down you will be forced to move onto the next question.</font><br><br><div class="alert alert-info"><strong>Question: </strong>express a negative sentiment in humorous terms</div></div>
<div class="panel-footer clearfix">
<div class="row">
<div class="col-sm-1" id="submit"></div>
<div class="col-sm-11" id="answers" style="display: block;"><button onclick="submitAnswer(22)" class="btn btn-default btn-sm">negative sentiment: You couldn't pay me to watch that....that's how I feel / humorous terms: beach reading without the beach, airport reading without the airport...</button><br><br><button onclick="submitAnswer(23)" class="btn btn-default btn-sm">negative sentiment: they are just the wrong amount of time / humorous terms: they don't have the compressed energy of a short story</button><br><br></div>
</div>
</div>
</div>
</div>
I would think that bootstrap should be wrapping the button text within the div automatically, but it doesn't. I have been looking for solutions but I haven't been able to find anything that covers this problem particularly. Any help would be appreciated. I don't want to use <a href='#" ...> because it is important that the page not reload or be redirected when the button is pressed. Only the onclick function submitAnwers() should be called with no redirect.
The btn class in Bootstrap 3 contains 'white-space:no-wrap;', so the buttons will not wrap on mutliple lines. You can change this using a simple CSS override like:
.btn {
white-space: normal;
}
Demo: http://www.bootply.com/90082
This is an old question with an old answer. The answer solves the problem, but you can get ugly word breaks, where the button breaks in the middle of a word, seemingly wherever it wants to.
My answer forces the button to wrap between words, providing for a nice, clean, and responsive button.
.btn-responsive {
white-space: normal !important;
word-wrap: break-word;
}
Click Here
Hope it helps someone in the future.
I am creating my own wysiwyg editor and I encountered an issue.
As for the editor itself, it is pretty standard, I am using contenteditable iframe with some execcommand buttons for bold text and so on.
Now for my issue, I am not sure how to keep the html structure neat and clean.
For example, user clicks a button to make text he selected floated to the right which takes the selected text and wraps it in
<div style="float: right">selected text</div>
. But if the users selects the text multiple times floating it back and forth something like this be the result.
<div style="float: right">
<div style="float: left>
<div style="float: right">
selected text
</div>
</div>
</div>
, that is of course pretty messy and ugly.
Is there some clean way how to handle this?
(And I don't want to use some third party editors like MCE)
Thanks